Airsado博客Handsome主题美化优化记录

Author： Airsado
发布时间：November 27, 2020
2226views
20 comments
6455 words
Categories：编程笔记 PHP

<div class="tip share">请注意，本文编写于 242 天前，最后修改于 1 天前，其中某些信息可能已经过时。</div>

# 非插件类

<div class="panel panel-default collapse-panel box-shadow-wrap-lg"><div class="panel-heading panel-collapse" data-toggle="collapse" data-target="#collapse-ac32eeda68ecfd694021ca40d88e8ae922" aria-expanded="true"><div class="accordion-toggle"><span>CodePrettify插件与Vditor兼容</span>
<i class="pull-right fontello icon-fw fontello-angle-right"></i>
</div>
</div>
<div class="panel-body collapse-panel-body">
<div id="collapse-ac32eeda68ecfd694021ca40d88e8ae922" class="collapse collapse-content"><p></p>

---

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

<button class="btn m-b-xs btn-success  " onclick='window.open("https://blog.ruixiaolu.com/usr/handsome.min.css.zip","_blank")'>handsome.min.css</button>

仅仅针对Handsome主题7.3.1进行兼容
</div>

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

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

```php
测试代码高亮
```

<div class="panel panel-default collapse-panel box-shadow-wrap-lg"><div class="panel-heading panel-collapse" data-toggle="collapse" data-target="#collapse-e7d14dda396a9515995b005dded58df965" aria-expanded="true"><div class="accordion-toggle"><span>Handsome主题网站加载速度优化</span>
<i class="pull-right fontello icon-fw fontello-angle-right"></i>
</div>
</div>
<div class="panel-body collapse-panel-body">
<div id="collapse-e7d14dda396a9515995b005dded58df965" class="collapse collapse-content"><p></p>

---

**Handsome主题音乐加载优化**

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

**7.3.1版本**

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

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

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

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

</div>

---

**6.0版本**

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

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

---

**Handsome主题视频加载优化**

当页面加载后不载入视频,点击播放再加载视频
</div>

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

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

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

<div class="panel panel-default collapse-panel box-shadow-wrap-lg"><div class="panel-heading panel-collapse" data-toggle="collapse" data-target="#collapse-5d9e1a161d9aae547f9eb72443ef314b31" aria-expanded="true"><div class="accordion-toggle"><span>博客底部版权信息</span>
<i class="pull-right fontello icon-fw fontello-angle-right"></i>
</div>
</div>
<div class="panel-body collapse-panel-body">
<div id="collapse-5d9e1a161d9aae547f9eb72443ef314b31" class="collapse collapse-content"><p></p>

---

**博客底部版权信息**

**第一步**将以下CSS代码添加到`主题设置-开发者设置-自定义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代码添加到`主题设置-开发者设置-博客底部左侧信息`中

```HTML

<div class="github-badge">
<a href="https://www.678wl.cn/" target="_blank"  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://www.678wl.cn/go/aHR0cHM6Ly9iZWlhbi5taWl0Lmdvdi5jbg" target="_blank"  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"  target="_blank" title="网站地图">
<span class="badge-subject">地图</span><span class="badge-value bg-orange">Sitemap</span>
</a>
</div>
```

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

```HTML

<div class="github-badge">
<a href="https://www.678wl.cn/go/aHR0cDovL3d3dy50eXBlY2hvLm9yZw" target="_blank"  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.678wl.cn/go/aHR0cHM6Ly93d3cuaWhld3JvLmNvbS9hcmNoaXZlcy80ODkv" target="_blank"  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`搜索`版权信息`然后将以下代码删掉

```HTML
Powered by <a target="_blank" href="https://www.678wl.cn/go/aHR0cDovL3d3dy50eXBlY2hvLm9yZw" target="_blank" >Typecho</a>&nbsp;|&nbsp;Theme by <a target="_blank"
href="https://www.678wl.cn/go/aHR0cHM6Ly93d3cuaWhld3JvLmNvbS9hcmNoaXZlcy80ODkv" target="_blank" >handsome</a>
```

```HTML
<span class="text-ellipsis">&copy;&nbsp;<?php echo date("Y"); ?> Copyright&nbsp;
```

