handsome主题美化及seo优化（二）基于V9.2.0
由于handsome主题作者于2023年8月6日更新主题到了V9.2.0版本，部分内容发生改变，并且在上次文章发布之后本站也更改了大量内容使文章内容缺少很多，因此编写了第二篇美化文章
本文涉及到修改代码部分请自行提前备份，以免不必要的经济损失。
本篇文章为第一篇文章的补充内容，如果没有看过第一篇文章的可以先行去看第一篇文章
传送门：
声明：
本文部分美化内容参考于Handsome美化
本文部分seo内容参考于SEO优化
感谢上述两位博主的整理，但第一个链接中的部分内容不可用，请读者自行辨别。
由于本文存在参考内容，禁止商用转载
新增美化部分
V9.2.0更新内容(内容引自作者文档)
9.1.0版本一直在本地调试未发布，因此本次直接跳过9.1.0版本。
新增
- 首页布局全新调整，头图尺寸严格遵循8:3比例，在这之前可能不能分辨率上有误差，而现在它变得更加整齐。同时在不同的分辨率中，多个文章会自动的根据宽度选择并列显示
- UI 样式布局进行了一些不大不小的调整，右侧边栏的多处和底部整体进行了更加统一的UI风格优化
- 手机端增加唤起大搜的按钮
- **底部菜单支持自定义了，你可以移除内置按钮或者是添加自定义链接！自定义底部菜单
优化
- 更新vditor 版本，优化外链图片自动上传功能，增加更多的错误提示
修复
- 修复文章预览白屏问题（困扰了我很久）
- 修复豆瓣清单的图片问题
- 修复时光机浏览器插件的使用问题（没用过0.0）
- 修复独立页面加密问题（这个也是）
插件引入
- Handsome handsomePro唯一配套插件 主题自带不用多说
- PrettyHandsome 主要用于Handsome主题的美化，在第一篇美化备忘录中大部分内容可以通过此插件来实现，避免修改代码一时爽，更新火葬场，里面有全站一键黑白模式
- Sitemap 网站地图生成器，利于必应、百度等爬虫发现网站内链
- Superbed 聚合图床外链插件，配合聚合图床会员可实现插入图片附件时自动上传到图床，且可以一键插入图片
插件请按需使用
左侧边栏底部菜单修改
版本更新之前不支持自定义修改，并且样式存在些许冲突，于是本站一直是关闭状态，更新后可以自定义修改按钮及图标啦
修改流程“外观-设置外观-高级设置-左侧边栏底部菜单配置”
在里面填入想要的内容即可
底部菜单开启的时候，默认会显示“管理入口”、“文章rss”、“评论rss”链接的入口，可以在配置中删除对应项来隐藏指定的默认菜单项：
{"name":"comment_rss"},
{"name":"post_rss"},
{"name":"admin"}除了内置项，你可以增加新的项：
{"name":"comment_rss"},
{"name":"post_rss"},
{"name":"admin"},
{"name": "我的Github","class":"github","link":"https://github.com/ihewro","class":"github"}本站修改后的内容为：
{"name":"post_rss"},
{"name": "bilibili","class":"tv","link":"https://space.bilibili.com/236634742","class":"tv"},
{"name": "我的Github","class":"github","link":"https://github.com/lijianing8998","class":"github"}可供参考，图标代码正版用户请参考主题文档
网站加载完成提示
修改流程“外观-设置外观-开发者设置-自定义JavaScript”填写以下代码
/* 网站加载完成提示开始 */
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"
})
/* 网站加载完成提示结束 */文章内图片悬停放大
修改流程“外观-设置外观-开发者设置-自定义CSS”填写以下代码
/*文章内图片悬停放大并将超出范围隐藏*/
.entry-thumbnail {
overflow: hidden;
}
#post-content img {
border-radius: 10px;
transition: 0.5s;
}
#post-content img:hover {
transform: scale(1.05);
}
自定义右键（相较于上一版本有些许不同）
修改流程“外观-设置外观-开发者设置-自定义输出body 尾部的HTML代码”填写以下代码
请将涉及到本站域名部分内容替换为自己的域名
<!-- 自定义右键菜单美化 -->
<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(100,160,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.5) !important
}
div.usercm {
background: #fff !important;
}
</style>
<div class="usercm" style="left: 199px; top: 5px; display: none;">
<ul>
<li>
<a href="https://yinlangclub.cn/">
<i class="iconfont icon-home"></i>
<span>
 首  页   
