客至汲泉烹茶, 抚琴听者知音

typecho+handsome折腾笔记02

没想到居然还能整出第二篇,不过这一篇大多都是东抄西抄,博主进行整合而已,美化的首要原则仍然是不影响读者阅读体验,更不能有明显的卡顿现象(至少在我的PC环境中浏览我的博客没有出现卡顿)

前台美化插件-AliceStyle

这个插件来自@萌卜兔

自带13个默认效果:

  • 首页文章列表获取焦点放大
  • 首页头像自动旋转
  • 首页文章版式阴影化
  • 首页文章图片获取焦点放大
  • 顶部彩色跑马灯特效
  • 文章内打赏处插入menhera酱求打赏图片
  • 文章内打赏图标跳动
  • 右侧列表导航栏图标颜色
  • canvas动态背景
  • 页面背景透明
  • 主题盒子优化等效果
  • 评论框打字粒子特效
  • 博客信息标签和标签云彩色特效

于是我就可以卸载掉折腾笔记01中安装的ActivatePowerMode彩色标签云插件了。

不喜欢某一效果?(比如我不喜欢顶部跑马灯,感觉加了之后有明显的卡顿)

打开/usr/plugins/AliceStyle/static/css/custom.css,注释掉某一特效即可

此外,该插件还带有看板娘动态背景鼠标样式功能(不过我都没有启用,具体效果请查看@萌卜兔的博客,个人觉得不加任何背景的透明样式最好看,可参见我的博客)

如果你博客启用了pjax,那就要添加相应的代码。比如彩色标签云要在PJAX中添加以下代码

<!--彩色标签云-->
let tags = document.querySelectorAll("#tag_cloud-2 a");
let colorArr = ["#428BCA", "#AEDCAE", "#ECA9A7", "#DA99FF", "#FFB380", "#D9B999"];
tags.forEach(tag => {
    tagsColor = colorArr[Math.floor(Math.random() * colorArr.length)];
    tag.style.backgroundColor = tagsColor;
});

博主介绍闪字效果

将以下代码加入后台设置->博主介绍中,当然,介绍文字要改成你自己的。

<span class="text-muted text-xs block">
<div id="chakhsu"></div> 
<script> 
var chakhsu = function (r) {function t() {return b[Math.floor(Math.random() * b.length)]} 
function e() {return String.fromCharCode(94 * Math.random() + 33)}  
function n(r) {for (var n = document.createDocumentFragment(), i = 0; r > i; i++) {                 var l = document.createElement("span");
l.textContent = e(), l.style.color = t(), n.appendChild(l) } 
return n}
function i() {var t = o[c.skillI];
c.step ? c.step-- : (c.step = g, c.prefixP < l.length ? (c.prefixP >= 0 && (c.text += l[c.prefixP]), c.prefixP++) : "forward" === c.direction ? c.skillP < t.length ? (c.text += t[c.skillP], c.skillP++) : c.delay ? c.delay-- : (c.direction = "backward", c.delay = a) : c.skillP > 0 ? (c.text = c.text.slice(0, -1), c.skillP--) : (c.skillI = (c.skillI + 1) % o.length, c.direction = "forward")), r.textContent = c.text, r.appendChild(n(c.prefixP < l.length ? Math.min(s, s + c.prefixP) : Math.min(s, t.length - c.skillP))), setTimeout(i, d)  } 
 /*以下内容自定义修改*/ 
 var l = "", o = ["客至汲泉烹茶,抚琴听者知音" ].map(function (r) {return r + ""}),
 a = 2, g = 1, s = 5, d = 75, b = ["rgb(110,64,170)", "rgb(150,61,179)", "rgb(191,60,175)", "rgb(228,65,157)", "rgb(254,75,131)", "rgb(255,94,99)", "rgb(255,120,71)", "rgb(251,150,51)", "rgb(226,183,47)", "rgb(198,214,60)", "rgb(175,240,91)", "rgb(127,246,88)", "rgb(82,246,103)", "rgb(48,239,130)", "rgb(29,223,163)", "rgb(26,199,194)", "rgb(35,171,216)", "rgb(54,140,225)", "rgb(76,110,219)", "rgb(96,84,200)"], c = {text: "", prefixP: -s, skillI: 0, skillP: 0, direction: "forward", delay: a, step: g}; i() }; chakhsu(document.getElementById('chakhsu'));                     </script> 
