非插件类

CodePrettify插件与Vditor兼容

  1. 启用 CodePrettify 插件，并进行相应配置（一定要设置成显示行号！）。
  2. 删除原作者让您添加到主题插件中的 Pjax 回调函数。
  3. 替换 /usr/themes/handsome/assets/css/handsome.min.css 和 /usr/themes/handsome/assets/js/core.min.js 文件，相关文件在下方给出。
  4. 刷新 CDN 缓存，清除浏览器缓存，或者点击 Handsome 插件中的更新离线缓存按钮。

仅仅针对Handsome主题7.3.1进行兼容

以上仅仅是7.3.1的修改，更新8.0后，本站已经不再使用，因为8.0的代码高亮体验还是不错的

8.0下的代码高亮，分深色和浅色，可以右边设置手动切换观看效果

测试代码高亮

Handsome主题网站加载速度优化

Handsome主题音乐加载优化

改为当页面加载后不载入音乐,点击播放再加载音乐，可以优化一下页面加载速度，仅对7.3.1版本以下有效

7.3.1版本

在网站目录中找到handsome/assets/js/function.min.js文件

通过使用快捷搜索或者使用Ctrl+F搜索preload="auto"将auto修改为none即可

网站使用CDN可以在CDN控制台刷新缓存

该版本可以直接引用本站7.3.1版本的静态资源，以及进行了修改优化

6.0版本

在网站目录中找到handsome/assets/js/features/music.min.js文件
通过使用快捷搜索或者使用Ctrl+F搜索preload="auto"将auto修改为none
网站使用CDN可以在CDN控制台刷新缓存

以上仅对7.3.1和6.0有效，其他版本请自行探索，修改过程中要注意文件备份，数据无价

Handsome主题视频加载优化

在网站目录下找到handsome/assets/js/core.min.js文件

搜索"preload","preload"将"preload","preload"修改为"preload","meta"即可

仅对7.3.1版本用户有效，注意文件备份

博客底部版权信息

博客底部版权信息

第一步将以下CSS代码添加到主题设置-开发者设置-自定义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
}

/*这是优化底部栏的css，应该不会影响没开启炫酷透明功能时候的主题，如果有问题就删除下面这行即可*/
.wrapper {
  padding: 11px;
}

第二步将以下HTML代码添加到主题设置-开发者设置-博客底部左侧信息中

<!-- 博客底部左侧信息 -->
<div class="github-badge">
<a href="https://www.678wl.cn/" arget="_blank" rel="noopener noreferrer" title="©2021 Airsado">
<span class="badge-subject">Copyright</span><span class="badge-value bg-blue">©2021 Airsado</span>
</a>
</div>
 | 
<div class="github-badge">
<a href="https://beian.miit.gov.cn" target="_blank" title="准备中">
<span class="badge-subject">呜呜呜</span><span class="badge-value bg-green">未到时候</span>
</a>
</div>
 | 
<div class="github-badge">
<a href="https://www.678wl.cn/sitemap.xml" target="_blank" title="网站地图">
<span class="badge-subject">地图</span><span class="badge-value bg-orange">Sitemap</span>
</a>
</div>

第三步将以下HTML代码添加到外观设置-开发者设置-博客底部右侧信息中

<!-- 博客底部右侧信息 -->
<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>

第四步删掉多余版权代码，在网站目录下找到/handsome/component/foot.php搜索版权信息然后将以下代码删掉

Powered by <a target="_blank" href="http://www.typecho.org">Typecho</a>&nbsp;|&nbsp;Theme by <a target="_blank"
href="https://www.ihewro.com/archives/489/">handsome</a>
<span class="text-ellipsis">&copy;&nbsp;<?php echo date("Y"); ?> Copyright&nbsp;

文章黑幕“你知道得太多了”效果

文章黑幕“你知道得太多了”效果

效果：被你发现了咳咳

第一步复制以下CSS代码粘贴并保存在主题后台-开发者设置-自定义CSS中

此处内容需要评论回复后（审核通过）方可阅读。

第二步将以下代码填入主题设置-开发者设置-自定义JavaScript即可

此处内容需要评论回复后（审核通过）方可阅读。

食用方法

<span class="heimu"  title="你知道的太多了">这里填需要黑幕掉的文字</span>

页面、文章抖动害怕效果

页面、文章抖动害怕效果

效果：2333

第一步将以下CSS代码复制粘贴并保存在主题后台-开发者设置-自定义CSS中

此处内容需要评论回复后（审核通过）方可阅读。

第二步将以下代码填入主题设置-开发者设置-自定义JavaScript即可

此处内容需要评论回复后（审核通过）方可阅读。

食用方法

<a class="Pshake">2333</a>

开启gzip压缩

在根目录index.php文件中，加入以下PHP代码即可

/** 开启gzip压缩 */
ob_start('ob_gzhandler');

正文结束并添加版权声明

在 handsome/post.php内 <?php echo Content::exportPayForAuthors(); ?>的下面添加以下内容

<!--版权声明开始-->
<div class="entry-content l-h-2x">
                   <div style="border-top: 2px dotted #8e8e8e96;height: 0px;margin: 20px 0px;text-align: center;width: 100%;">
                     <span style="background-color: #23b7e5;color: #fff;padding: 6px 10px;position: relative;top: -14px;border-radius: 14px;">END</span>
                   </div>
                   <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><br></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->siteUrl(); ?>" target="_blank" data-original-title="<?php $this->options->title() ?>"><?php $this->options->title() ?></a>原创，转载请保留文章出处。</span>
                   </div>
                 </div>
