hexo优化及总结

前言

最近折腾了两周 hexo 博客，期间换了一个主题，加了很多 js 特效，虽然最后为了优化博客速度都关掉了。更重要的是，为了折腾博客，我的期中数分都没复（yu）习（xi）。到此为止，我已经折腾不动了，所以做一次优化总结，就开始认真写博客了（能写几篇全看心情😂

matery 优化

matery 的优化已经很多优秀的教程了，我就不再重复造轮子了。

官网的教程：

https://github.com/blinkfox/hexo-theme-matery

小戈の生活馆：

https://lovelijunyi.gitee.io/posts/b8ec.html

手机端引用 BUG

如果你在手机端看比较长的引用，就会发现这种 BUG，原因就是 css 设置中 quote 没有设置换行，所以造成这种页面被拉宽的情况。

解决方案：

打开 matery.css，搜索blockquote，在里面添加word-break: break-all; ，强制换行

图片优化

去掉随机 API 图片

原本为了增加博客丰富度，把文章封面的图片设置成了随机 API，好处就是每次打开都是新的图片，缺点就是 API 响应很慢，普遍都是 1s 左右，所以我用 python 爬取 API 100 张动漫图片，然后放到图床上，博客打开速度优化了很多。

压缩图片

虽然响应速度快了很多，但是每张图片都是上百 kb，压缩一下可以更大程度优化。这里分享几个图片压缩的网站。

https://www.imgbot.ai/compress-image

https://onlineconvertfree.com/zh/convert-format/jpg-to-jpeg/

https://www.picdiet.com/zh-cn

其中把图片从 jpg 压缩成 jpeg 可以减少一般体积，大大提升网站速度

另外如果有 GitHub 学生礼包，并且用 GitHub 当图床的人，可以使用imgbot 压缩仓库里图片

压缩代码

压缩完图片，就轮到压缩代码了，这里选择方案比较多，但是配合 travis-ci，我选择了使用 gulp 压缩。

参考链接： https://www.voidking.com/dev-hexo-gulp/
https://alderaan.xyz/2020/05/07/hexo-compress/

加入打字机效果今日诗词和一言

这个部分代码是我自己整理出来的，水平有限，如果有可以优化的地方可以给我留言。

混合今日诗词和一言 API 的代码

if (Math.random() < 0.5)