<div class="panel panel-default collapse-panel box-shadow-wrap-lg"><div class="panel-heading panel-collapse" data-toggle="collapse" data-target="#collapse-77df9d4dcda770b739daa8bdc10ba73c44" aria-expanded="true"><div class="accordion-toggle"><span>文章黑幕“你知道得太多了”效果</span>
<i class="pull-right fontello icon-fw fontello-angle-right"></i>
</div>
</div>
<div class="panel-body collapse-panel-body">
<div id="collapse-77df9d4dcda770b739daa8bdc10ba73c44" class="collapse collapse-content"><p></p>

---

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

**效果**：<span class="heimu"  title="你知道的太多了">被你发现了咳咳</span>

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

<div class="hideContent">此处内容需要评论回复后（审核通过）方可阅读。</div>

**第二步**将以下代码填入`主题设置-开发者设置-自定义JavaScript`即可
<div class="hideContent">此处内容需要评论回复后（审核通过）方可阅读。</div>

**食用方法**

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

理论上其他HTML标签也是可以的
</div>

<div class="panel panel-default collapse-panel box-shadow-wrap-lg"><div class="panel-heading panel-collapse" data-toggle="collapse" data-target="#collapse-d42d6b60595071d4343225c7982f4e6c7" aria-expanded="true"><div class="accordion-toggle"><span>页面、文章抖动害怕效果</span>
<i class="pull-right fontello icon-fw fontello-angle-right"></i>
</div>
</div>
<div class="panel-body collapse-panel-body">
<div id="collapse-d42d6b60595071d4343225c7982f4e6c7" class="collapse collapse-content"><p></p>

---

**页面、文章抖动害怕效果**

**效果**：<a class="Pshake">2333</a>

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

<div class="hideContent">此处内容需要评论回复后（审核通过）方可阅读。</div>

**第二步**将以下代码填入`主题设置-开发者设置-自定义JavaScript`即可
<div class="hideContent">此处内容需要评论回复后（审核通过）方可阅读。</div>

**食用方法**

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

理论上其他HTML标签也是可以的
</div>

<div class="panel panel-default collapse-panel box-shadow-wrap-lg"><div class="panel-heading panel-collapse" data-toggle="collapse" data-target="#collapse-92af76e86beb36bd91228926ebb28ed872" aria-expanded="true"><div class="accordion-toggle"><span>开启gzip压缩</span>
<i class="pull-right fontello icon-fw fontello-angle-right"></i>
</div>
</div>
<div class="panel-body collapse-panel-body">
<div id="collapse-92af76e86beb36bd91228926ebb28ed872" class="collapse collapse-content"><p></p>

---

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

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

<div class="panel panel-default collapse-panel box-shadow-wrap-lg"><div class="panel-heading panel-collapse" data-toggle="collapse" data-target="#collapse-f1fa7c0be7bc5dadc913554c0372d32866" aria-expanded="true"><div class="accordion-toggle"><span>正文结束并添加版权声明</span>
<i class="pull-right fontello icon-fw fontello-angle-right"></i>
</div>
</div>
<div class="panel-body collapse-panel-body">
<div id="collapse-f1fa7c0be7bc5dadc913554c0372d32866" class="collapse collapse-content"><p></p>

---

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

```HTML

<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="https://www.678wl.cn/go/PD9waHAgJHRoaXMtPmF1dGhvci0-cGVybWFsaW5rKCk7ID8-" target="_blank"  rel="author"> <?php $this->author(); ?></a><br></span>
                     <span>文章标题：<a href="https://www.678wl.cn/go/PD9waHAgJHRoaXMtPnBlcm1hbGluaygpID8-" target="_blank" ><?php $this->title() ?></a><br></span>
                     <span>本文地址：<a href="https://www.678wl.cn/go/PD9waHAgJHRoaXMtPnBlcm1hbGluaygpID8-" target="_blank" ><?php $this->permalink() ?></a><br></span>
                     <span>版权说明：若无注明，本文皆<a href="https://www.678wl.cn/go/PD9waHAgJHRoaXMtPm9wdGlvbnMtPnNpdGVVcmwoKTsgPz4" target="_blank"  target="_blank" data-original-title="<?php $this->options->title() ?>"><?php $this->options->title() ?></a>原创，转载请保留文章出处。</span>
                   </div>
                 </div>

```