<!--版权声明结束-->

网站右侧滚动条美化

将下面的CSS代码添加到主题后台-开发者设置-自定义CSS保存就可以了

/*定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸*/ 
::-webkit-scrollbar {
    width: 8px;
    height: 6px
}
/*定义滚动条轨道*/ 
::-webkit-scrollbar-track {
    background-color: transparent;
    -webkit-border-radius: 2em;
    -moz-border-radius: 2em;
    border-radius: 2em
}
/*定义滑块 内阴影+圆角*/ 
::-webkit-scrollbar-thumb {
    background-color: #30B07F;
    background-image: -webkit-linear-gradient(45deg,rgba(255,255,255,.4) 100%,transparent 100%,transparent 50%,rgba(255,255,255,.4) 50%,rgba(255,255,255,.4) 75%,transparent 75%,transparent);
    -webkit-border-radius: 2em;
    -moz-border-radius: 2em;
    border-radius: 2em
}

左侧栏彩色图标

第一步将以下js代码保存在主题后台-开发者设置-自定义JavaScript

<!--左侧栏图标彩色-->
let leftHeader=document.querySelectorAll("span.nav-icon>svg,span.nav-icon>i");let leftHeaderColorArr=["#FF69B4","#58c7ea","#E066FF","#FF69B4","#FFA54F","#90EE90","#0043ff","#cc00ff","#878787","#A0522D","#FF7256","#FFA500","#8B0000","#7CFC00","#4EEE94","#00FFFF","#EE0000"];leftHeader.forEach(tag=>{tagsColor=leftHeaderColorArr[Math.floor(Math.random()*leftHeaderColorArr.length)];tag.style.color=tagsColor});

第二步将以下代码填入pjax-pjax回调即可

<!--左侧栏图标彩色-->
let leftHeader=document.querySelectorAll("span.nav-icon>svg,span.nav-icon>i");let leftHeaderColorArr=["#FF69B4","#58c7ea","#E066FF","#FF69B4","#FFA54F","#90EE90","#0043ff","#cc00ff","#878787","#A0522D","#FF7256","#FFA500","#8B0000","#7CFC00","#4EEE94","#00FFFF","#EE0000"];leftHeader.forEach(tag=>{tagsColor=leftHeaderColorArr[Math.floor(Math.random()*leftHeaderColorArr.length)];tag.style.color=tagsColor});

彩色标签云

第一步将以下js代码填入主题设置-开发者设置-自定义JavaScript

<!--彩色标签云-->

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;
});

第二步将以下代码填入pjax-pjax回调即可

<!--彩色标签云&博客信息-->
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;
});

jsDelivr静态加速地址

目前使用的是jsdelivr实现静态加速 ~毕竟可以白嫖~

handsome8.1.0静态加速：

此处内容需要评论回复后（审核通过）方可阅读。

handsome8.0.0静态加速：

此处内容需要评论回复后（审核通过）方可阅读。

handsome7.3.1静态加速：

此处内容需要评论回复后（审核通过）方可阅读。

文章标题美化，聚焦滑动条

将以下css代码放到主题后台-开发者设置-自定义css即可

/*
 * 文章一二三四级标题美化
 */
#post-content h1 {font-size: 30px}
#post-content h2 {position: relative;margin: 20px 0 32px!important;font-size: 1.55em;}
#post-content h3 {font-size: 20px}
#post-content h4 {font-size: 15px}
#post-content h2::after {transition:all .35s;content:"";position:absolute;background:linear-gradient(#3c67bd8c 30%,#3c67bd 70%);width:1em;left:0;box-shadow:0 3px 3px rgba(32,160,255,.4);height:3px;bottom:-8px;}
#post-content h2::before {content:"";width:100%;border-bottom:1px solid #eee;bottom:-7px;position:absolute}
#post-content h2:hover::after {width: 2.5em;}
#post-content h1,#post-content h2,#post-content h3,#post-content h4,#post-content h5,#post-content h6 {color:#666;line-height:1.4;font-weight:700;margin:30px 0 10px 0}

预留位置

预留位

插件类

第三方登录插件

下载GmOauth插件，FTP上传插件至plugins目录，确保文件名为GmOauth，后台启动之后将以下PHP代码放在要输出登录按钮位置,本博客在themes/handsome/component/comments.php中187行

<!--第三方登录接口开始--><?php GmOauth_Plugin::GmOauth(); ?><!--第三方登录接口结束-->

预留位置

预留位

参考博客及其出处

Handsome主题网站加载速度优化
CodePrettify插件与Vditor兼容出处
正文结束版权声明、网站右侧滚动条美化
第三方登录插件

自建jsDeliver静态加速地址教程

如何利用Github上传静态文件到jsdelivr获得可观的加速

准备工作翻墙工具Github Desktop（个人感觉方便）需要上传的静态文件下载工具操作开始安装以及登录操作这边...

Last modification：March 26th, 2021 at 10:32 pm
© 允许规范转载
如果觉得我的文章对你有用，请随意赞赏
END
本文作者：
 文章标题：Airsado博客Handsome主题美化优化记录
 本文地址：https://678wl.cn/archives/119.html
 版权说明：若无注明，本文皆Airsado博客原创，转载请保留文章出处。