前言:我很菜,不想乱改主题代码,会造成许多不必要的麻烦,所以仅做了几处微小的改动,引入了几个必要的插件(真香),本文并没有什么参考价值。当前主题版本在短暂升级到 3.1.1 后回退到了 3.0.1,因为一些样式冲突的原因,很大可能不会再升级了

插件安装

渲染器 pug、stylus

1
npm install hexo-renderer-pug hexo-renderer-stylus --save

本地搜索

1
npm i hexo-generator-search --save

字数统计

1
npm i hexo-wordcount --save

外链过滤器(获取安全,隐私和 SEO)

1
npm i hexo-filter-nofollow --save

\_config.yml 中配置

1
2
3
nofollow:
enable: true
field: site

RSS 订阅

1
npm i hexo-generator-feed --save

\_config.yml 中配置

1
2
3
4
5
6
7
8
9
10
11
12
feed:
type: atom
path: atom.xml
limit: 20
hub:
content: true
content_limit:
content_limit_delim: ' '
order_by: -date
icon:
autodiscovery: true
template:

网站地图

1
npm i hexo-generator-sitemap --save

\_config.yml 中配置

1
2
3
4
5
6
sitemap:
path: sitemap.xml
template: ./sitemap_template.xml
rel: false
tags: true
categories: true

源码修改

打开 \themes\Butterfly\source\css\var.styl

导航栏颜色修改

- $light-grey = #EEEEEE
+ $light-grey = #FF7878

字体大小

- $font-size = 14px
- $font-size = 18px

字体颜色

- $font-black = #4C4948
+ $font-black = #24292E
我所采取的 font-family: -apple-system, BlinkMacSystemFont, “Microsoft YaHei UI”, “Microsoft YaHei”, sans-serif
参考
PingFang SC 不应该作为移动端网页字体的首选项
如在你的平台上没有达到预期的样式,还请指出 (●’◡’●)

运行时间

打开 \themes\Butterfly\layout\includes\footer.pug,底部添加

1
2
3
4
#running-time
script.
setInterval(()=>{let create_time=Math.round(new Date(Date.UTC(2020,05,13,0,0,0)).getTime()/1000);let timestamp=Math.round((new Date().getTime()+8*60*60*1000)/1000);let second=timestamp-create_time;let time=new Array(0,0,0,0,0);if(second>=24*3600){time[1]=parseInt(second/(24*3600));second%=24*3600;}if(second>=3600){time[2]=parseInt(second/3600);second%=3600;}if(second>=60){time[3]=parseInt(second/60);second%=60;}if(second>0){time[4]=second;}currentTimeHtml='已在风雨中度过 '+time[1]+' 天 '+time[2]+' 时 '+time[3]+' 分 '+time[4]+' 秒';document.getElementById("running-time").innerHTML=currentTimeHtml;},1000);

参考
HCLonely Blog - Hexo博客美化

引入 CSS

新建 ex.css 保存至 \themes\Butterfly\source\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
#page-header #site_title {
color: #ff7878;
}/*博客标题颜色修改*/

#footer {
background: rgba(255, 255, 255, .8);
}/*页脚透明样式*/

#footer-wrap {
color: #00BFFF;
}/*页脚版权标签字体颜色*/

#footer-wrap a {
color: #00BFFF;
}/*页脚a标签(链接部分)字体颜色*/

.footer_custom_text {
color: #00BFFF;
}/*页脚自定义字段字体颜色*/

#page-header {
background-color: rgba(255, 255, 255, .2);
}/*文章页顶部图透明*/

#aside_content .card-widget, #recent-posts>.recent-post-item, .layout_page>div:first-child:not(.recent-posts), .layout_post>#page, .layout_post>#post, .read-mode .layout_post>#post{
background: rgba(255, 255, 255, .8);
}/*所有背景(包括首页卡片、文章页、页面页等)透明*/

#aside_content .card-widget, #recent-posts>.recent-post-item, .layout_page>div:first-child:not(.recent-posts), .layout_post>#page, .layout_post>#post, .read-mode .layout_post>#post {
background: var(--dark_bg_color);
}/*会导致所有卡片全透明,不采用*/

引入 JS

新建 ex.js 保存至 \themes\Butterfly\source\js\

1
2
3
4
var full_page = document.getElementsByClassName("full_page");
if (full_page.length != 0) {
full_page[0].style.background = "transparent";
}//去掉top_img

参考
小康博客 - Hexo 博客之 butterfly 主题优雅魔改系列
Lete乐特 ‘s Blog - Butterfly主题美化-无修改源码

加载速度类优化

最初秉持着“发原图啊魂淡”的固有思维,造成图片占比夸张,达 92% 左右,但本站路由线路差,实测下来毫无访问体验
于是想办法压缩图片,最初是使用在线网站 TinyPNG,效果很不错,一般来说够用了,但之后我用 PageSpeed Insights 测试网址性能,却只有可怜的不及格分数,其中主要问题和我的解决方法:

  • busuanzi 阻塞渲染 2000 ms –> 关闭不蒜子
  • 推迟加载屏幕外图片 –> 开启 lazyload
  • Google Fonts 占据 2/3 的资源传输大小 –> 关闭 Google Fonts 引用,以 font-family 取代之
  • 适当调整图片大小、对图片进行高效编码、采用新一代格式提供图片 –> 全站采用 WebP 压缩优化

说说最后一点,Google 看来是想推广自家的 WebP,由于 PageSpeed 分太低可能会影响网站 SEO,对访问者也不友好。而恰好,苹果在今年六月终于宣布支持这个十年前的图片格式,想了想,干脆试试(出大问题,才知道原来是 iOS 14+ 才支持,自测 iOS 13.5.1 全站白屏…苹果用户请见谅,已经改不回去了)

过程就不细讲了,下载预编译程序 libwebp-1.1.0-windows-x64.zip,加入环境变量,就可以在终端使用命令 cwebp 将图像压缩为 WebP 格式
只介绍下 cwebp 的常用参数
-lossless 对图像进行编码,不会造成任何损失
-near_lossless int 指定近乎无损的图像预处理级别
-q float 指定RGB通道的压缩系数
-z int 压缩模式
-m int 压缩方法
更详细的说明请参考 cwebp | WebP | Google Developers,我对不同的图片尝试了几种组合,能达到不错的压缩率,同时几乎不造成视觉差异,参数如下
cwebp -lossless -m 6 for png
cwebp -near_lossless 0 -q 100 -m 6 -z 9 -mt -progress for png
cwebp -q 90 -m 6 -z 6 -progress for jpg
*水平有限,仅代表我的主观感受
然后使用脚本(bat、python 都有,可自行搜索),很快就转换完了所有图片,如果你想更简单的获得 WebP,也可以试试众所周知的万能在线转换网站 Convertio,是高质量的无损转换,但转换完体积不可控,甚至会增大

现在咱做完了所有优化,再去测个速。结果是比起优化前,得分有了不小的提升(桌面端达到了 97 分,移动端勉强从 47 分 -> 80 分)