<div class="panel panel-default collapse-panel box-shadow-wrap-lg"><div class="panel-heading panel-collapse" data-toggle="collapse" data-target="#collapse-e08e95f90971d29a99659abd798185e327" aria-expanded="true"><div class="accordion-toggle"><span>网站右侧滚动条美化</span>
<i class="pull-right fontello icon-fw fontello-angle-right"></i>
</div>
</div>
<div class="panel-body collapse-panel-body">
<div id="collapse-e08e95f90971d29a99659abd798185e327" class="collapse collapse-content"><p></p>

---

将下面的CSS代码添加到`主题后台-开发者设置-自定义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
}
```

<div class="panel panel-default collapse-panel box-shadow-wrap-lg"><div class="panel-heading panel-collapse" data-toggle="collapse" data-target="#collapse-c0b0f293e729a4f2289e687be79010bf15" aria-expanded="true"><div class="accordion-toggle"><span>左侧栏彩色图标</span>
<i class="pull-right fontello icon-fw fontello-angle-right"></i>
</div>
</div>
<div class="panel-body collapse-panel-body">
<div id="collapse-c0b0f293e729a4f2289e687be79010bf15" class="collapse collapse-content"><p></p>

---

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

```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回调`即可

<div class="panel panel-default collapse-panel box-shadow-wrap-lg"><div class="panel-heading panel-collapse" data-toggle="collapse" data-target="#collapse-1c690e341007cd3461bb833f3d030f7e42" aria-expanded="true"><div class="accordion-toggle"><span>彩色标签云</span>
<i class="pull-right fontello icon-fw fontello-angle-right"></i>
</div>
</div>
<div class="panel-body collapse-panel-body">
<div id="collapse-1c690e341007cd3461bb833f3d030f7e42" class="collapse collapse-content"><p></p>

---

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

```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回调`即可

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

<div class="panel panel-default collapse-panel box-shadow-wrap-lg"><div class="panel-heading panel-collapse" data-toggle="collapse" data-target="#collapse-ff5b75873ec40cb41c15ae9711b2144b100" aria-expanded="true"><div class="accordion-toggle"><span>jsDelivr静态加速地址</span>
<i class="pull-right fontello icon-fw fontello-angle-right"></i>
</div>
</div>
<div class="panel-body collapse-panel-body">
<div id="collapse-ff5b75873ec40cb41c15ae9711b2144b100" class="collapse collapse-content"><p></p>

---

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

**handsome8.1.0静态加速**：

<div class="hideContent">此处内容需要评论回复后（审核通过）方可阅读。</div>

**handsome8.0.0静态加速**：

<div class="hideContent">此处内容需要评论回复后（审核通过）方可阅读。</div>

**handsome7.3.1静态加速**：

<div class="hideContent">此处内容需要评论回复后（审核通过）方可阅读。</div>

---

<div class="panel panel-default collapse-panel box-shadow-wrap-lg"><div class="panel-heading panel-collapse" data-toggle="collapse" data-target="#collapse-ce1c5cd4b439969adb836ec381ab0abd63" aria-expanded="true"><div class="accordion-toggle"><span>文章标题美化，聚焦滑动条</span>
<i class="pull-right fontello icon-fw fontello-angle-right"></i>
</div>
</div>
<div class="panel-body collapse-panel-body">
<div id="collapse-ce1c5cd4b439969adb836ec381ab0abd63" class="collapse collapse-content"><p></p>
将以下css代码放到`主题后台-开发者设置-自定义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}
```

<div class="panel panel-default collapse-panel box-shadow-wrap-lg"><div class="panel-heading panel-collapse" data-toggle="collapse" data-target="#collapse-26174e9a54fa2baa2b54a7a41353dd1536" aria-expanded="true"><div class="accordion-toggle"><span>预留位置</span>
<i class="pull-right fontello icon-fw fontello-angle-right"></i>
</div>
</div>
<div class="panel-body collapse-panel-body">
<div id="collapse-26174e9a54fa2baa2b54a7a41353dd1536" class="collapse collapse-content"><p></p>
预留位

