typecho的功能补全之路

typecho是个轻量高效、简洁友好的PHP博客程序,虽然本站几经折腾并最终转移到静态博客,但是还是想把自己以前使用typecho时的一些常用插件和功能的简单增强教程分享给新接触typecho的用户,希望能对您有所帮助!

本文有部分转载或者参考文章,会在本文的后面注明积分的文章链接,如有任何问题,欢迎联系我😘

自用插件分享

由于typecho是PHP写的动态博客程序,所以通过第三方插件支持可以满足很多功能的增强,这部分是自己当时使用的一些插件:

本站不提供下载链接,但会罗列插件的名称、简介和项目地址,本站不对插件的安全性做任何保障🥟

插件名称 描述 下载地址
AMP-MIP AMP/MIP 插件 for Typecho https://github.com/holmesian/Typecho-AMP
Access 获取访客信息,生成统计图表,由@一名宅 部分优化重构 https://github.com/kokororin/typecho-plugin-Access
BlockIP 阻止一些IP访问博客系统 https://github.com/Vndroid/BlockIP
Comment2Mail Typecho 评论 SMTP、Mailgun 邮件通知插件 https://github.com/ShadowySpirits/Comment2Mail
DynamicLines 有丰富自定义选项的动态聚合线条特效插件 https://github.com/1379/DynamicLines-typecho-plugin
HoerMouse 炫彩鼠标 https://gitee.com/HoeXhe/HoerMouse
Login Designer Login Designer博客登录/注册页面美化插件,提供多种美化样式 https://github.com/jrotty/LoginDesigner
Pio 一个简易的 Live2D 插件,在 @Jad 的项目上增加交互功能 https://github.com/Dreamer-Paul/Pio
ShortLinks 把外部链接转换为指定内部链接 https://github.com/benzBrake/ShortLinks
SiteRunningTime 在底部显示系统的运行时长 https://github.com/zhusaidong/SiteRunningTime
TePostViews Typecho文章浏览数统计插件TePostViews熊猫小A修改版 https://github.com/AlanDecode/TePostViews
Sitemap 生成适用于百度的站点地图, https://github.com/bayunjiang/typecho-sitemap
SmartSpam 非常强大的一款Typecho智能评论过滤插件,让机器人彻底远离你! http://www.yovisun.com/archive/typecho-plugin-smartspam.html
Snow 简单的,有丰富自定义项的页面下雪插件 https://github.com/journey-ad/Snow-Typecho-Plugin/
Titleshow 让文章加密功能只加密文章内容!而不影响标题,标签还有评论数! https://github.com/jrotty/Titleshow
tagshelper 后台编辑文章时增加标签选择列表 https://qqdie.com/archives/tyepcho-tag-select-plugin.html
zbgray 在特殊的日子,全站变灰,悼念祭奠 百度/谷歌/必应一下
Meting 用于typecho 1.0的在线音乐播放器插件,支持五大平台 https://github.com/MoePlayer/APlayer-Typecho
WeChatShare 此插件可方便地自定义微信和QQ共享链接中的标题,描述,小图标和URL https://github.com/fuzqing/WeChatShare
Sticky Typecho文章置顶插件 https://github.com/typecho-fans/plugins/tree/master/Sticky
TopTop 一个返回顶部插件 https://github.com/ghosx/TopTop
Typecho爱好者插件集群 Typecho爱好者插件集群(社区维护版目录) https://github.com/typecho-fans/plugins
Gravatar Server 提供替换Gravatar服务器,支持QQ头像加密地址。 原作者 LT21 GravatarServer https://github.com/kraity/GravatarServer
RobotsPlus 蜘蛛来访日志插件,记录蜘蛛爬行的时间及其网址 http://www.yovisun.com/archive/typecho-plugin-robotsplus.html
DoubanBoard 在博客上展示你的豆瓣书单与豆瓣影单 https://github.com/AlanDecode/Typecho-Plugin-DoubanBoard
Copyright Copyright for Typecho https://github.com/Yves-X/Copyright-for-Typecho
YoduPlayer 一款支持Instantclick或pjax的背景音乐播放器插件 https://github.com/jrotty/YoduPlayer