</span>
<i class="iconfont icon-maoliang"></i>
</a>
</li>
<li>
<a href="javascript:void(0);" onclick="getSelect();">
<i class="iconfont icon-fuzhi"></i>
<span>
 复  制   
</span>
<i class="iconfont icon-chongwutubiao16"></i>
</a>
</li>
<li>
<a href="javascript:void(0);" onclick="baiduSearch();">
<i class="iconfont icon-wangluo"></i>
<span>
 搜  索   
</span>
<i class="iconfont icon-logo-cat"></i>
</a>
</li>
<li>
<a href="javascript:history.go(1);">
<i class="iconfont icon-kuaijin"></i>
<span>
 前  进   
</span>
<i class="iconfont icon-chongwutubiao02"></i>
</a>
</li>
<li>
<a href="javascript:history.go(-1);">
<i class="iconfont icon-houtui"></i>
<span>
 后  退   
</span>
<i class="iconfont icon-cat"></i>
</a>
</li>
<li style="border-bottom:1px solid gray">
<a href="javascript:window.location.reload();">
<i class="iconfont icon-bianhua"></i>
<span>
 刷  新   
</span>
<i class="iconfont icon-mao2"></i>
</a>
</li>
<li>
<a href="https://www.docn.net/friends.html">
<i class="iconfont icon-shouhuodizhi"></i>
<span>
 友  链   
</span>
<i class="iconfont icon-yu"></i>
</a>
</li>
<li>
<a href="https://www.docn.net/Message-board.html">
<i class="iconfont icon-xiaoxi"></i>
<span>
 留  言   