# 插件类

<div class="panel panel-default collapse-panel box-shadow-wrap-lg"><div class="panel-heading panel-collapse" data-toggle="collapse" data-target="#collapse-eab4ea0ad765172e8f22d3e6281e698157" aria-expanded="true"><div class="accordion-toggle"><span>第三方登录插件</span>
<i class="pull-right fontello icon-fw fontello-angle-right"></i>
</div>
</div>
<div class="panel-body collapse-panel-body">
<div id="collapse-eab4ea0ad765172e8f22d3e6281e698157" class="collapse collapse-content"><p></p>

---

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

```PHP
<?php GmOauth_Plugin::GmOauth(); ?>
```

<button class="btn m-b-xs btn-success  " onclick='window.open("https://github.com/AIYMC/typecho_Oauth","_blank")'>Github</button>

<div class="panel panel-default collapse-panel box-shadow-wrap-lg"><div class="panel-heading panel-collapse" data-toggle="collapse" data-target="#collapse-970538b1596c31e2e2066bb903e30b0539" aria-expanded="true"><div class="accordion-toggle"><span>预留位置</span>
<i class="pull-right fontello icon-fw fontello-angle-right"></i>
</div>
</div>
<div class="panel-body collapse-panel-body">
<div id="collapse-970538b1596c31e2e2066bb903e30b0539" class="collapse collapse-content"><p></p>
预留位

## 参考博客及其出处

