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/DbESS2AQhsXvBxjI-NkD","_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 另:如果你启用了PJAX,那么切换文章的时候不能正确显示百度收录情况,此时需要在后台添加一个回调函数: ``` if((typeof baidu_check) !== "undefined"){ baidu_check(); } ``` ## 文章排序修改 教程来自: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:January 16th, 2021 at 05:00 pm © 允许规范转载
老师,这个一言接口,一直卡在正在加载古诗词,然后要刷新一次才可以显示古诗,这个问题怎么解决的哦。
右侧导航栏添加加载耗时与访客总数,在/var/Widget/Archive.php内添加代码的具体位置是?我添加在文件最后报错:Using $this when not in object context
你ctrl F查找一下$functionsFile,填在该代码段下即可
已解决感谢
那个右边侧栏加入每日pixiv热榜图片 我这里弄了不行 请问咋回事 图片https://ae01.alicdn.com/kf/U4fbf3c3780a44ac3b900a530f8974cce5.png
更新了,把新代码写进去就行
代码写错了。