首先注明原作者是香菇(siitake.cn)表示强烈感谢,其次声明本免费模板为V1.0的基础上修改,不会涉及原作者收费模板的问题。
这是一款Typecho相册主题,二呆在原作者香菇免费版本V1.0的基础上进行了修改,之后才发现原作者已经将免费版本升级到了V201807150831,但基本和作者演示站 https://photo.siitake.cn/相同。
起初本想只修改V1.0免费版本的头部导航栏的,结果一发不可收拾,用我的低级代码水平花一天时间进行了后续的统一修改,不过还是和原主题有一些不同,比如此修改版使用的是V1.0版本获取附件图片,在此基础上支持了WeiboFile微博图床插件,但只能通过附件上传实现;而原作者香菇的V201807150831版本完美的同时判断了内容图片和附件图片,不仅限于附件上传图片。
下面对此次修改版本进行介绍。
此免费修改版主题已经上架到TypechoStore应用商店(http://forum.typecho.org/viewtopic.php?f=6&t=11421)中,可自由快速下载安装该主题。
模板介绍:
一款Typecho摄影/相册主题,由香菇编写,由VX-Diamond0419修改,开发环境为Typecho 1.1 (17.10.30),用到的第三方库有 Bootstrap, Masonry, lightGallery等。
模板截图:
模板特点:
1. 以相册的形式完美进行图片展示,并实现图片缩放、幻灯等功能。
2. 人性化的自适应导航模块。
3. 可以为相册提供完整的相册信息等。
4. 新颖的侧滑评论模块不会占用相册本身空间。
5. 新增随机相册功能,完全看心情浏览相册。
6. 新增友情链接模块,只需在后台随行添加即可,支持链接图标、描述、排序等。
7. 图片懒加载功能实现。
8. 页脚数据统计让相册站内数据清楚明了。
9. 404页面美化。
10. 单独实现RSS订阅和Sitemap地图页面,可使用独立页面创建。
使用方法:
1. 将本主题解压在网站主题目录usr/themes内,主题文件夹名必须为photograph。
2. 后台->外观->启用本主题->进入设置外观内填写信息。
版本信息:
原作者:香菇(http://siitake.cn)
修改作者:二呆(VX:Diamond0419)
版本记录:
2018-12-28 V1.0.1 免费修改版完成
下载方式:
1、下载TypechoStore应用商店插件(http://joke.tongleer.com/346.html),在应用商店即可快速下载安装;
2、独立下载地址:http://joke.tongleer.com/350.html
修改过程:
1. 导航修改
代码: 全选
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false"> <span class="sr-only">Toggle navigation</span> <span class="glyphicon glyphicon-th-large" aria-hidden="true"></span> </button>
<a class="navbar-brand" href="<?=$this->options->siteUrl();?>">
<?php $this->options->title();?>
</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<!-- pageNav -->
<?php $this->widget('Widget_Contents_Page_List')->to($pages); ?>
<?php while($pages->next()): ?>
<li><a href="<?php $pages->permalink(); ?>" title="<?php $pages->title(); ?>"><?php $pages->title(); ?></a></li>
<?php endwhile; ?>
<!-- randomLink -->
<!-- cateNav -->
<li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">分类<span class="caret"></span></a>
<ul class="dropdown-menu">
<?php
$this->widget('Widget_Metas_Category_List')->to($categories);
while($categories->next()){
if($categories->parent!=0){
continue;
}
?>
<li><a href="<?php echo $categories->permalink;?>" title="<?php echo $categories->name;?>"><?php echo $categories->name;?></a></li>
<?php
}
?>
</ul>
</li>
<!-- diyNav -->
<li><a href="javascript:;" title="" target="_blank"></a></li>
</ul>
<!-- search & setting -->
<!-- float search -->
<form class="navbar-form navbar-left" id="search" method="post" action="" role="search">
<div class="form-group">
<label for="s" class="sr-only">搜索关键字</label>
<input type="text" id="s" name="s" class="form-control input-search" placeholder="输入关键字搜索" />
<button type="submit" class="btn btn-default button-search"> <span class="glyphicon glyphicon-search" aria-hidden="true"></span> </button>
</div>
</form>
<!-- right search & setting -->
<ul class="nav navbar-nav navbar-right">
<li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false"><span class="glyphicon glyphicon-cog" aria-hidden="true"></span><span class="space-5"></span>管理<span class="caret"></span></a>
<ul class="dropdown-menu">
<li class="last">
<a href="<?=$this->options->siteUrl();?>admin"><span class="space-5"></span>
<?php if(!$this->user->hasLogin()){ ?>登录<?php }else{?>用户中心<?php }?>
</a>
</li>
<li role="separator" class="divider"></li>
<?php
$otherlink=json_decode($this->options->otherlink,true);
if(isset($otherlink)){
foreach($otherlink as $val){
if($val["name"]!=null&&$val["link"]!=null){
?>
<li>
<a href="<?=$val["link"];?>" target="_blank" rel="nofollow"><span class="space-5"></span><?=$val["name"];?></a>
</li>
<?php
}
}
}
?>
</ul> </li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container-fluid -->
</nav>
2. 返回顶部
代码: 全选
<li id="go-top"><span class="glyphicon glyphicon-arrow-up" aria-hidden="true"></span></li>
<script type="text/javascript">
$(function(){
$("#go-top").hide();
$(window).scroll(function(){
if($(this).scrollTop() > 100){
$('#go-top').fadeIn();
}else{
$('#go-top').fadeOut();
}
});
$('#go-top').click(function(){
$('html ,body').animate({scrollTop: 0}, 300);
return false;
});
});
</script>
3. 返回底部
代码: 全选
<li id="go-bottom"><span class="glyphicon glyphicon-arrow-down" aria-hidden="true"></span></li>
<script type="text/javascript">
$(function(){
$("#go-top").hide();
$(window).scroll(function(){
if($(this).scrollTop() > 100){
$('#go-top').fadeIn();
}else{
$('#go-top').fadeOut();
}
});
$('#go-top').click(function(){
$('html ,body').animate({scrollTop: 0}, 300);
return false;
});
});
</script>
4. 随机相册
代码: 全选
<?php
if($this->options->isRandomAlbum=="y"){
$queryRandom= "select cid from ".$this->db->getPrefix()."contents where type='post' AND status='publish' ORDER BY rand()";
$rowRandom = $this->db->fetchRow($queryRandom);
?>
<li onclick="location.href='<?=$this->options->siteUrl();?>index.php/<?=$rowRandom["cid"];?>.html';"><span class="glyphicon glyphicon-random" aria-hidden="true"></span></li>
<?php
}
?>
5. 侧滑评论
代码: 全选
<?php if ($this->is('post')) : $this->need('comments.php'); endif; ?>
<?php if ($this->is('post')) : ?>
<li id="ex-comment"><span class="glyphicon glyphicon-comment" aria-hidden="true"></span></li>
<?php endif; ?>
<script type="text/javascript">
$(function() {
if(window.location.href.indexOf("#comment-")>-1) {
$("#post-comments").addClass("comment-open");
}
$("#ex-comment").click(function() {
$("#post-comments").toggleClass("comment-open");
});
});
</script>
//最后再将comments.php中的整体评论模块用<div id="post-comments"></div>包含起来即可。
6. WeiboFile微博图床插件的支持,在function.php获取附件图片中修改如下代码
代码: 全选
$queryPlugins= $db->select('value')->from('table.options')->where('name = ?', 'plugins');
$rowPlugins = $db->fetchRow($queryPlugins);
$plugins=@unserialize($rowPlugins['value']);
if(isset($plugins['activated']['WeiboFile'])){
$attachPath[] = array($attach['name'], 'https://ws3.sinaimg.cn/large/'.$attach['path'].'.jpg');
}else{
$query= $db->select('value')->from('table.options')->where('name = ?', 'siteUrl');
$row = $db->fetchRow($query);
$attachPath[] = array($attach['name'], $row["value"].$attach['path']);
}
7. 图片懒加载主要代码
代码: 全选
<script type="text/javascript" src="https://apps.bdimg.com/libs/jquery-lazyload/1.9.5/jquery.lazyload.min.js"></script>
$(function() {
$("img.lazy").lazyload({
placeholder : "<?php echo $this->options->lazyUrl!=null?$this->options->lazyUrl:"https://ws3.sinaimg.cn/large/005V7SQ5ly1fylk8tcxu9g30m80godh4.jpg";?>",
effect: "fadeIn",
});
});
<img src=\"".($this->options->lazyUrl!=null?$this->options->lazyUrl:"https://ws3.sinaimg.cn/large/005V7SQ5ly1fylk8tcxu9g30m80godh4.jpg")."\" title=\"$img[0]\" data-original=\"$img[1]\" class=\"post-item-img lazy\">
8. 友情链接模块
代码: 全选
function printFriends($link){
?>
<style>
.friendlink{margin:0 auto;width:calc(100% - 100px);}
@media screen and (max-width:calc(100% - 100px);) {
.friendlink{width: calc(100% - 100px);}
}
</style>
<?php
$friendlink=json_decode($link,true);
if(isset($friendlink)){
$friendlinks='<div class="friendlink"><marquee direction="up" behavior="scroll" scrollamount="1" scrolldelay="10" loop="-1" onMouseOver="this.stop()" onMouseOut="this.start()" width="100%" height="30" style="text-align:center;">友情链接:';
array_multisort(array_column($friendlink, 'order'), SORT_DESC, $friendlink);
foreach($friendlink as $value){
$icon=$value["icon"]!=""?$value["icon"]:"0";
$iconlink=is_numeric($icon)?'https://wpa.qq.com/msgrd?v=3&uin='.$icon.'&site=qq&menu=yes':$value["link"];
$iconimg=is_numeric($icon)?'https://q1.qlogo.cn/g?b=qq&nk='.$icon.'&s=100':$icon;
$friendlinks.='<a href=javascript:open("'.$iconlink.'");><img src="'.$iconimg.'" width="16" /></a><a href="'.$value["link"].'" target="'.$value["target"].'" title="'.$value["detail"].'" rel="'.$value["rel"].'">'.$value["name"].'</a> ';
}
$friendlinks.='</marquee></div>';
echo $friendlinks;
}
}
```
9. 页脚统计数据
代码: 全选
function getDataCount($type) {
$data=array();
$db = Typecho_Db::get();
switch($type){
case "attachnum":
$queryAttach=$db->select('count(*) as total')->from('table.contents')->where('type = ?', 'attachment')->where('status = ?', 'publish');
$rowAttach = $db->fetchRow($queryAttach);
$data["attachnum"]=$rowAttach["total"];
break;
case "albumnum":
$queryAlbum= $db->select('count(*) as total')->from('table.contents')->where('type = ?', 'post')->where('status = ?', 'publish');
$rowAlbum = $db->fetchRow($queryAlbum);
$data["albumnum"]=$rowAlbum["total"];
break;
case "catenum":
$queryCate= $db->select('count(*) as total')->from('table.metas')->where('type = ?', 'category');
$rowCate = $db->fetchRow($queryCate);
$data["catenum"]=$rowCate["total"];
break;
case "pagenum":
$queryPage= $db->select('count(*) as total')->from('table.contents')->where('type = ?', 'page')->where('status = ?', 'publish');
$rowPage = $db->fetchRow($queryPage);
$data["pagenum"]=$rowPage["total"];
break;
case "commentnum":
$queryComment= $db->select('count(*) as total')->from('table.comments')->where('type = ?', 'comment')->where('status = ?', 'approved');
$rowComment = $db->fetchRow($queryComment);
$data["commentnum"]=$rowComment["total"];
break;
}
return $data;
}
10. 404页面修改美化
代码: 全选
<!doctype html>
<html>
<head>
<meta charset="<?php $this->options->charset(); ?>">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0">
<meta name="renderer" content="webkit">
<meta name="apple-mobile-web-app-capable" content="yes" />
<link rel="icon" href="<?php $this->options->themeUrl('favicon.png'); ?>">
<link rel="apple-touch-icon" href="<?php $this->options->themeUrl('favicon.png'); ?>">
<title>404</title>
<style>
body{
background-color:#444;
font-size:14px;
}
h3{
font-size:60px;
color:#eee;
text-align:center;
padding-top:30px;
font-weight:normal;
}
</style>
</head>
<body>
<h3>
404 - <?php _e('您请求的页面不存在!'); ?>
<form method="post">
<p><input type="text" name="s" size="40" placeholder="你想查看的页面已被转移或删除了,要不要搜索看看" class="text" autofocus /><button type="submit"><?php _e('搜索'); ?></button><button onClick="location.href='<?=$this->options->siteUrl();?>';" type="button"><?php _e('首页'); ?></button></p>
</form>
</h3>
</body>
</html>
11. RSS订阅
代码: 全选
header("Content-type: text/xml");
header('HTTP/1.1 200 OK');
$feed = new Typecho_Feed("1.0","RSS 2.0","UTF-8","zh-CN");
$feed->setTitle($this->options->title);
$feed->setBaseUrl($this->options->siteUrl);
$feed->setFeedUrl($this->options->siteUrl);
$feed->setSubTitle($this->options->description);
$this->widget('Widget_Contents_Post_Recent','pageSize=10')->to($result);
while($result->next()){
$feed->addItem(array(
'title' => $result->title,
'content' => $this->options->feedFullText ? $result->content : (false !== strpos($result->text, '<!--more-->') ?
$result->excerpt . "<p class=\"more\"><a href=\"{$result->permalink}\" title=\"{$result->title}\">[...]</a></p>" : $result->content),
'date' => $result->created,
'link' => $result->permalink,
'author' => $result->author,
'excerpt' => $result->description,
'comments' => $result->commentsNum
));
}
echo $feed->__toString();
12. Sitemap地图
代码: 全选
<?php
if (!defined('__TYPECHO_ROOT_DIR__')) exit;
header("Content-type: text/xml");
header('HTTP/1.1 200 OK');
echo '<?xml version="1.0" encoding="UTF-8"?>';
echo '<urlset xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns="http://www.sitemaps.org/schemas/sitemap/0.9"
xsi:schemaLocation="http://www.sitemaps.org/schemas/sitemap/0.9 http://www.sitemaps.org/schemas/sitemap/0.9/sitemap.xsd">';
$this->widget('Widget_Contents_Post_Recent','pageSize=10')->to($result);
while($result->next()){
?>
<url>
<loc><?php echo $result->permalink; ?></loc>
<lastmod><?php echo $result->created; ?></lastmod>
<changefreq>monthly</changefreq>
<priority>0.6</priority>
</url>
<?php
}
?>
</urlset>