前言

handsome 主题是一款精心设计的 typecho 主题,它在保持功能丰富的同时又不失简洁优雅,我现在已经升级到了10.1.0版本。本文将介绍一些实用的美化技巧,帮助你打造一个独具特色的博客。

右侧导航栏

打开后台-更改外观-设置外观-开发者设置-复制代码粘贴至自定义CSS即可

1
2
3
4
5
6
7
8
9
10
/*右侧导航栏*/
.sidebar-icon svg.feather.feather-thumbs-up {
color: #ff0000;
}
.sidebar-icon svg.feather.feather-message-square {
color: #495dc3;
}
.sidebar-icon svg.feather.feather-gift {
color: #52de97;
}

主题标题居中

打开后台-更改外观-设置外观-开发者设置-复制代码粘贴至自定义CSS即可

1
2
3
4
/*主题标题居中*/
header.bg-light.lter.wrapper-md {
text-align: center;
}

页面两侧框架留白间距

打开后台-更改外观-设置外观-开发者设置-复制代码粘贴至自定义CSS即可

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
/*两侧框架留白间距*/
@media (min-width: 1700px) {
.app.container {
width: 95%;
}

.app.container .app-aside,
.app.container .app-header {
max-width: 95%;
}
}

@media (min-width: 2048px) {
.app.container {
width: 93%;
}

.app.container .app-aside,
.app.container .app-header {
max-width: 93%;
}
}

@media (min-width: 1200px) {
.app.container {
width: 90%;
}

.app.container .app-aside,
.app.container .app-header {
max-width: 90%;
}

.app.container .app-footer-fixed {
max-width: 970px;
}

.app.container.app-aside-folded .app-footer-fixed {
max-width: 1110px;
}

.app.container.app-aside-dock .app-footer-fixed {
max-width: 90%;
}
}

handsome 原生入站提示

打开后台-更改外观-设置外观-开发者设置-复制代码粘贴至自定义输出body尾部代码即可

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<script>
function kaygb_referrer(){
var kaygb_referrer = document.referrer;
if (kaygb_referrer != ""){
return "感谢您的访问! 您来自:<br>" + document.referrer;
}else{
return "";
}}
$.message({
message: "为了网站的正常运行,请不要使用广告屏蔽插件,谢谢!<br >" + kaygb_referrer(),
title: "网站加载完成",
type: "success",
autoHide: !1,
time: "3000"
})
</script>

评论一键赞、踩、打卡

打开后台-更改外观-设置外观-开发者设置-复制代码粘贴至自定义JavaScript即可

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
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
<!--评论 打卡、赞、踩 功能-->
window.SIMPALED = {}; // 创建全局对象 SIMPALED,用于存放编辑器功能

// 定义一个函数 a,用于在文本框中插入文字
function a(a, b, c) {
if (document.selection) {
a.focus();
sel = document.selection.createRange();
c ? (sel.text = b + sel.text + c) : (sel.text = b);
a.focus();
} else if (a.selectionStart || "0" == a.selectionStart) {
var l = a.selectionStart;
var m = a.selectionEnd;
var n = m;
c
? (a.value =
a.value.substring(0, l) + b + a.value.substring(l, m) + c + a.value.substring(m, a.value.length))
: (a.value = a.value.substring(0, l) + b + a.value.substring(m, a.value.length));
c ? (n += b.length + c.length) : (n += b.length - m + l);
l == m && c && (n -= c.length);
a.focus();
a.selectionStart = n;
a.selectionEnd = n;
} else {
a.value += b + c;
a.focus();
}
}

