请注意，本文编写于 448 天前，最后修改于 307 天前，其中某些信息可能已经过时。
本文主要记录了本博客的改造过程和过程中使用的插件，如果你和我一样喜欢折腾，并且觉得本博客或多或少有你喜欢的地方，不妨看看本文
本主题魔改需要替换文件，并且会修改原主题代码，请要魔改的小伙伴备份好自己的文件！
主题
Typecho
本博客基于typecho搭建，如果你只是一个萌新，连服务器都没有，可以看看下面这篇文章
handsome
本博客使用的主题是handsome
接下来的改造过程主要基于handsome，部分改造过程只要你使用的是typecho，理论上来说也能用。
改造
基于神代綺凜大佬的handsome改造
本博客主要视觉观感就是基于神代綺凜大佬的handsome改造文件，这里不再赘述了，具体请查看这篇文章
首页文章摘要添加翻转动画
随机播放音乐
在文件handsome/libs/Get.php的186行附近添加一行代码shuffle($info);即可
case 'collect':
$datas = $api->format(true)->playlist($id);
$datas = json_decode($datas,true);
foreach ( $datas as $keys => $data){
$cover = json_decode($api->format(true)->pic($data['pic_id']),true)['url'];
$info[$keys] = array(
'name' => $data['name'],
'url' => '',
'song_id' => $data['id'],
'cover' => $cover,
'author' => $data['artist'][0]
);
}
shuffle($info); //添加这行
break;Pixiv每日排行榜Top50
handsome食用起来很简单，打开handsome的外观设置，找到
开发者设置->全局右侧边栏广告位，填入以下代码就行了。<p>Pixiv每日排行榜Top50</p>
<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>美化代码块
如果你觉得刚才的代码块好看或好用，不妨试试下面的插件
随机图片服务
如果你看惯了千篇一律的博客背景图，想要点新鲜感，可以试试下面的插件。
按文档说明配置好后，每次刷新都是一张随机的图片
文章的随机头图可以使用handsome自带的功能，如果你不喜欢handsome自带的头图，可以打开
/handsome/usr/img/sj文件夹，使用自己的图片替换掉原图即可。记得严格按照数字命名。文章末尾版权信息
如果你想要本文末尾同款版权信息声明，可以试试下面这款插件。
魔改网站底部
将以下代码添加至后台主题设置自定义CSS：
/*底部页脚*/
.github-badge {
display: inline-block;
border-radius: 4px;
text-shadow: none;
font-size: 12px;
color: #fff;
line-height: 15px;
background-color: #abbac3;
margin-bottom: 5px
}
.github-badge .badge-subject {
display: inline-block;
background-color: #4d4d4d;
padding: 4px 4px 4px 6px;
border-top-left-radius: 4px;
border-bottom-left-radius: 4px
}
.github-badge .badge-value {
display: inline-block;
padding: 4px 6px 4px 4px;
border-top-right-radius: 4px;
border-bottom-right-radius: 4px
}
.github-badge .bg-blue {
background-color: #007ec6
}
.github-badge .bg-orange {
background-color: #ffa500
}
.github-badge .bg-red {
background-color: #f00
}
.github-badge .bg-green {
background-color: #3bca6e
}
.github-badge .bg-purple {
background-color: #ab34e9
}将以下代码添加至后台主题设置博客底部左侧信息，信息修改成自己的:
<div class="github-badge">
<a href="./" title="©2016-2019 ">
<span class="badge-subject">Copyright</span><span class="badge-value bg-blue">©2016-2019 </span>
</a>
</div>
|
<div class="github-badge">
<a href="./" title="Sanakey">
<span class="badge-subject">By</span><span class="badge-value bg-green">Sanakey</span>
</a>
</div>将以下代码添加至后台主题设置博客底部右侧信息:
<div class="github-badge">
<a href="http://www.typecho.org" target="_blank" title="由 Typecho 强力驱动" >
<span class="badge-subject">Powered</span><span class="badge-value bg-blue">Typecho</span>
</a>
</div>
|
<div class="github-badge">
<a href="https://www.ihewro.com/archives/489/" target="_blank" title="站点使用 handsome 主题，作者：友人C" >
<span class="badge-subject">Theme</span><span class="badge-value bg-orange">Handsome</span>
</a>
</div>
|
<div class="github-badge">
<a href="https://moe.best/" target="_blank" title="handsome主题由JindaiKirin魔改">
<span class="badge-subject">Modified</span><span class="badge-value bg-red">JindaiKirin</span>
</a>
</div>添加完成后，需要去handsome/component/footer.php删除原有底部代码，需要删除的代码如下：
<?php if (!defined('__TYPECHO_ROOT_DIR__')) exit; ?>
<?php Content::outputCommentJS($this, $this->security); ?>
</div><!-- /content -->
<footer id="footer" class="app-footer" role="footer">
<div class="wrapper b-t bg-light">
<span class="pull-right hidden-xs text-ellipsis">
<?php $this->options->BottomInfo(); ?>
<!-- Powered by <a target="blank" href="http://www.typecho.org">Typecho</a> | Theme by <a target="blank" href="https://www.ihewro.com/archives/489/">handsome</a> 删除本行-->
</span>
<span class="text-ellipsis">
<!-- © <?php echo date("Y");?> Copyright 删除本行-->
<?php $this->options->BottomleftInfo(); ?></span>
</div>炫彩鼠标插件
彩色标签云
打开后台-更改外观-设置外观-开发者设置-复制代码粘贴至自定义JavaScript即可：
<!--彩色标签云-->
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;
});如果主题中启用了pjax，还需要将上面代码添加到pjax-pjax回调函数中。
评论附带设备信息
新评论邮件通知
顺便在这里分享一个我在其他大佬基础上美化过的版本（见下图，头图是随机的），提供给有需求的人。下载后替换掉原版同名文件，并把里面的博客网址等个人信息改成自己的即可，记得备份。
贴吧滑稽表情包
- 复制owo.json到
handsome/usr/ - 复制paopao文件夹到
handsome/usr/img/emotion/ - 清除一下游览器缓存，然后刷新即可
响应耗时
将以下代码存放到主题的functions.php中，可以放在最后面：
/**
* * 加载时间
* * @return bool
* */
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;
}然后修改component/sidebar.php这个文件，搜索最后活动，在下面加上如下代码：
<li class="list-group-item"> <i class="glyphicon glyphicon-refresh text-muted"></i> <span class="badge
pull-right"><?php echo Utils::getLatestTime($this); ?></span><?php _me("最后活动") ?></li>
/*下面这行是要添加的代码*/
<li class="list-group-item"> <i class="glyphicon glyphicon-refresh text-muted"></i> <span class="badge
pull-right"><?php echo timer_stop();?></span><?php _me("响应耗时") ?></li>
</ul>文本框打字特效
复制下方代码添加至后台主题设置自定义 JavaScript即可
//文本框打字机特效
(function webpackUniversalModuleDefinition(a,b){if(typeof exports==="object"&&typeof module==="object"){module.exports=b()}else{if(typeof define==="function"&&define.amd){define([],b)}else{if(typeof exports==="object"){exports["POWERMODE"]=b()}else{a["POWERMODE"]=b()}}}})(this,function(){return(function(a){var b={};function c(e){if(b[e]){return b[e].exports}var d=b[e]={exports:{},id:e,loaded:false};a[e].call(d.exports,d,d.exports,c);d.loaded=true;return d.exports}c.m=a;c.c=b;c.p="";return c(0)})([function(c,g,b){var d=document.createElement("canvas");d.width=window.innerWidth;d.height=window.innerHeight;d.style.cssText="position:fixed;top:0;left:0;pointer-events:none;z-index:999999";window.addEventListener("resize",function(){d.width=window.innerWidth;d.height=window.innerHeight});document.body.appendChild(d);var a=d.getContext("2d");var n=[];var j=0;var k=120;var f=k;var p=false;o.shake=true;function l(r,q){return Math.random()*(q-r)+r}function m(r){if(o.colorful){var q=l(0,360);return"hsla("+l(q-10,q+10)+", 100%, "+l(50,80)+"%, "+1+")"}else{return window.getComputedStyle(r).color}}function e(){var t=document.activeElement;var v;if(t.tagName==="TEXTAREA"||(t.tagName==="INPUT"&&t.getAttribute("type")==="text")){var u=b(1)(t,t.selectionStart);v=t.getBoundingClientRect();return{x:u.left+v.left,y:u.top+v.top,color:m(t)}}var s=window.getSelection();if(s.rangeCount){var q=s.getRangeAt(0);var r=q.startContainer;if(r.nodeType===document.TEXT_NODE){r=r.parentNode}v=q.getBoundingClientRect();return{x:v.left,y:v.top,color:m(r)}}return{x:0,y:0,color:"transparent"}}function h(q,s,r){return{x:q,y:s,alpha:1,color:r,velocity:{x:-1+Math.random()*2,y:-3.5+Math.random()*2}}}function o(){var t=e();var s=5+Math.round(Math.random()*10);while(s--){n[j]=h(t.x,t.y,t.color);j=(j+1)%500}f=k;if(!p){requestAnimationFrame(i)}if(o.shake){var r=1+2*Math.random();var q=r*(Math.random()>0.5?-1:1);var u=r*(Math.random()>0.5?-1:1);document.body.style.marginLeft=q+"px";document.body.style.marginTop=u+"px";setTimeout(function(){document.body.style.marginLeft="";document.body.style.marginTop=""},75)}}o.colorful=false;function i(){if(f>0){requestAnimationFrame(i);f--;p=true}else{p=false}a.clearRect(0,0,d.width,d.height);for(var q=0;q<n.length;++q){var r=n[q];if(r.alpha<=0.1){continue}r.velocity.y+=0.075;r.x+=r.velocity.x;r.y+=r.velocity.y;r.alpha*=0.96;a.globalAlpha=r.alpha;a.fillStyle=r.color;a.fillRect(Math.round(r.x-1.5),Math.round(r.y-1.5),3,3)}}requestAnimationFrame(i);c.exports=o},function(b,a){(function(){var d=["direction","boxSizing","width","height","overflowX","overflowY","borderTopWidth","borderRightWidth","borderBottomWidth","borderLeftWidth","borderStyle","paddingTop","paddingRight","paddingBottom","paddingLeft","fontStyle","fontVariant","fontWeight","fontStretch","fontSize","fontSizeAdjust","lineHeight","fontFamily","textAlign","textTransform","textIndent","textDecoration","letterSpacing","wordSpacing","tabSize","MozTabSize"];var e=window.mozInnerScreenX!=null;function c(k,l,o){var h=o&&o.debug||false;if(h){var i=document.querySelector("#input-textarea-caret-position-mirror-div");if(i){i.parentNode.removeChild(i)}}var f=document.createElement("div");f.id="input-textarea-caret-position-mirror-div";document.body.appendChild(f);var g=f.style;var j=window.getComputedStyle?getComputedStyle(k):k.currentStyle;g.whiteSpace="pre-wrap";if(k.nodeName!=="INPUT"){g.wordWrap="break-word"}g.position="absolute";if(!h){g.visibility="hidden"}d.forEach(function(p){g[p]=j[p]});if(e){if(k.scrollHeight>parseInt(j.height)){g.overflowY="scroll"}}else{g.overflow="hidden"}f.textContent=k.value.substring(0,l);if(k.nodeName==="INPUT"){f.textContent=f.textContent.replace(/\s/g,"\u00a0")}var n=document.createElement("span");n.textContent=k.value.substring(l)||".";f.appendChild(n);var m={top:n.offsetTop+parseInt(j["borderTopWidth"]),left:n.offsetLeft+parseInt(j["borderLeftWidth"])};if(h){n.style.backgroundColor="#aaa"}else{document.body.removeChild(f)}return m}if(typeof b!="undefined"&&typeof b.exports!="undefined"){b.exports=c}else{window.getCaretCoordinates=c}}())}])});
POWERMODE.colorful=true;POWERMODE.shake=false;document.body.addEventListener("input",POWERMODE);博主介绍的闪字特效
- 复制下方代码添加至后台主题设置
博主的介绍即可 - 介绍文字请在代码中修改
<!--博主介绍的闪字特效-->
<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>文章底部赞赏图标跳动
将以下代码添加至后台主题设置自定义CSS
/*赞赏图标跳动*/
.btn-pay {
animation: star 0.5s ease-in-out infinite alternate;
}
@keyframes star {
from {
transform: scale(1);
}
to {
transform: scale(1.1);
}
}感言
个人博客换了很多，大学时学生价买服务器后用过WordPress，毕业后因为没有学生优惠就没续费了。后来发现了可以白嫖的Hexo + Github Pages，也折腾了许久。最近因为阿里云服务器优惠，又换成了Typecho + handsome(不得不说这款主题真是棒棒哒！~)。
现在终于差不多折腾完了。看着折腾好的博客，感觉好爽啊！~
参考
版权属于：Sanakey(特殊声明除外)
本文链接：https://keymoe.com/archives/10/
所有原创文章采用知识共享署名-非商业性使用 4.0 国际许可协议进行许可。 您可以自由的转载和修改，但请务必注明文章来源并且不可用于商业目的。
现在响应速度的那个li的class标签改了，应该改成“list-group-item text-second”，不然不会显示透明样式。
好文 爱你摸摸哒
p站每日50张貌似北墙了
大佬请问一下这篇文章的部分文字标为红色，这个是什么插件，还有就是一些图片，按钮的飞入效果
红色文字是markdown语法``，元素入场动画用的WowScroll插件，首页置顶文章就能看到。
大佬，右边点击回到博客顶部怎么做的呢？
我写了个插件的，本站首页就能看到。
大佬，左侧的头像旋转怎么做到的？(☆ω☆)
本文没涉及到的美化效果，一般都在置顶的魔改主题插件里。
谢谢大佬，我还想问下打赏背景图，怎么换的(/ω＼)
不用那个插件可以改么？(/ω＼)
可以，不过建议你最好学一下简单的css；实在不想学，可以按f12开启调试模式，把html元素对应的css扒下来。
博主你好，请问你的右键复制提示是怎么弄的呀
这个功能在置顶的魔改主题插件里，在js文件内可以看到，有注释。
我上面字都是白的咋搞，一个字也看不清
不知道你说的哪里的字，也许是被其他css覆盖了样式。
我觉得他是想问字体颜色怎么换
最新版的好像不行 我在functions底部添加然后网站打不开了
是的，最新版的functions混淆加密过，直接添加代码不行了。
那需要怎么弄
自己百度看看，有没有大佬解决了这个问题。或者等下个版本，看看作者会不会取消加密吧。
好吧
我也不清楚，这也是我现在还在用5.3老版本的原因。
给大佬点个赞(☆ω☆)
大佬,博客标题居中显示和阴影怎么实现啊
建议你自己查一下css的文档，text-align与text-shadow
我完全是小白,有代码吗?|´・ω・)ノ
搜一下我说的关键词，文档有代码示例。
请问评论右侧的33娘怎么搞啊？(☆ω☆)
这个很简单，后台主题外观设置的评论设置->原生评论框的背景图片，修改为你想要的图就行了。 :aru:smile::
不好意思，再打扰一次，请问博主左边栏头像放在名称上面是怎么设置的？默认是放在右边
谢谢博主
博主，请问评论发邮件是什么插件呀？