标签离开效果

引入js

在使用的主题模板的footer.php添加JavaScript

1
2
3
<script>
document.addEventListener('visibilitychange',function(){if(document.visibilityState=='hidden'){normal_title=document.title;document.title='你别走ψ(`∇´)ψ';}else{document.title=normal_title;}});
</script>

效果

效果演示

文章阅读时间统计

添加代码

修改主题模板的functions.php,添加以下代码:

1
2
3
4
5
6
7
8
//文章阅读时间统计
function art_time ($cid){
$db=Typecho_Db::get ();
$rs=$db->fetchRow ($db->select ('table.contents.text')->from ('table.contents')->where ('table.contents.cid=?',$cid)->order ('table.contents.cid',Typecho_Db::SORT_ASC)->limit (1));
$text = preg_replace("/[^\x{4e00}-\x{9fa5}]/u", "", $rs['text']);
$text_word = mb_strlen($text,'utf-8');
echo ceil($text_word / 400);
}

定位锚点

浏览器F12定位想要在typecho文章显示的地方,在模板的post.php添加代码:

1
阅读时长 ≈ <?php echo art_time($this->cid); ?>分钟

效果演示

实例效果

代码复制按钮

把下面代码添加到主题模板的header.php,可行的位置是meta元素之后,</head>标签结束之前:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
<script>
// 在代码块右上角添加复制按钮
document.addEventListener('DOMContentLoaded', initCodeCopyButton);
function initCodeCopyButton() {
function initCSS(callback) {
const css = `
.btn-code-copy {
position: absolute;
line-height: .6em;
top: .2em;
right: .2em;
color: rgb(87, 87, 87);
}
.btn-code-copy:hover {
color: rgb(145, 145, 145);
cursor: pointer;
}
`;
const styleId = btoa('btn-code-copy').replace(/[=+\/]/g, '');
const head = document.getElementsByTagName('head')[0];
if (!head.querySelector('#' + styleId)) {
const style = document.createElement('style');
style.id = styleId;
if (style.styleSheet) {
style.styleSheet.cssText = css;
} else {
style.appendChild(document.createTextNode(css));
}
head.appendChild(style);
}
callback();
};
function copyTextContent(source) {
let result = false;
const target = document.createElement('pre');
target.style.opacity = '0';
target.textContent = source.textContent;
document.body.appendChild(target);
try {
const range = document.createRange();
range.selectNode(target);
window.getSelection().removeAllRanges();
window.getSelection().addRange(range);
document.execCommand('copy');
window.getSelection().removeAllRanges();
result = true;
} catch (e) { console.log('copy failed.'); }
document.body.removeChild(target);
return result;
};
function initButton(pre) {
const code = pre.querySelector('code');
if (code) {
const preParent = pre.parentElement;
const newPreParent = document.createElement('div');
newPreParent.style = 'position: relative';
preParent.insertBefore(newPreParent, pre);
const copyBtn = document.createElement('div');
copyBtn.innerHTML = 'copy';
copyBtn.className = 'btn-code-copy';
copyBtn.addEventListener('click', () => {
copyBtn.innerHTML = copyTextContent(code) ? 'success' : 'failure';
setTimeout(() => copyBtn.innerHTML = 'copy', 250);
});
newPreParent.appendChild(copyBtn);
newPreParent.appendChild(pre);
}
};
const pres = document.querySelectorAll('pre');
if (pres.length !== 0) {
initCSS(() => pres.forEach(pre => initButton(pre)));
}
};
</script>

如果站点开启了pjax,请添加回调函数initCodeCopyButton();

七彩打字动画

在主题模板的footer.php</body>标签结束前,加入以下代码:

1
2
3
4
<script>
(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);
</script>

在站点输入框进行输入的时候的七彩打字动画来自于开源的PowerMode

效果演示

七彩打字动画

积分

本文部分积分、来源和参考,感谢大佬们在我小白时期的帮助