window.SIMPALED.Editor = {
daka: function() {
var b = new Date().toLocaleTimeString();
var c = document.getElementById("comment") || 0;
a(c, "滴!学生卡!打卡时间:" + b, ",请上车的乘客系好安全带~");

// 将光标移到文本最后
if (c.setSelectionRange) {
var len = c.value.length;
c.setSelectionRange(len, len);
c.focus();
} else if (c.createTextRange) {
var range = c.createTextRange();
range.collapse(false);
range.select();
c.focus();
}
},

zan: function() {
var c = document.getElementById("comment") || 0;
var yuluResponses = [
" 这篇文章展现了作者深邃的思想和独特的观点,令人赞叹不已。 ",
" 文章中的优美语言和精彩描写让人感受到一种心灵的震撼和触动,实在值得赞美。 ",
" 作者以敏锐的洞察力和真挚的情感,将文字融为一体,这种写作技巧令人赞赏。 ",
" 这篇文章展现了作者的才华和学识,无不让人对其赞美有加。 ",
" 文章中的感人故事和深刻的寓意令人深深地感动和赞叹。 ",
" 作者的文字流畅而富有节奏感,令人为之倾倒,实在是一篇令人赞美的佳作。 ",
" 文章中的深邃思考和清晰逻辑令人对作者的才华赞赏不已。 ",
" 这篇文章的独到见解和新颖观点,让人对作者的创意赞美有加。 ",
" 作者运用生动的比喻和细腻的描写,让读者仿佛身临其境,实在是一种令人赞美的写作艺术。 ",
" 这篇文章的深情笔触和真挚感受让人深深感叹,实在是一篇值得赞美的美文。 ",
];

var randomIndex = Math.floor(Math.random() * yuluResponses.length);
var randomResponse = yuluResponses[randomIndex];
a(c, randomResponse);
},

cai: function() {
var c = document.getElementById("comment") || 0;
var yuluResponses = [
" 我是来替大家批评博主的,我是来批评的,这篇文章的结构有点混乱,需要更好地组织和展开内容。博主多多像我学习啊! ",
" 我是来替大家批评博主的,作者的表达能力有待提高,有些地方表述不够清晰,读者可能会感到困惑。博主多多像我学习啊! ",
" 我是来替大家批评博主的,文章的语法错误较多,建议仔细检查并进行修改。博主多多像我学习啊! ",
" 我是来替大家批评博主的,内容有些空洞,需要更多具体的例子或细节来支撑观点。博主多多像我学习啊! ",
" 我是来替大家批评博主的,文章缺乏逻辑,有些段落之间的衔接不够自然。博主多多像我学习啊! ",
" 我是来替大家批评博主的,作者的观点没有充分论证,需要更多的证据和理由来支持主张。博主多多像我学习啊! ",
" 我是来替大家批评博主的,文章中出现了一些拼写错误和用词不当的情况,建议进行仔细校对。博主多多像我学习啊! ",
" 我是来替大家批评博主的,语言表达过于简单,可以尝试使用更丰富的词汇和句式来提升文章质量。博主多多像我学习啊! ",
" 我是来替大家批评博主的,这篇文章的主题不够突出,需要更好地明确中心思想。博主多多像我学习啊! ",
" 我是来替大家批评博主的,文章缺乏吸引人的开头,建议引入更有趣的故事或引语来吸引读者注意。博主多多像我学习啊! ",
];

var randomIndex = Math.floor(Math.random() * yuluResponses.length);
var randomResponse = yuluResponses[randomIndex];
a(c, randomResponse);
},

yulu: function() {
var c = document.getElementById("comment") || 0;
var yuluResponses = [
" 有你在的日子才是我的日常。 ",
" 夹在我女友与前女友与青梅竹马间的果然是修罗场! ",
" 既然如此,就再努力一次吧。别在这里愁眉不展,也不要再自欺欺人,重新来过! ",
" 比自己,比梦想更重要的东西永远都存在着... ",
" 嘛,那又怎么样呢? ",
" 自身不先改变的话,一切都不会改变。 ",
" 比起有一百个朋友,不如有个比一百人还要重要的真心朋友。 ",
" 我有在反省,但我不后悔。 ",
" 要超越过去与悲伤,用坚强和笑容去开拓明天。 ",
" 男人许下的诺言就一定要遵守。 ",
" 没有回忆就去创造回忆,没有道路就去开辟道路。 ",
" 我敬你是条汉子! ",
" 不相信自己的人,连努力的价值都没有。 ",
" 微风摇曳着窗帘,夕阳斜射入教室,在那里鼓起勇气告白的少年。即使现在也能清晰地回想起她的声音「当朋友,不行吗?」 ",
" 就算是沉落地面的太阳,只要夜晚过了一定会再度升起,不管有什么痛苦或难过的事,跟今天截然不同的明天也一定会到来。 ",
" 我的腿让我停下,可是心却不允许我那么做。 ",
" 生活就像超级女生,走到最后的都是纯爷们。 ",
" 我要拼,装上假牙也要拼! ",
" 想要成为无论多么悲伤的时候,也能够漂亮微笑的人吧。 ",
" 人们只是用好人来称呼对自己有用的人而以,不存在对所有人都有用的人。 ",
" 烈焰中舞动的火花,将赐予邪恶异性交往以天罚。 ",
" 无论乌云有多浓厚,星星也一定还在,只是暂时看不到了而已。 ",
" 不相信人咬不到肚脐的,咬破肚脐去死如何? ",
" 人一生会遇到约万人,两个人相爱的概率是.。所以你不爱我,我不怪你。 ",
" 不管看到什么样的过去,都请不要迷失自己,不管你变成什么样子,我都是你的同伴。 ",
" 心,可是很重的。 ",
" 我爱上的人,称我为怪叔叔 ",
" 慕君之心,至死方休。 ",
" 虚伪的眼泪,会伤害别人,虚伪的笑容,会伤害自己。 ",
" 若隐若现才是艺术! ",
" 生我何用?不能欢笑。灭我何用?不减狂骄。 ",
" 就是因为你不好,才要留在你身边,给你幸福。 ",
" 呐,我们好像是,被宇宙和地球拆散的恋人似的。 ",
" 你会梦游,我会磨牙,我们晚上一起去吓人吧! ",
" 或许只需一滴露水,便能守护这绽放的花朵。 ",
" 自己永远是孤单的,但你可以让其他人变得不孤单。 ",
" 和哥哥的便当比起来夜空的薯片就像大便一样!只会给我大便的大便夜空是笨蛋~笨蛋~ ",
" 我手中的魔法,是守护挚爱的力量,是坚定这个信念所必须的力量,我一定会拯救你的,无论在何时、何地。 ",
" 要改变别人的心真是件很难办的事,不过改变自己要容易一点。 ",
" 风筝的线你随时可以放开,只是别盼望我会回来。 ",
" 与你的生命等价的东西,这个世界上根本没有。 ",
" 君子可寓意于物,但不可留意于物。 ",
" 最好的感觉,是有人懂你的欲言又止。 ",
" 看似美好的东西,往往藏着陷阱。 ",
" 爱,其实很简单,困难的是去接受它。 ",
" 喜欢大胸只是本能,喜欢贫乳才是审美。 ",
" 二次元什么的我本来是不感冒的,直到我的膝盖中了一箭。 ",
" 你才是⑨!你全家都是⑨! ",
" 努力是不会背叛自己的,虽然梦想有时会背叛自己。 ",
" 面对就好,去经历就好。 ",
" 我从小就害怕虫子 ",
" 做不到的话,不过就是一死 。但是,赢了就能活下去,要是不战斗就赢不了。 ",
" 既然认准这条路,何必去打听要走多久。 ",
" 研表究明,汉字的序顺并不定一能影阅响读,比如当你看完这句话后,才发这现里的字全是都乱的。 ",
" 少年心意,一如明月松间的青石流水,那些年里看到了,却不懂。 ",
" 明明只是活着,哀伤却无处不在⋯⋯ ",
" 少罗嗦,你还不如虫子呢! ",
" 天空是连着的,如果我们也能各自发光的话,无论距离有多远,都能看到彼此努力的身影。 ",
" 别人恋爱不成功,你连暗恋都不成功! ",
];

var randomIndex = Math.floor(Math.random() * yuluResponses.length);
var randomResponse = yuluResponses[randomIndex];
a(c, randomResponse);
},
};

