优化博客时对源码的增减和引入的额外插件
前言:我很菜,不想乱改主题代码,会造成许多不必要的麻烦,所以仅做了几处微小的改动,引入了几个必要的插件(真香),本文并没有什么参考价值。当前主题版本在短暂升级到 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 | nofollow: |
RSS 订阅
1 | npm i hexo-generator-feed --save |
在 \_config.yml
中配置
1 | feed: |
网站地图
1 | npm i hexo-generator-sitemap --save |
在 \_config.yml
中配置
1 | sitemap: |
源码修改
打开 \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 | #running-time |
引入 CSS
新建 ex.css
保存至 \themes\Butterfly\source\css\
1 | #page-header #site_title { |
引入 JS
新建 ex.js
保存至 \themes\Butterfly\source\js\
1 | var full_page = document.getElementsByClassName("full_page"); |
参考
小康博客 - 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 pngcwebp -near_lossless 0 -q 100 -m 6 -z 9 -mt -progress
for pngcwebp -q 90 -m 6 -z 6 -progress
for jpg
*水平有限,仅代表我的主观感受
然后使用脚本(bat、python 都有,可自行搜索),很快就转换完了所有图片,如果你想更简单的获得 WebP,也可以试试众所周知的万能在线转换网站 Convertio,是高质量的无损转换,但转换完体积不可控,甚至会增大
现在咱做完了所有优化,再去测个速。结果是比起优化前,得分有了不小的提升(桌面端达到了 97 分,移动端勉强从 47 分 -> 80 分)