页面

分类

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

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即可

版权属于：作者名称

本文链接：https://www.sitstars.com/archives/65/

转载时须注明出处及本声明

标签： 教程 typecho handsome 美化

添加新评论