[**Handsome主题网站加载速度优化**](https://biux.cn/archives/41.html)
[**CodePrettify插件与Vditor兼容出处**](https://blog.ruixiaolu.com/archives/85/)
[**正文结束版权声明**、**网站右侧滚动条美化**](https://www.ravo.top/archives/275/)
[**第三方登录插件**](https://www.gmit.vip/)

## 自建jsDeliver静态加速地址教程

<div class="inner-content" >
<p class="inser-title">关于利用Github上传文件到jsdelivr加速网站一事</p>
<div class="inster-summary text-muted">
准备工作翻墙工具Github Desktop（个人感觉方便）需要上传的静态文件下载工具操作开始安装以及登录操作这边...
</div>
</div>
</a>

</div>

</div>

Last modification：July 26th, 2021 at 05:24 pm

如果觉得我的文章对你有用，请随意赞赏

20 comments

可乐酱
April 23rd, 2021 at 07:56 am

感谢分享来看看OωO

Reply
阿达
April 9th, 2021 at 12:52 pm

|´・ω・)ノ感谢分享

Reply
1. Airsado
  April 9th, 2021 at 12:53 pm
  
  @阿达
  
  hh，好的|´・ω・)ノ
  
  Reply
冷曦
April 3rd, 2021 at 09:35 pm

感谢分享

Reply
littcker
March 31st, 2021 at 03:56 pm

感谢分享

Reply
隔壁老李
March 29th, 2021 at 09:01 pm

感谢分享

Reply
测试号
March 26th, 2021 at 09:43 pm

邮箱评论测试评论

Reply
1. Airsado
  March 26th, 2021 at 09:43 pm
  
  @测试号
  
  测试
  
  Reply
ensio
March 22nd, 2021 at 09:02 pm

e来学习

Reply
1. Airsado
  March 26th, 2021 at 09:44 pm
  
  @ensio
  
  啊哈哈欢迎|´・ω・)ノ
  
  Reply
滑稽大叔
March 16th, 2021 at 10:56 am

看看

Reply
1. Airsado
  March 16th, 2021 at 11:57 am
  
  @滑稽大叔
  
  好的
  
  Reply
Timor
March 11th, 2021 at 09:19 pm

准备白嫖8.1

Reply
1. Airsado
  March 12th, 2021 at 05:27 pm
  
  @Timor
  
  哈哈
  
  Reply
2. Airsado
  March 11th, 2021 at 10:50 pm
  
  @Timor
  
  已经弄上去了hh∠ᐛ」ᐛ」∠＿
  
  Reply
顾盼
February 28th, 2021 at 03:42 pm

白嫖啦

Reply
1. Airsado
  February 28th, 2021 at 03:46 pm
  
  @顾盼
  
  好呀
  
  Reply
QINEM
February 21st, 2021 at 12:17 am

点赞

Reply
站元素主机
December 15th, 2020 at 04:43 pm

赞一个

Reply
1. 殇芯呐
  December 26th, 2020 at 12:17 pm
  
  @站元素主机
  
  哈哈
  
  Reply

Airsado博客Handsome主题美化优化记录

Airsado • 2020 年 11 月 27 日

<div class="tip share">请注意，本文编写于 242 天前，最后修改于 1 天前，其中某些信息可能已经过时。</div>

# 非插件类

<div class="panel panel-default collapse-panel box-shadow-wrap-lg"><div class="panel-heading panel-collapse" data-toggle="collapse" data-target="#collapse-5140394955ab72d2dbf8443da3d186c48" aria-expanded="true"><div class="accordion-toggle"><span>CodePrettify插件与Vditor兼容</span>
<i class="pull-right fontello icon-fw fontello-angle-right"></i>
</div>
</div>
<div class="panel-body collapse-panel-body">
<div id="collapse-5140394955ab72d2dbf8443da3d186c48" class="collapse collapse-content"><p></p>

---

<button class="btn m-b-xs btn-success  " onclick='window.open("https://blog.ruixiaolu.com/usr/handsome.min.css.zip","_blank")'>handsome.min.css</button>

仅仅针对Handsome主题7.3.1进行兼容
</div>

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

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

```php
测试代码高亮
```

<div class="panel panel-default collapse-panel box-shadow-wrap-lg"><div class="panel-heading panel-collapse" data-toggle="collapse" data-target="#collapse-7e820efcc978d4300a192b74d32a3e6988" aria-expanded="true"><div class="accordion-toggle"><span>Handsome主题网站加载速度优化</span>
<i class="pull-right fontello icon-fw fontello-angle-right"></i>
</div>
</div>
<div class="panel-body collapse-panel-body">
<div id="collapse-7e820efcc978d4300a192b74d32a3e6988" class="collapse collapse-content"><p></p>

---

**Handsome主题音乐加载优化**

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

**7.3.1版本**

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

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

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

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

</div>

---

**6.0版本**

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

---

**Handsome主题视频加载优化**

当页面加载后不载入视频,点击播放再加载视频
</div>

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

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

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

<div class="panel panel-default collapse-panel box-shadow-wrap-lg"><div class="panel-heading panel-collapse" data-toggle="collapse" data-target="#collapse-916f7b2779ac15a7b5953a603590b77b2" aria-expanded="true"><div class="accordion-toggle"><span>博客底部版权信息</span>
<i class="pull-right fontello icon-fw fontello-angle-right"></i>
</div>
</div>
<div class="panel-body collapse-panel-body">
<div id="collapse-916f7b2779ac15a7b5953a603590b77b2" class="collapse collapse-content"><p></p>

---

**博客底部版权信息**

**第一步**将以下CSS代码添加到`主题设置-开发者设置-自定义CSS`中

.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代码添加到`主题设置-开发者设置-博客底部左侧信息`中

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

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

<div class="panel panel-default collapse-panel box-shadow-wrap-lg"><div class="panel-heading panel-collapse" data-toggle="collapse" data-target="#collapse-d7b8440c67748c5224380cbf11d2f80121" aria-expanded="true"><div class="accordion-toggle"><span>文章黑幕“你知道得太多了”效果</span>
<i class="pull-right fontello icon-fw fontello-angle-right"></i>
</div>
</div>
<div class="panel-body collapse-panel-body">
<div id="collapse-d7b8440c67748c5224380cbf11d2f80121" class="collapse collapse-content"><p></p>

---

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

**效果**：<span class="heimu"  title="你知道的太多了">被你发现了咳咳</span>

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

<div class="hideContent">此处内容需要评论回复后（审核通过）方可阅读。</div>

**第二步**将以下代码填入`主题设置-开发者设置-自定义JavaScript`即可
<div class="hideContent">此处内容需要评论回复后（审核通过）方可阅读。</div>

**食用方法**

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

理论上其他HTML标签也是可以的
</div>

<div class="panel panel-default collapse-panel box-shadow-wrap-lg"><div class="panel-heading panel-collapse" data-toggle="collapse" data-target="#collapse-1c31bbb6f0c173e618674916bbe2f8bb48" aria-expanded="true"><div class="accordion-toggle"><span>页面、文章抖动害怕效果</span>
<i class="pull-right fontello icon-fw fontello-angle-right"></i>
</div>
</div>
<div class="panel-body collapse-panel-body">
<div id="collapse-1c31bbb6f0c173e618674916bbe2f8bb48" class="collapse collapse-content"><p></p>

---

**页面、文章抖动害怕效果**

**效果**：<a class="Pshake">2333</a>

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

<div class="hideContent">此处内容需要评论回复后（审核通过）方可阅读。</div>

**第二步**将以下代码填入`主题设置-开发者设置-自定义JavaScript`即可
<div class="hideContent">此处内容需要评论回复后（审核通过）方可阅读。</div>

**食用方法**

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

理论上其他HTML标签也是可以的
</div>

<div class="panel panel-default collapse-panel box-shadow-wrap-lg"><div class="panel-heading panel-collapse" data-toggle="collapse" data-target="#collapse-84fe6cbb990c5fd93cfa7678e299338b25" aria-expanded="true"><div class="accordion-toggle"><span>开启gzip压缩</span>
<i class="pull-right fontello icon-fw fontello-angle-right"></i>
</div>
</div>
<div class="panel-body collapse-panel-body">
<div id="collapse-84fe6cbb990c5fd93cfa7678e299338b25" class="collapse collapse-content"><p></p>

---

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

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

<div class="panel panel-default collapse-panel box-shadow-wrap-lg"><div class="panel-heading panel-collapse" data-toggle="collapse" data-target="#collapse-d4c5e2cdc5b88252c598f91a13ad048579" aria-expanded="true"><div class="accordion-toggle"><span>正文结束并添加版权声明</span>
<i class="pull-right fontello icon-fw fontello-angle-right"></i>
</div>
</div>
<div class="panel-body collapse-panel-body">
<div id="collapse-d4c5e2cdc5b88252c598f91a13ad048579" class="collapse collapse-content"><p></p>

---

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

<div class="panel panel-default collapse-panel box-shadow-wrap-lg"><div class="panel-heading panel-collapse" data-toggle="collapse" data-target="#collapse-ab205047d87faf62c472cdba7d6f42eb78" aria-expanded="true"><div class="accordion-toggle"><span>网站右侧滚动条美化</span>
<i class="pull-right fontello icon-fw fontello-angle-right"></i>
</div>
</div>
<div class="panel-body collapse-panel-body">
<div id="collapse-ab205047d87faf62c472cdba7d6f42eb78" class="collapse collapse-content"><p></p>

---

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

<div class="panel panel-default collapse-panel box-shadow-wrap-lg"><div class="panel-heading panel-collapse" data-toggle="collapse" data-target="#collapse-834c28ec98f4c4f0397ae862ea5cfcbb97" aria-expanded="true"><div class="accordion-toggle"><span>左侧栏彩色图标</span>
<i class="pull-right fontello icon-fw fontello-angle-right"></i>
</div>
</div>
<div class="panel-body collapse-panel-body">
<div id="collapse-834c28ec98f4c4f0397ae862ea5cfcbb97" class="collapse collapse-content"><p></p>

---

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

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

<div class="panel panel-default collapse-panel box-shadow-wrap-lg"><div class="panel-heading panel-collapse" data-toggle="collapse" data-target="#collapse-d8cf40f5b5449fcf8e45d0792f1c842a80" aria-expanded="true"><div class="accordion-toggle"><span>彩色标签云</span>
<i class="pull-right fontello icon-fw fontello-angle-right"></i>
</div>
</div>
<div class="panel-body collapse-panel-body">
<div id="collapse-d8cf40f5b5449fcf8e45d0792f1c842a80" class="collapse collapse-content"><p></p>

---

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

```JavaScript

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

<div class="panel panel-default collapse-panel box-shadow-wrap-lg"><div class="panel-heading panel-collapse" data-toggle="collapse" data-target="#collapse-019865e33963eff6610bb5701dc5ff0745" aria-expanded="true"><div class="accordion-toggle"><span>jsDelivr静态加速地址</span>
<i class="pull-right fontello icon-fw fontello-angle-right"></i>
</div>
</div>
<div class="panel-body collapse-panel-body">
<div id="collapse-019865e33963eff6610bb5701dc5ff0745" class="collapse collapse-content"><p></p>

---

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

**handsome8.1.0静态加速**：

<div class="hideContent">此处内容需要评论回复后（审核通过）方可阅读。</div>

**handsome8.0.0静态加速**：

<div class="hideContent">此处内容需要评论回复后（审核通过）方可阅读。</div>

**handsome7.3.1静态加速**：

<div class="hideContent">此处内容需要评论回复后（审核通过）方可阅读。</div>

---

<div class="panel panel-default collapse-panel box-shadow-wrap-lg"><div class="panel-heading panel-collapse" data-toggle="collapse" data-target="#collapse-5d63b2320345b66ed882d2462ee0ce9d14" aria-expanded="true"><div class="accordion-toggle"><span>文章标题美化，聚焦滑动条</span>
<i class="pull-right fontello icon-fw fontello-angle-right"></i>
</div>
</div>
<div class="panel-body collapse-panel-body">
<div id="collapse-5d63b2320345b66ed882d2462ee0ce9d14" class="collapse collapse-content"><p></p>
将以下css代码放到`主题后台-开发者设置-自定义css`即可

<div class="panel panel-default collapse-panel box-shadow-wrap-lg"><div class="panel-heading panel-collapse" data-toggle="collapse" data-target="#collapse-68b3489bd9daac9c6486054647fac31568" aria-expanded="true"><div class="accordion-toggle"><span>预留位置</span>
<i class="pull-right fontello icon-fw fontello-angle-right"></i>
</div>
</div>
<div class="panel-body collapse-panel-body">
<div id="collapse-68b3489bd9daac9c6486054647fac31568" class="collapse collapse-content"><p></p>
预留位

# 插件类

<div class="panel panel-default collapse-panel box-shadow-wrap-lg"><div class="panel-heading panel-collapse" data-toggle="collapse" data-target="#collapse-d4480a76c226fc8ded08f5bd4310a41b74" aria-expanded="true"><div class="accordion-toggle"><span>第三方登录插件</span>
<i class="pull-right fontello icon-fw fontello-angle-right"></i>
</div>
</div>
<div class="panel-body collapse-panel-body">
<div id="collapse-d4480a76c226fc8ded08f5bd4310a41b74" class="collapse collapse-content"><p></p>

---

```PHP
<?php GmOauth_Plugin::GmOauth(); ?>
```

<button class="btn m-b-xs btn-success  " onclick='window.open("https://github.com/AIYMC/typecho_Oauth","_blank")'>Github</button>

<div class="panel panel-default collapse-panel box-shadow-wrap-lg"><div class="panel-heading panel-collapse" data-toggle="collapse" data-target="#collapse-7369a52ba605c4dbc477e1be79855f4d37" aria-expanded="true"><div class="accordion-toggle"><span>预留位置</span>
<i class="pull-right fontello icon-fw fontello-angle-right"></i>
</div>
</div>
<div class="panel-body collapse-panel-body">
<div id="collapse-7369a52ba605c4dbc477e1be79855f4d37" class="collapse collapse-content"><p></p>
预留位

## 参考博客及其出处

## 自建jsDeliver静态加速地址教程

Airsado博客Handsome主题美化优化记录

Leave a Comment Cancel reply

20 comments

Airsado博客Handsome主题美化优化记录

关于朋友开发聊天网站让我测评一事

关于如何在不删除数据的前提下修改磁盘挂载文件路径

关于“删库塔”大漏洞的解决

关于利用Github上传文件到jsdelivr加速网站一事

关于如何使用WPS简单创建自己的PPT

关于朋友开发聊天网站让我测评一事

博客开端

关于某高一学生个人财产被掉包一事

关于利用Github上传文件到jsdelivr加速网站一事

Airsado博客Handsome主题美化优化记录