优化博客时对源码的增减和引入的额外插件

前言：我很菜，不想乱改主题代码，会造成许多不必要的麻烦，~~所以仅做了几处微小的改动，引入了几个必要的插件~~（真香），本文并没有什么参考价值。当前主题版本在短暂升级到 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 中配置

feed:
  type: atom
  path: atom.xml
  limit: 20
  hub:
  content: true
  content_limit:
  content_limit_delim: ' '
  order_by: -date
  icon:
  autodiscovery: true
  template:

源码修改

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

导航栏颜色修改

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

字体颜色

- $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，底部添加

#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\

#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\

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 分）