打开Handsome主题目录下的 component/comments.php 文件,找到并删除如下内容:

修改成如下代码:

1
2
3
4
5
6
<textarea id="comment" class="textarea form-control OwO-textarea" name="text" rows="5" placeholder="<?php _me("说点什么吧……") ?>" οnkeydοwn="if(event.ctrlKey&&event.keyCode==13){document.getElementById('submit').click();return false};"><?php $this->remember('text'); ?></textarea>
<div class="OwO" style="display: inline;"></div>
<div class="OwO" title="打卡" style="display: inline;" onclick="javascript:SIMPALED.Editor.daka();"><div class="OwO-logo"><span class="smile-icons"><i class="iconfont icon-daohanglan-01"></i></span><span class="OwOlogotext">打卡</span></div></div>
<div class="OwO" title="语录" style="display: inline;" onclick="javascript:SIMPALED.Editor.yulu();"><div class="OwO-logo"><i class="fontello-pencil"></i><span class="OwOlogotext">语录</span></div></div>
<div class="OwO" title="" style="display: inline;" onclick="javascript:SIMPALED.Editor.zan();"><div class="OwO-logo"><i class="glyphicon glyphicon-thumbs-up"></i><span class="OwOlogotext"></span></div></div>
<div class="OwO" title="" style="display: inline;" onclick="javascript:SIMPALED.Editor.cai();"><div class="OwO-logo"><i class="glyphicon glyphicon-thumbs-down"></i><span class="OwOlogotext"></span></div></div>