</span> 
</span>

右边侧栏加入每日pixiv热榜图片

这是github上的一个小部件,理论上适用于任何平台(Wordpress、typecho等等)任何主题。我们仍以handsome为例,完成后的效果参见本博客右侧边栏。

将以下代码加到后台设置->开发者设置->全局右侧广告位

<iframe src="https://cloud.mokeyjay.com/pixiv" frameborder="0"  style="width:240px; height:380px;"></iframe>

然后修改handsome/component/sidebar.php

找到<h3 class="widget-title m-t-none text-md"><?php _me("广告") ?></h3>,将广告修改为p站每日热门

对,我这里是将原本广告位的位置替换为pixiv图片,如果你博客有展示广告的需求,请自行寻找其他可以放该部件的位置。

当然,你也可以自己部署该服务,参见github

访客信息获取

这是一个插件,原文地址,只适配handsome插件,效果可以去原博查看,或者在本文底部评论查看效果。

使用方法

首先下载插件。

[button color="success" icon="glyphicon glyphicon-download-alt" url="https://doge.uk/usr/uploads/2019/10/4119419080.zip"]原博下载[/button]

[button color="success" icon="glyphicon glyphicon-download-alt" url="https://www.jianguoyun.com/p/DbESS2AQhsXvBxjI-NkD"]本地分流[/button]

上传插件至plugins目录并解压,修改文件名为UserAgent

打开Handsome/component/comments.php代码文件,大概第60~80行左右,将代码

<span class="comment-author vcard">
    <b class="fn"><?php echo $author; ?></b><?php echo $Identity; ?>
</span>

改为

<span class="comment-author vcard">
    <b class="fn"><?php echo $author; ?></b><?php echo $Identity; ?><?php UserAgent_Plugin::get_useragent($comments->agent,$comments->ip); ?>
</span>

后台启用插件,进行相关设置。

注意

使用CDN的同学,需要在Typecho博客网站的根目录的config.inc.php插入下面的代码:

//** 防止CDN造成无法获取客户真实IP地址 */
if(isset($_SERVER['HTTP_X_FORWARDED_FOR'])) 
{
    $list = explode(',',$_SERVER['HTTP_X_FORWARDED_FOR']);
    $_SERVER['REMOTE_ADDR'] = $list[0];
}

当然,仅仅是对静态资源做CDN加速(比如上篇博客中我的做法),是不需要这一步的。

一言api古诗词版

假如你是个古诗词爱好者,你可能希望将handsome自带的一言换为换成古诗词版的,刚好已经有人开发出这样的api了,我们直接调用即可。

今日诗词官网地址

我比较喜欢的一点是,它会自动获取访客ip,然后根据ip所在地、访问时间等信息来推荐相关的古诗词(比如如果你在上海的晚上打开网站,它就会推送有关江南、夜雨的古诗词),很妙。具体的推荐方式点我查看

主题根目录下打开index.php,找到以下代码:

