博客优化总结

前言

最近折腾了两周 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) {
  fetch("https://v2.jinrishici.com/one.json")
    .then(function (res) {
      return res.json();
    })
    .then(function (data) {
      var hitokoto = document.getElementById("hitokotoOrJinrishici");
      var hitokotoOrJinrishici =
        data.data.content +
        "<br>" +
        "&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;" +
        "——" +
        data.data.origin.dynasty +
        "·" +
        data.data.origin.author +
        "<br>" +
        "&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;" +
        "《" +
        data.data.origin.title +
        "》";
      var typed = new Typed("#hitokotoOrJinrishici", {
        strings: [hitokotoOrJinrishici],
        startDelay: 300,
        typeSpeed: 100,
      });
    })
    .catch(function (err) {
      console.error(err);
    });
} else {
  fetch("https://v1.hitokoto.cn")
    .then(function (res) {
      return res.json();
    })
    .then(function (data) {
      var hitokoto = document.getElementById("hitokotoOrJinrishici");
      var hitokotoOrJinrishici =
        data.hitokoto +
        "<br>" +
        "&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;" +
        "——  By " +
        data.from;
      var typed = new Typed("#hitokotoOrJinrishici", {
        strings: [hitokotoOrJinrishici],
        startDelay: 300,
        typeSpeed: 100,
      });
    })
    .catch(function (err) {
      console.error(err);
    });
}

这部分代码设置了个Math.random() < 0.5 ，让一言和今日诗词各 50％几率出现。

部署

在themes/hexo-theme-matery/layout/_partial/ 路径下，找到bg-cover-content.ejs 文件，把<%- ‘’ %>换成<%- ‘’ %>，然后引入 js

<script src="https://cdn.jsdelivr.net/gh/olig48/olig48.github.io@latest/js/juzi.js"></script>
<script src="https://npm.elemecdn.com/typed.js@2.0.11"></script>

再把 matery 主题目录里_config.yml 中的 subtitle 关了，就 OK 了。