时光机头像圆形

打开后台-更改外观-设置外观-开发者设置-复制代码粘贴至自定义CSS即可

1
2
3
/* 时光机圆形头像 */
.img-square {border-radius: 50%;}
.list-group-item .thumb-sm .img-square {border-radius: 5px;}

logo 扫光

打开后台-更改外观-设置外观-开发者设置-复制代码粘贴至自定义CSS即可

1
2
3
/* logo 扫光开始 */
.navbar-brand{position:relative;overflow:hidden;margin: 0px 0 0 0px;}.navbar-brand:before{content:""; position: absolute; left: -665px; top: -460px; width: 200px; height: 15px; background-color: rgba(255,255,255,.5); -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -ms-transform: rotate(-45deg); -o-transform: rotate(-45deg); transform: rotate(-45deg); -webkit-animation: searchLights 6s ease-in 0s infinite; -o-animation: searchLights 6s ease-in 0s infinite; animation: searchLights 6s ease-in 0s infinite;}@-moz-keyframes searchLights{50%{left: -100px; top: 0;} 65%{left: 120px; top: 100px;}}@keyframes searchLights{40%{left: -100px; top: 0;} 60%{left: 120px; top: 100px;} 80%{left: -100px; top: 0px;}}
/*logo 扫光结束*/

赞赏按钮跳动

打开后台-更改外观-设置外观-开发者设置-复制代码粘贴至自定义CSS即可

1
2
3
4
5
6
7
8
9
10
11
12
13
/*赞赏按钮跳动开始*/
.btn-pay {
animation: star 0.5s ease-in-out infinite alternate;
}
@keyframes star {
from {
transform: scale(1);
}
to {
transform: scale(1.1);
}
}
/*赞赏按钮跳动结束*/

鼠标点击特效

打开后台-更改外观-设置外观-开发者设置-复制代码粘贴至自定义JavaScript即可

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
/* 鼠标点击特效 */
var a_idx = 0;
jQuery(document).ready(function ($) {
$("body").click(function (e) {
var a = [
"富强", "民主", "文明", "和谐", "自由", "平等", "公正", "法治",
"爱国", "敬业", "诚信", "友善"
];
var $i = $("<span/>").text(a[a_idx]);
a_idx = (a_idx + 1) % a.length;
var x = e.pageX,
y = e.pageY;
$i.css({
"z-index": 9999,
"top": y - 20,
"left": x,
"position": "absolute",
"font-weight": "bold",
"color": "#FA7298"
});
$("body").append($i);
$i.animate({
"top": y - 180,
"opacity": 0
}, 1500, function () {
$i.remove();
});
});
});

