Loading... 没想到居然还能整出第二篇，~~不过这一篇大多都是东抄西抄，博主进行整合而已~~，美化的首要原则仍然是不影响读者阅读体验，更不能有明显的卡顿现象（至少在我的PC环境中浏览我的博客没有出现卡顿） ## 前台美化插件-AliceStyle 这个插件来自[@萌卜兔](http://racns.com/index.php/374.html) 自带13个默认效果： * 首页文章列表获取焦点放大 * 首页头像自动旋转 * 首页文章版式阴影化 * 首页文章图片获取焦点放大 * 顶部彩色跑马灯特效 * 文章内打赏处插入menhera酱求打赏图片 * 文章内打赏图标跳动 * 右侧列表导航栏图标颜色 * canvas动态背景 * 页面背景透明 * 主题盒子优化等效果 * 评论框打字粒子特效 * 博客信息标签和标签云彩色特效 于是我就可以卸载掉[折腾笔记01](https://www.sitstars.com/archives/56/)中安装的`ActivatePowerMode`和`彩色标签云`插件了。 不喜欢某一效果？（比如我不喜欢顶部跑马灯，感觉加了之后有明显的卡顿） 打开`/usr/plugins/AliceStyle/static/css/custom.css`，注释掉某一特效即可 此外，该插件还带有`看板娘`、`动态背景`、`鼠标样式`功能（不过我都没有启用，具体效果请查看[@萌卜兔](http://racns.com)的博客，个人觉得不加任何背景的透明样式最好看，可参见我的博客） 如果你博客启用了pjax，那就要添加相应的代码。比如彩色标签云要在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; }); ``` ## 博主介绍闪字效果 将以下代码加入`后台设置->博主介绍`中，当然，介绍文字要改成你自己的。 ```html <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](https://github.com/mokeyjay/Pixiv-daily-top50-widget)上的一个小部件，理论上适用于任何平台（Wordpress、typecho等等）任何主题。我们仍以`handsome`为例，完成后的效果参见本博客右侧边栏。 将以下代码加到`后台设置->开发者设置->全局右侧广告位` ```html <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](https://github.com/mokeyjay/Pixiv-daily-top50-widget)。 ## 访客信息获取 这是一个插件，[原文地址](https://doge.uk/coding/useragent-modify.html)，只适配handsome插件，效果可以去原博查看，或者在本文底部评论查看效果。 **使用方法** 首先下载插件。 <button class="btn m-b-xs btn-success btn-addon" onclick='window.open("https://doge.uk/usr/uploads/2019/10/4119419080.zip","_blank")'><i class="glyphicon glyphicon-download-alt"></i>原博下载</button> <button class="btn m-b-xs btn-success btn-addon" onclick='window.open("https://www.jianguoyun.com/p/De4sTpYQhsXvBxjLo6AC","_blank")'><i class="glyphicon glyphicon-download-alt"></i>本地分流</button> 上传插件至`plugins`目录并解压，修改文件名为`UserAgent`。 打开`Handsome/component/comments.php`代码文件，大概第60~80行左右，将代码 ```php <span class="comment-author vcard"> <b class="fn"><?php echo $author; ?></b><?php echo $Identity; ?> </span> ``` 改为 ```php <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`插入下面的代码： ```php //** 防止CDN造成无法获取客户真实IP地址 */ if(isset($_SERVER['HTTP_X_FORWARDED_FOR'])) { $list = explode(',',$_SERVER['HTTP_X_FORWARDED_FOR']); $_SERVER['REMOTE_ADDR'] = $list[0]; } ``` 当然，仅仅是对静态资源做CDN加速（比如[上篇博客](https://www.sitstars.com/archives/56/)中我的做法），是不需要这一步的。 ## 一言api古诗词版 假如你是个古诗词爱好者，你可能希望将handsome自带的一言换为换成古诗词版的，刚好已经有人开发出这样的api了，我们直接调用即可。 [今日诗词官网地址](https://www.jinrishici.com/) > 我比较喜欢的一点是，它会自动获取访客ip，然后根据ip所在地、访问时间等信息来推荐相关的古诗词（比如如果你在上海的晚上打开网站，它就会推送有关江南、夜雨的古诗词），很妙。具体的推荐方式[点我查看](https://www.jinrishici.com/doc/#how)。 主题根目录下打开`index.php`，找到以下代码： ```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> ``` 更改为以下代码： ```php <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](https://www.ihewro.com/archives/301/) 实现效果为离开网站页面和重新回到网站页面时动态显示不同文字，参见我的博客。 <div class="tip inlineBlock warning">我把代码中的`ico`注释掉了，感觉没有必要设置多个ico，如果你有需求可以去掉注释。</div> 把下面的代码添加到`开发者设置`->`自定义输出head 头部的HTML代码`中即可。 ```js <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](https://blog.hidove.cn/post/125)，准确来说，它只是一段随时可调用的html代码，但是我觉得它挺好看的，用在文章或者[博客介绍](https://www.sitstars.com/about.html)中或许不错。 首先下载`timeline.css`并放到你自己的服务器中 <button class="btn m-b-xs btn-success btn-addon" onclick='window.open("https://www.jianguoyun.com/p/DU05q94QhsXvBxjTk5MC","_blank")'><i class="glyphicon glyphicon-download-alt"></i>timeline.css</button> 然后你可以在任何文章或页面内调用以下代码（自行修改css引用地址） ```html !!! <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> !!! ``` 显示效果 !!! <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> !!! <div class="tip inlineBlock warning">typecho要想直接显示html效果，需要用`!!!`把html代码包裹住</div> ## 右侧导航栏添加加载耗时与访客总数、文章总字数 参考资料：https://slske.com/9.html https://www.baoshuo.ren/archives/479.html 因为handsome6.0.0版本开启了`functions.php`加密，所以我们需要通过其他手段修改。 首先打开`/var/Widget/Archive.php`，添加以下代码 ```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`，填入以下代码： ```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行之后的位置，添加以下代码： ```php <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` 搜索`分类`，在相关代码下添加 ```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> ``` 在后面添加代码 ```php <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 ## 文章排序修改 教程来自：http://jdeal.cn/archives/wzpx.html typecho默认排序为按发布时间排，如果想修改为按修改时间排，那么可以这样： 打开网站根目录下`/var/Widget/Archive.php`文件，大概在1400-1406处，找到 ```php /** 仅输出文章 */ $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`即可 <hr class="content-copyright" style="margin-top:50px" /><blockquote class="content-copyright" style="font-style:normal"><p class="content-copyright">版权属于：雁陎</p><p class="content-copyright">本文链接：<a class="content-copyright" href="https://www.sitstars.com/archives/65/">https://www.sitstars.com/archives/65/</a></p><p class="content-copyright">转载时须注明出处及本声明</p></blockquote> Last modification：July 14th, 2020 at 06:33 pm © 允许规范转载
老师，这个一言接口，一直卡在正在加载古诗词，然后要刷新一次才可以显示古诗，这个问题怎么解决的哦。
右侧导航栏添加加载耗时与访客总数，在/var/Widget/Archive.php内添加代码的具体位置是？我添加在文件最后报错：Using $this when not in object context
你ctrl F查找一下$functionsFile，填在该代码段下即可
已解决感谢
那个右边侧栏加入每日pixiv热榜图片 我这里弄了不行 请问咋回事 图片https://ae01.alicdn.com/kf/U4fbf3c3780a44ac3b900a530f8974cce5.png
更新了，把新代码写进去就行
代码写错了。