<small class="text-muted letterspacing indexWords"><?php
              if (@!in_array('hitokoto',$this->options->featuresetup)) {
                  $this->options->Indexwords();
              }else{
                  echo '加载中……';
                  echo '<script>
                         $.ajax({
                            type: \'Get\',
                            url: \'https://v1.hitokoto.cn/\',
                            success: function(data) {
                               var hitokoto = data.hitokoto;
                              $(\'.indexWords\').text(hitokoto);
                            }
                         });
</script>';
              }
              ?></small>

更改为以下代码:

<small class="text-muted letterspacing indexWords"><span id="jinrishici-sentence">正在加载今日诗词....</span>
<script src="https://sdk.jinrishici.com/v2/browser/jinrishici.js" charset="utf-8"></script></small>

当然,别忘了在主题后台启用主题增强功能->增强功能开关->启用一言接口

标题栏title自动变化

来自@友人C

实现效果为离开网站页面和重新回到网站页面时动态显示不同文字,参见我的博客。

[scode type="yellow"]我把代码中的ico注释掉了,感觉没有必要设置多个ico,如果你有需求可以去掉注释。[/scode]

把下面的代码添加到开发者设置->自定义输出head 头部的HTML代码中即可。

<script>
var OriginTitile = document.title,
titleTime;
document.addEventListener("visibilitychange",
function() {
    if (document.hidden) {
        //$('[rel="shortcut icon"]').attr("href", "//www.dreamwings.cn/queue/wp-content/uploads/2016/05/fail.ico");
        document.title = "页面已崩溃!点击恢复!";
        clearTimeout(titleTime)
    } else {
        //$('[rel="shortcut icon"]').attr("href", "//www.ihewro.com/favicon.ico");
        document.title = "(/≧▽≦/)咦!又好了! " + OriginTitile;
        titleTime = setTimeout(function() {
            document.title = OriginTitile
        },
        2000)
    }
});
</script>

时间轴

来自@余生's Blog,准确来说,它只是一段随时可调用的html代码,但是我觉得它挺好看的,用在文章或者博客介绍中或许不错。

首先下载timeline.css并放到你自己的服务器中

[button color="success" icon="glyphicon glyphicon-download-alt" url="https://www.jianguoyun.com/p/DU05q94QhsXvBxjTk5MC"]timeline.css[/button]

然后你可以在任何文章或页面内调用以下代码(自行修改css引用地址)

!!!
<meta charset="utf-8" />
<title>
    时光轴
</title>
<link rel="stylesheet" href="https://www.sitstars.com/yanshu/timeline.css" type="text/css" />
<!--
<style type="text/css">
</style>
-->
<ul class="cbp_tmtimeline">
    <li>
        <time class="cbp_tmtime"> <span>2019-11-07</span></time> 
        <div class="cbp_tmlabel">
            <p>
                截止 2019-11-07 号。总更新文章 38 篇
            </p>
        </div>
    </li>
    <li>
        <time class="cbp_tmtime"> <span>2019-10-12</span></time> 
        <div class="cbp_tmlabel">
            <p>
                域名更换为sitstars.com,决定认真做站!
            </p>
        </div>
    </li>
    <li>
        <time class="cbp_tmtime"> <span>2019-10-01</span></time> 
        <div class="cbp_tmlabel">
            <p>
                历经大半年雁陎终于又更新了一次博客!
            </p>
        </div>
    </li>
</ul>
!!!

显示效果

时光轴
  • 截止 2019-11-07 号。总更新文章 38 篇

  • 域名更换为sitstars.com,决定认真做站!

  • 历经大半年雁陎终于又更新了一次博客!

[scode type="yellow"]typecho要想直接显示html效果,需要用!!!把html代码包裹住[/scode]

右侧导航栏添加加载耗时与访客总数、文章总字数

参考资料:https://slske.com/9.html
https://www.baoshuo.ren/archives/479.html

因为handsome6.0.0版本开启了functions.php加密,所以我们需要通过其他手段修改。

首先打开/var/Widget/Archive.php,添加以下代码

/** 初始化皮肤函数01 */
$functionsFile01 = $this->_themeDir . 'functions01.php';
if ((!$this->_invokeFromOutside || $this->parameter->type == 404) && file_exists($functionsFile01)) {
    require_once $functionsFile01;
    if (function_exists('themeInit')) {
        themeInit($this);
    }
}

接着在主题文件夹下,如我的是/usr/themes/handsome新建一个functions01.php,填入以下代码:

//加载耗时
function timer_start() {
    global $timestart;
    $mtime     = explode( ' ', microtime() );
    $timestart = $mtime[1] + $mtime[0];
    return true;
}
timer_start();
function timer_stop( $display = 0, $precision = 3 ) {
    global $timestart, $timeend;
    $mtime     = explode( ' ', microtime() );
    $timeend   = $mtime[1] + $mtime[0];
    $timetotal = number_format( $timeend - $timestart, $precision );
    $r         = $timetotal < 1 ? $timetotal * 1000 . " ms" : $timetotal . " s";
    if ( $display ) {
        echo $r;
    }
    return $r;
}

//浏览总数
function theAllViews(){
    $db = Typecho_Db::get();
    $row = $db->fetchAll('SELECT SUM(VIEWS) FROM `typecho_contents`');
        echo number_format($row[0]['SUM(VIEWS)']);}

//字数统计
function allOfCharacters() {
    $chars = 0;
    $db = Typecho_Db::get();
    $select = $db ->select('text')->from('table.contents');
    $rows = $db->fetchAll($select);
    foreach ($rows as $row) { $chars += mb_strlen(trim($row['text']), 'UTF-8'); }
    $unit = '';
    if($chars >= 10000)     { $chars /= 10000; $unit = '万'; } 
    else if($chars >= 1000) { $chars /= 1000;  $unit = '千'; }
    $out = sprintf('%.2lf %s',$chars, $unit);
    return $out;
}

最后打开/usr/themes/handsome/component/sidebar.php,大概在86行之后的位置,添加以下代码:

<li class="list-group-item text-second"><span class="blog-info-icons"><i data-feather="edit-3"></i></span><span class="badge pull-right"><?php echo allOfCharacters(); ?></span><?php _me("全站字数") ?></li>
                         
<li class="list-group-item text-second"><span class="blog-info-icons"><i data-feather="user"></i></span> <span class="badge pull-right"><?php echo theAllViews();?></span><?php _me("总浏览量") ?></li>

<li class="list-group-item text-second"><span class="blog-info-icons"><i data-feather="clock"></i></span><span class="badge pull-right"><?php echo timer_stop();?></span><?php _me("加载耗时") ?></li>

添加百度已收录

来自:https://wfblog.net/archives/baidu_check.html

打开/usr/themes/handsome/post.php

搜索分类,在相关代码下添加

<!--百度收录-->
<li class="meta-baidu"><span class="post-icons"><i class="glyphicon glyphicon-refresh" id="baidu_icon"></i></span><span class="meta-value" id="baidu_result">加载中</span></li>

在后面添加代码

<script>
        function baidu_check(){
            $.getJSON("https://api.sitstars.com/api/baidu_handsome/?domain="+window.location.href,function(result){ 
                if (result.code == 200) {
                    $('#baidu_icon').removeClass('glyphicon-refresh');
                    $('#baidu_icon').addClass('glyphicon-ok-circle');
                    $('#baidu_result').text('百度已收录');
                }else if(result.code == 403){
                    $('#baidu_icon').removeClass('glyphicon-refresh');
                    $('#baidu_icon').addClass('glyphicon-info-sign');
                    $('#baidu_result').text('百度未收录');
                }else{
                    $('#baidu_icon').removeClass('glyphicon-refresh');
                    $('#baidu_icon').addClass('glyphicon-remove-circle');
                    $('#baidu_result').text('查询收录失败');
                }
            });
        }
        baidu_check();
</script>

注:我用的是自己的api,速度可能会比较慢,你可以自己搭建,详见作者原文:https://wfblog.net/archives/baidu_check.html

另:如果你启用了PJAX,那么切换文章的时候不能正确显示百度收录情况,此时需要在后台添加一个回调函数:

if((typeof baidu_check) !== "undefined"){

baidu_check();
}

文章排序修改

教程来自:http://jdeal.cn/archives/wzpx.html

typecho默认排序为按发布时间排,如果想修改为按修改时间排,那么可以这样:

打开网站根目录下/var/Widget/Archive.php文件,大概在1400-1406处,找到

/** 仅输出文章 */
$this->_countSql = clone $select;
$select->order('table.contents.created', Typecho_Db::SORT_DESC)
->page($this->_currentPage, $this->parameter->pageSize);
$this->query($select);
}

table.contents.created改为table.contents.modified即可

添加新评论取消回复