复制版权提示

打开后台-更改外观-设置外观-开发者设置-复制代码粘贴至自定义JavaScript即可

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
/* 复制成功提示代码开始 */
kaygb_copy();
function kaygb_copy() {
$(document).ready(function () {
$("body").bind('copy', function (e) {
hellolayer();
});
});
var sitesurl = window.location.href;
function hellolayer() {
$.message({
message: "尊重原创,转载请注明出处!<br> 本文作者:XXX<br>原文链接:" + sitesurl,
title: "复制成功",
type: "warning",
autoHide: false,
time: "3000"
});
}
}
/* 复制成功提示代码结束 */

彩色标签云及右栏数字

打开后台-更改外观-设置外观-开发者设置-复制代码粘贴至自定义JavaScript即可

1
2
3
4
5
6
7
8
9
10
11
12
13
/*彩色标签云代码开始*/
let tags = document.querySelectorAll("#tag_cloud-2 a");
let infos = document.querySelectorAll(".badge");
let colorArr = ["#428BCA", "#AEDCAE", "#ECA9A7", "#DA99FF", "#FFB380", "#D9B999"];
tags.forEach(tag => {
tagsColor = colorArr[Math.floor(Math.random() * colorArr.length)];
tag.style.backgroundColor = tagsColor;
});
infos.forEach(info => {
infosColor = colorArr[Math.floor(Math.random() * colorArr.length)];
info.style.backgroundColor = infosColor;
});
/*彩色标签云代码结束*/

自定义右键

