前言
你是否曾在深夜翻遍搜索引擎，只为拼凑出一个理想中的博客界面？是否在尝试美化「Handsome」主题时，被零散的教程、失效的代码和版本兼容问题反复劝退？
作为一款备受开发者青睐的博客主题，「Handsome」的灵活性既是魅力也是门槛。网络上关于它的美化教程如繁星散落：GitHub的代码片段沉睡在仓库角落，技术论坛的精华帖沉没在历史回复中，个人博主的创意分享甚至随着域名过期而消失。这些碎片化的知识，让追求个性化的用户不得不耗费大量时间“寻宝”——而当你终于集齐碎片时，可能发现拼图早已过时。
这便是本文诞生的初衷：我们试图做一场「系统化的收纳」。
—— 不是简单的资源搬运，而是以「持续生长」的姿态，将散落的技巧梳理为可复用的模块，将晦涩的代码封装成即插即用的解决方案，同时建立版本迭代的追踪机制。无论你是刚接触「Handsome」的新手，还是想突破现有界面瓶颈的进阶用户，都能在这里找到可执行的路径。
说明
自定义CSS：该修改项位于Handsome主题后台-外观-设置外观-开发者设置-自定义CSS
自定义JS：该修改项位于Handsome主题后台-外观-设置外观-开发者设置-自定义 JavaScript
主题标题居中
打开后台-更改外观-设置外观-开发者设置-复制代码粘贴至自定义CSS即可
效果见本站文章
/*主题标题居中*/
header.bg-light.lter.wrapper-md {
text-align: center;
}handsome 原生入站提示
打开后台-更改外观-设置外观-开发者设置-复制代码粘贴至自定义输出body尾部代码即可
<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即可
<!--评论 打卡、赞、踩 功能-->
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文件,找到并删除如下内容：
修改成如下代码：
<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>右键菜单美化
需要引入JS文件https://blog.chario.cn/upload/layer.js,以下代码已经添加，无需再次引入。
<!--右键美化-->
<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(30,144,255,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://blog.chario.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.chario.cn/links.html"><i class="fontello fontello-emo-tongue"></i><span>和我当邻居</span></a></li>
<li><a href="https://blog.chario.cn/msg.html"><i class="fontello fontello-edit"></i><span>给我留言吧</span></a></li>
</ul>
</div>
<script src="https://blog.chario.cn/upload/layer.js"></script>
<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>复制版权提示
打开后台-更改外观-设置外观-开发者设置-复制代码粘贴至自定义JavaScript即可
/* 复制成功提示代码开始 */
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"
});
}
}
/* 复制成功提示代码结束 */文本间距异常的解决方案：
出现这种文本间距异常的情况，使用以下代码即可
/* 复制成功提示代码开始 */
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><div style='text-align: left !important; word-break: break-all !important; letter-spacing: normal !important;'>原文链接：" + sitesurl + "</div>",
title: "复制成功",
type: "warning",
autoHide: false,
time: "3000"
});
}
}
/* 复制成功提示代码结束 */