</span>
<i class="iconfont icon-chongwutubiao18"></i>
</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://cn.bing.com/search?q=" + 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>
<!-- 自定义右键菜单美化 -->
修改后台路径
- 将
admin文件夹改名，改成你想要的后台地址例如abc，然后找到Typecho根目录下的config.inc.php文件，将define('__TYPECHO_ADMIN_DIR__', '/admin/');中的的/admin/改成/abc/即可，以后要登录后台访问xxx.com/abc/即可 - 使用
handsome主题，需要在外观设置-外观设置开关，勾选不显示左侧边栏底部菜单或者新版本V9.2.0中通过前面自定义部分将设置键删除不进行显示即可
一键评论打卡
1、首先在设置外观-开发者设置-自定义JavaScript和PJAX回调函数都加入以下代码:
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,
m = a.selectionEnd,
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()
}
var b = (new Date).toLocaleTimeString(),
c = document.getElementById("comment") || 0;
window.SIMPALED = {};
window.SIMPALED.Editor = {
daka: function() {
a(c, "滴！学生卡！打卡时间：" + b, "，请上车的乘客系好安全带~")
},
zan: function() {
a(c, " 写得好好哟,我要给你生猴子！::funny:04:: ")
},
cai: function() {
a(c, "骚年,我怀疑你写了一篇假的文章！::funny:03:: ")
}
};2、打开主题目录的component/comments.php的130行左右，找到以下代码：
<div class="OwO padder-v-sm"></div>3、在上面代码加上属性style="display: inline;"，且在其后面加入以下代码
<!-- 一键打卡 -->
<div class="OwO" title="打卡" style="display: inline;" onclick="javascript:SIMPALED.Editor.daka();this.style.display='none'"><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();this.style.display='none'"><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();this.style.display='none'"><div class="OwO-logo"><i class="glyphicon glyphicon-thumbs-down"></i><span class="OwOlogotext"></span></div></div>
<!-- /一键打卡 -->4、在后台–>设置外观–>开发者设置–>自定义CSS加入以下代码:
.secret_comment {
top: 5px;
}
.OwO.OwO-open .OwO-body {
display:table
}即可实现一键评论
首页倒计时
将以下代码添加至后台-开发者设置-首页列表最前方广告位。
<style>
.gn_box{ border: none; border-radius: 15px; }
.gn_box { padding: 10px 14px; margin: 10px; margin-bottom: 20px; text-align: center; background-color: #fff; }
#t_d{ color: #982585; font-size: 18px; }
#t_h{ color: #8f79c1; font-size: 18px; }
#t_m{ color: #65b4b5; font-size: 18px; }
#t_s{ color: #83caa3; font-size: 18px; }
</style>
<div class="gn_box">
<h1><font color=#E80017>2</font><font color=#D1002E>0</font><font color=#BA0045>2</font><font color=#A3005C>4</font><font color=#8C0073>年</font><font color=#75008A>-</font>
<font color=#5E00A1>新</font><font color=#4700B8>年</font><font color=#3000CF>倒</font><font color=#1900E6>计</font><font color=#0200FD>时</font></h1><center>
<div id="CountMsg" class="HotDate"><span id="t_d"> 天</span><span id="t_h"> 时</span><span id="t_m"> 分</span><span id="t_s"> 秒</span></div></center>
<script type="text/javascript">
function getRTime() {
var EndTime = new Date('2024/02/09 00:00:00');
var NowTime = new Date();
var t = EndTime.getTime() - NowTime.getTime();
var d = Math.floor(t / 1000 / 60 / 60 / 24);
var h = Math.floor(t / 1000 / 60 / 60 % 24);
var m = Math.floor(t / 1000 / 60 % 60);
var s = Math.floor(t / 1000 % 60);
var day = document.getElementById("t_d");
if (day != null) {
day.innerHTML = d + " 天";
}
var hour = document.getElementById("t_h");
if (hour != null) {
hour.innerHTML = h + " 时";
}
var min = document.getElementById("t_m");
if (min != null) {
min.innerHTML = m + " 分";
}
var sec = document.getElementById("t_s");
if (sec != null) {
sec.innerHTML = s + " 秒";
}
}
setInterval(getRTime, 1000);
</script> </div>修改对应的文字及日期即可重复使用
效果如下：
404页面隐藏登录和注册按钮
修改位置：/handsome/404.php
注释即可
网站 seo 排名优化
解决蜘蛛索引时，存在“该页面上存在多个 h1 标记” 问题
修改位置：/handsome/libs/Content.php
V9.2.0版本大概位于464行
<div id="morphing-content" class="hidden read_mode_article">
<div class="page">
//下行的h1已被修改为h2，如果需要复制请删除本注释
<h2 class="title">$obj->title</h2>
<div class="metadata singleline"><a href="#" rel="author" class="byline">{$author}</a> • <span class="delimiter"></span><time class="date">{$time}</time></div>
{$core_content}
</div>
</div>原因：因为文章页面存在阅读模式，所以会存在两个h1，将h1修改为h2即可
文章中的外链未做优化处理造成权重流失，需要添加 rel=”nofollow” 属性
Handsome 主题外链处理分为以下三种：
- 文章外链
- 全站友情链接
- 内页友情链接
自行选择优化方案：
文章外链
修改位置：/handsome/libs/content/ScodeContent.php
大概在304行位置V9.2.0
//文章中的链接，以新窗口方式打开
$content = preg_replace_callback("/<a href=\"([^\"]*)\">(.*?)<\/a>/", function ($matches) {
if (strpos($matches[1], substr(@BLOG_URL, 0, -1)) !== false || strpos(substr($matches[1], 0, 6), "http") === false) {
return '<a href="' . $matches[1] . '">' . $matches[2] . '</a>';
} else {
if (Utils::getExpertValue("no_link_ico", false)) {//true 则不加图标
return '<a href="' . $matches[1] . '" target="_blank">' . $matches[2] . '</a>';
} else {
//在下行中添加rel="nofollow"，此处为已添加的版本，如果需要复制请删除本注释
return '<span class="external-link"><a class="no-external-link" rel="nofollow" href="' . $matches[1] . '" target="_blank"><i data-feather="external-link"></i>' .
$matches[2] .
"</a></span>";
}内页友情链接
修改位置：/handsome/libs/Content.php
大概在944行位置
$mypattern = <<<eof
<div class="col-sm-6">
//下一行添加rel="nofollow"，此处为已添加的版本，如果需要复制请删除本注释
<a href="{url}" target="_blank" class="list-group-item no-borders box-shadow-wrap-lg" rel="nofollow"> <span
class="pull-left thumb-sm avatar m-r"> <img
src={image} alt="Error" class="img-square" /> <i class="{color} right"></i> </span> <span class="clear"><span class="text-ellipsis">
{name}</span> <small
class="text-muted clear text-ellipsis">{title}</small> </span> </a>
</div>全站友情链接
修改位置：/handsome/component/aside.php
大概在215行位置,rel=’noopener后面添加nofollow即可
<!--使用links插件，输出全站友链-->
<?php $mypattern1 = "<li data-original-title=\"{title}\" data-toggle=\"tooltip\"
data-placement=\"top\"><a rel='noopener nofollow' href=\"{url}\" target=\"_blank\"><span>{name}</span></a></li>";文章末尾添加以 tag 为推荐条件的相关文章推荐
修改位置：/handsome/post.php
在105行位置上，代码结束后，开始之前添加如下代码
<!--相关推荐-->
<div class="tab-content clear">
<h3 class="widget-title m-t-none text-md"><?php _me("相关文章") ?>
<small><i class="fontello-bell" data-toggle="tooltip" title="我们将根据本文的tag进行相关文章的推荐"></i>
</small>
</h3>
<div id="relatedPosts" >
<ul class="list-group-item nav nav-list">
<?php $this->related(5)->to($relatedPosts); ?>
<?php if ($relatedPosts->have()): ?>
<?php while ($relatedPosts->next()): ?>
<li class="tocify-item text-second">
<a href="<?php $relatedPosts->permalink(); ?>" title="<?php $relatedPosts->title(); ?>"><?php $relatedPosts->title(); ?></a>
</li>
<?php endwhile; ?>
<?php else : ?>
<li>暂无相关推荐</li>
<?php endif; ?>
</ul>
</div>
</div> 仅仅是希望在文章页中进行相关文章的展示，个人博客单页面承载的链接不建议过多。上面写的是最多5个。
可以根据想要显示的位置自行调整代码位置。
删除网站标题连接符两边的空格，增加网页标题有效信息内容
将空格-空格换成-，如果标题字数多的博客可以将其两边的空格去掉获得 1-2 字的展现。
修改位置：/handsome/libs/Content.php
大概873行位置
if ($currentPage > 1) {
_me("第%s页-", $currentPage);
}
if ($commentPage > 1) {
//todo 这种描述容易有歧义
_me("第%s页-", $commentPage);
}删除-左右的空格即可
修复首页description和keywords显示BUG
修复爬虫警告：页面的标头部分缺少说明。摘要过长或过短的问题
将页面源代码的 标记中的描述长度更改为介于 25 到 160 个字符之间。
typecho框架具体方法
修改位置：var/Widget/Archive.php，大概1074行位置修改为以下代码即可
if(($this->is('index') == False)AND($this->is('tag') == False)AND($this->is('category') == False)){
if((!is_null($this->fields->description))AND(strcmp($this->fields->description,'') != 0)){
$allows['description'] = $this->fields->description;
}
if((!is_null($this->fields->keywords))AND(strcmp($this->fields->keywords,'') != 0)){
$allows['keywords'] = $this->fields->keywords;
}
}解释
- 增加了一个判断语句判断当前页面是否首页/标签/分类，非首页、标签和分类才执行。
- 再增加了一个判断语句判断description和keywords是否为空字符串，如果是空字符串也使用原方法。
使用方法
在编写文章时，按照如下方式添加两个字段即可
可以通过电脑浏览器F12检查一下是否生效，打开指定的文章页面，F12记得刷新一下，展开hear头部即可看到
降低分页、标签页对于首页、文章页的权重分散
经过一段时间的使用，发现搜索引擎并不收录文章页面，而经常性收录以下页面：
- 各种文章标签的页面
- 各种关键词搜索页面
- 各种文章分类的页面
为了让搜索引擎更多的收录文章，而不是其他页面，故在蜘蛛屏蔽文件 robots.txt 中增加以下信息：
Disallow: /category
Disallow: /tag
Disallow: /search用于告诉蜘蛛屏蔽上述界面，不进行爬虫
robots.txt文件放在网站根目录
© 版权声明
- 本博客所拥有的文章除特别声明外，均默认采用 CC BY 4.0 许可协议。
- 文章部分内容可能来源于公共网络，如有侵权，请联系博主在核实后进行修改或删除。
THE END
- 最新
- 最热
只看作者