打开后台-更改外观-设置外观-开发者设置-复制代码粘贴至自定义输出body尾部的HTML即可

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
75
76
77
78
<!-- 自定义右键 -->
<style type="text/css">
a {text-decoration: none;}
div.usercm{background-repeat:no-repeat;background-position:center center;background-size:cover;background-color:#fff;font-size:13px!important;width:130px;-moz-box-shadow:1px 1px 3px rgba(0,0,0,.3);box-shadow:0px 0px 15px #333;position:absolute;display:none;z-index:10000;opacity:0.9; border-radius: 8px;}
div.usercm ul{list-style-type:none;list-style-position:outside;margin:0px;padding:0px;display:block}
div.usercm ul li{margin:0px;padding:0px;line-height:35px;}
div.usercm ul li a{color:#666;padding:0 15px;display:block}
div.usercm ul li a:hover{color:#fff;background:rgba(88,130,238,0.88)}
div.usercm ul li a i{margin-right:10px}
a.disabled{color:#c8c8c8!important;cursor:not-allowed}
a.disabled:hover{background-color:rgba(255,11,11,0)!important}
div.usercm{background:#fff !important;}
</style>
<div class="usercm" style="left: 199px; top: 5px; display: none;">
<ul>
<li><a href="https://www.***.cn"><i class="fontello fontello-home"></i><span>首页</span></a></li>
<li><a href="javascript:void(0);" onclick="getSelect();"><i class="fontello fontello-pencil"></i><span>复制</span></a></li>
<li><a href="javascript:void(0);" onclick="baiduSearch();"><i class="fontello fontello-search"></i><span>搜索</span></a></li>
<li><a href="javascript:history.go(1);"><i class="fontello fontello-chevron-right"></i><span>前进</span></a></li>
<li><a href="javascript:history.go(-1);"><i class="fontello fontello-chevron-left"></i><span>后退</span></a></li>
<li style="border-bottom:1px solid gray"><a href="javascript:window.location.reload();"><i class="fontello fontello-refresh"></i><span>重载网页</span></a></li>
<li><a href="https://blog.ybyq.wang/index.php/about.html"><i class="fontello fontello-emo-tongue"></i><span>关于作者</span></a></li>
</ul>
</div>
<script type="text/javascript">
(function(a) {
a.extend({
mouseMoveShow: function(b) {
var d = 0,
c = 0,
h = 0,
k = 0,
e = 0,
f = 0;
a(window).mousemove(function(g) {
d = a(window).width();
c = a(window).height();
h = g.clientX;
k = g.clientY;
e = g.pageX;
f = g.pageY;
h + a(b).width() >= d && (e = e - a(b).width() - 5);
k + a(b).height() >= c && (f = f - a(b).height() - 5);
a("html").on({
contextmenu: function(c) {
3 == c.which && a(b).css({
left: e,
top: f
}).show()
},
click: function() {
a(b).hide()
}
})
},
disabledContextMenu: function() {
window.oncontextmenu = function() {
return !1
}
}
})
})(jQuery);

function getSelect() {
"" == (window.getSelection ? window.getSelection() : document.selection.createRange().text) ? layer.msg("请选择需要复制的内容!") : document.execCommand("Copy")
}
function baiduSearch() {
var a = window.getSelection ? window.getSelection() : document.selection.createRange().text;
"" == a ? layer.msg("请选择需要搜索的内容!") : window.open("https://www.baidu.com/s?wd=" + a)
}
$(function() {
for (var a = navigator.userAgent, b = "Android;iPhone;SymbianOS;Windows Phone;iPad;iPod".split(";"), d = !0, c = 0; c < b.length; c++) if (0 < a.indexOf(b[c])) {
d = !1;
break
}
d && ($.mouseMoveShow(".usercm"), $.disabledContextMenu())
});
</script>

响应时间和访客总数

将以下代码放到/usr/themes/handsome/function.php的最下面

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
/*访问总量代码开始*/
function theAllViews(){
$db = Typecho_Db::get();
$row = $db->fetchAll('SELECT SUM(VIEWS) FROM `typecho_contents`');
echo number_format($row[0]['SUM(VIEWS)']);
}
/*访问总量代码结束*/
/*响应时间代码开始*/
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;
}
/*响应时间代码结束*/

然后将以下代码放到/usr/themes/handsome/component/sidebar.php内,找到博客信息添加即可

1
2
3
4
5
6
7
8
9
<!--访客总数代码开始-->
<li class="list-group-item text-second"> <span class="blog-info-icons"> <i data-feather="users"></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="refresh-ccw"></i></span>
<span class="badge pull-right"><?php echo timer_stop();?></span><?php _me("响应耗时") ?></li>
<!--响应耗时代码结束-->

全站字数统计

将以下代码放到/usr/themes/handsome/component/sidebar.php的开头

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<?php
//字数统计
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内,加到合适的位置

1
2
3
4
<!--全站字数开始-->
<li class="list-group-item text-second"><span class="blog-info-icons"><i data-feather="edit-2"></i></span>
<span class="badge pull-right"><?php echo allOfCharacters(); ?></span><?php _me("全站字数") ?></li>
<!--全站字数结束-->

版权提示

在主题文件post.php内,文章内容下方加上下面的代码

1
2
3
4
5
6
<div style="padding: 10px;background: rgba(220, 220, 220, 0.22);font-size: 13px;border-left: 3px solid;text-align: left;">
<span>本文作者:<a href="<?php $this->author->permalink(); ?>" rel="author"> <?php $this->author(); ?></a></span>
<span>文章标题:<a href="<?php $this->permalink() ?>"><?php $this->title() ?></a><br></span>
<span>本文地址:<a href="<?php $this->permalink() ?>"><?php $this->permalink() ?></a><br></span>
<span>版权说明:若无注明,本文皆<a href="<?php $this->options->rootUrl(); ?>" target="_blank" data-original-title="<?php $this->options->title() ?>"><?php $this->options->title() ?></a>原创,转载请保留文章出处。</span>
</div>

时间流逝

将以下代码加到/usr/themes/handsome/component/sidebar.php,在 119 行左右,放在<?php endif; ?>之后

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
<!-- 时间倒计时代码开始 -->
<section id="blog_info" class="widget widget_categories wrapper-md clear">
<h5 class="widget-title m-t-none text-md"><?php _me("时间流逝") ?></h5>
<div class="sidebar sidebar-count">
<div class="content">
<div class="item" id="dayProgress">
<div class="title">今日已经过去<span></span>小时</div>
<div class="progress">
<div class="progress-bar">
<div class="progress-inner progress-inner-1"></div>
</div>
<div class="progress-percentage"></div>
</div>
</div>
<div class="item" id="weekProgress">
<div class="title">这周已经过去<span></span>天</div>
<div class="progress">
<div class="progress-bar">
<div class="progress-inner progress-inner-2"></div>
</div>
<div class="progress-percentage"></div>
</div>
</div>
<div class="item" id="monthProgress">
<div class="title">本月已经过去<span></span>天</div>
<div class="progress">
<div class="progress-bar">
<div class="progress-inner progress-inner-3"></div>
</div>
<div class="progress-percentage"></div>
</div>
</div>
<div class="item" id="yearProgress">
<div class="title">今年已经过去<span></span>个月</div>
<div class="progress">
<div class="progress-bar">
<div class="progress-inner progress-inner-4"></div>
</div>
<div class="progress-percentage"></div>
</div>
</div>
</div>
</div>
</section>
<!-- 时间倒计时代码结束 -->

添加完成后,将以下代码放入后台-外观设置-开发者设置-自定义css

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
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
/* 时间流逝 */
.sidebar-count .content {
padding: 15px
}

.sidebar-count .content .item {
margin-bottom: 15px
}

.sidebar-count .content .item:last-child {
margin-bottom: 0
}

.sidebar-count .content .item .title {
font-size: 12px;
color: var(--minor);
margin-bottom: 5px;
display: flex;
align-items: center
}

.sidebar-count .content .item .title span {
color: var(--theme);
font-weight: 500;
font-size: 14px;
margin: 0 5px
}

.sidebar-count .content .item .progress {
display: flex;
align-items: center
}

.sidebar-count .content .item .progress .progress-bar {
height: 10px;
border-radius: 5px;
overflow: hidden;
background: var(--classC);
width: 0;
min-width: 0;
flex: 1;
margin-right: 5px
}
@keyframes progress {
0% {
background-position: 0 0
}

100% {
background-position: 30px 0
}

}
.sidebar-count .content .item .progress .progress-bar .progress-inner {
width: 0;
height: 100%;
border-radius: 5px;
transition: width 0.35s;
-webkit-animation: progress 750ms linear infinite;
animation: progress 750ms linear infinite
}

.sidebar-count .content .item .progress .progress-bar .progress-inner-1 {
background: #bde6ff;
background-image: linear-gradient(135deg, #50bfff 25%, transparent 25%, transparent 50%, #50bfff 50%, #50bfff 75%, transparent 75%, transparent 100%);
background-size: 30px 30px
}

.sidebar-count .content .item .progress .progress-bar .progress-inner-2 {
background: #ffd980;
background-image: linear-gradient(135deg, #f7ba2a 25%, transparent 25%, transparent 50%, #f7ba2a 50%, #f7ba2a 75%, transparent 75%, transparent 100%);
background-size: 30px 30px
}

.sidebar-count .content .item .progress .progress-bar .progress-inner-3 {
background: #ffa9a9;
background-image: linear-gradient(135deg, #ff4949 25%, transparent 25%, transparent 50%, #ff4949 50%, #ff4949 75%, transparent 75%, transparent 100%);
background-size: 30px 30px
}

.sidebar-count .content .item .progress .progress-bar .progress-inner-4 {
background: #67c23a;
background-image: linear-gradient(135deg, #4f9e28 25%, transparent 25%, transparent 50%, #4f9e28 50%, #4f9e28 75%, transparent 75%, transparent 100%);
background-size: 30px 30px
}

.sidebar-count .content .item .progress .progress-percentage {
color: var(--info)
}

添加完成后,在到/usr/themes/handsome/assets/js里面创建名为timeinfo.js后把下面代码复制进去保存

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
function init_life_time() {
function getAsideLifeTime() {
/* 当前时间戳 */
let nowDate = +new Date();
/* 今天开始时间戳 */
let todayStartDate = new Date(new Date().toLocaleDateString()).getTime();
/* 今天已经过去的时间 */
let todayPassHours = (nowDate - todayStartDate) / 1000 / 60 / 60;
/* 今天已经过去的时间比 */
let todayPassHoursPercent = (todayPassHours / 24) * 100;
$('#dayProgress .title span').html(parseInt(todayPassHours));
$('#dayProgress .progress .progress-inner').css('width', parseInt(todayPassHoursPercent) + '%');
$('#dayProgress .progress .progress-percentage').html(parseInt(todayPassHoursPercent) + '%');
/* 当前周几 */
let weeks = {
0: 7,
1: 1,
2: 2,
3: 3,
4: 4,
5: 5,
6: 6
};
let weekDay = weeks[new Date().getDay()];
let weekDayPassPercent = (weekDay / 7) * 100;
$('#weekProgress .title span').html(weekDay);
$('#weekProgress .progress .progress-inner').css('width', parseInt(weekDayPassPercent) + '%');
$('#weekProgress .progress .progress-percentage').html(parseInt(weekDayPassPercent) + '%');
let year = new Date().getFullYear();
let date = new Date().getDate();
let month = new Date().getMonth() + 1;
let monthAll = new Date(year, month, 0).getDate();
let monthPassPercent = (date / monthAll) * 100;
$('#monthProgress .title span').html(date);
$('#monthProgress .progress .progress-inner').css('width', parseInt(monthPassPercent) + '%');
$('#monthProgress .progress .progress-percentage').html(parseInt(monthPassPercent) + '%');
let yearPass = (month / 12) * 100;
$('#yearProgress .title span').html(month);
$('#yearProgress .progress .progress-inner').css('width', parseInt(yearPass) + '%');
$('#yearProgress .progress .progress-percentage').html(parseInt(yearPass) + '%');
}
getAsideLifeTime();
setInterval(() => {
getAsideLifeTime();
}, 1000);
}
init_life_time()

添加完成,将以下代码放入后台-外观设置-开发者设置-自定义输出body尾部

1
2
<!-- 时间流逝 -->
<script src="https://你的域名/usr/themes/handsome/assets/js/timeinfo.js"></script>

添加心知天气

这个在10.1.0版本好像不生效了

首先需要在知心天气官网注册并申请免费 API 密钥

将以下代码放入/usr/themes/handsome/component/headnav.php第 117 行左右,并替换你的公钥和密钥

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
<!-- 知心天气-->
<div
id="tp-weather-widget"
class="navbar-form navbar-form-sm navbar-left shift"
></div>
<script>
(function (T, h, i, n, k, P, a, g, e) {
g = function () {
P = h.createElement(i);
a = h.getElementsByTagName(i)[0];
P.src = k;
P.charset = "utf-8";
P.async = 1;
a.parentNode.insertBefore(P, a);
};
T["ThinkPageWeatherWidgetObject"] = n;
T[n] ||
(T[n] = function () {
(T[n].q = T[n].q || []).push(arguments);
});
T[n].l = +new Date();
if (T.attachEvent) {
T.attachEvent("onload", g);
} else {
T.addEventListener("load", g, false);
}
})(
window,
document,
"script",
"tpwidget",
"//widget.seniverse.com/widget/chameleon.js"
);
</script>
<script>
tpwidget("init", {
flavor: "slim",
location: "WX4FBXXFKE4F",
geolocation: "enabled",
language: "auto",
unit: "c",
theme: "chameleon",
container: "tp-weather-widget",
bubble: "enabled",
alarmType: "badge",
color: "#C6C6C6",
uid: "你的公钥",
hash: "你的密钥",
});
tpwidget("show");
</script>
<!-- 知心结束-->

总结

通过以上美化方案,你可以让你的 Handsome 主题博客更加个性化和美观。这些功能都是经过精心挑选的,既实用又不会影响博客的加载速度。你可以根据自己的需求选择性地使用这些功能。

如果你在使用过程中遇到任何问题,欢迎在评论区留言讨论。同时,也欢迎你分享自己的美化心得,让我们一起打造更好的博客!