Hexo技巧与经验插件篇(二)

2017-10-04

tips

cdn, hexo, 性能

一点点记录hexo的优化了,因为小优化也很多,就慢慢更新吧.

这篇文章于2019年重写, 用来记录一些Hexo相关的非刚需插件和改动. (以更新时间为准)

0x00. live2d收入一只萌宠

1. 安装配置

这大概是18年开始流行的, 因为我的小站ban掉了百毒大部分的爬虫爬取, 所以访问的同学一般要么来自Google, 要么可能就比较孤单了, 所以我也决定给网站一只守家的萌宠, 首先致敬开源的同学.

这是有预览图的可选模型汇总. 除开过于中二和不符合喜好的角度来说… (这是模型git地址)

末尾的两只猫可能是最佳的选择了….(强烈需要一只做的好的汪…)
haruto 和koharu 两个水手是人物里不错的.

然后先安装live2d 模块, 再安装一键化的模型

#1.安装live2d
npm install hexo-helper-live2d --save

#2.安装喜好的模型
npm install --save live2d-widget-model-haruto

完成后就修改_config.yml 使其生效, 具体需要复制的内容参考官方readme, 里面有一些长宽高之类的参数可以调节.

需要注意的是移动端浏览时的效果, 所以本地测试之后也要部署到server看看移动端.

2. CDN加速

这里可以直接使用官方提供的, 也可以使用我们自己的, 但是自己上传的静态文件引用的时候并不是那么直接…

# Live2D 以下是我的配置
live2d:
  enable: true
  scriptFrom: jsdelivr # jsdelivr-CDN,还可选unpkg
  # scriptFrom: https://cdn.jsdelivr.net/npm/live2d-widget@3.x/lib/L2Dwidget.min.js # 自定义-cdn (待补)
  pluginRootPath: live2dw/ # 插件在站点上的根目录(相对路径)
  pluginJsPath: lib/ # 脚本文件相对与插件根目录路径
  pluginModelPath: assets/ # 模型文件相对与插件根目录路径
  tagMode: false # 标签模式, 是否仅替换 live2d tag标签而非插入到所有页面中
  debug: false
  model:
    use: https://cdn.jsdelivr.net/npm/live2d-widget-model-wanko@1.0.5/assets/wanko.model.json # CDN,但是这里是个json
    #use: live2d-widget-model-wanko # npm-module package name

看起来似乎挺好的, 但是实际体验是jsdelivr 的加载速度可能比服务端本地去读还要慢….. 所以还是建议换成自己七牛的CDN加速它, 待我研究一下怎样使用才对

0x01. CDN加速静态文件

图片/音视频这种就不说了, 使用七牛或类似的图床就行, 这里主要是说一下网页加载里耗时的其他静态文件. (比如JS/CSS/XML), 首先如果你的hexo主题自带允许CDN配置, 那就非常简单了, 自己上传一下然后在主题配置文件里配置替换就行. 我这说的是未原生支持的一些主题, 考虑采用hexo-cdnify插件实现.

这里最后还是放弃了, 这个插件会用了, 但是有个蛋疼的问题在于, https 在很多浏览器(chrome)不允许引入http 的静态文件比如js/css , 但是我们七牛免费CDN只有http的, https要收费. 考虑两个思路:

全部换成https . 每月CDN开销10元+, 且需要防各种其他人引用… (暂时不考虑)
把核心的JS/CSS 文件换成开源的https的国内源, 比如七牛赞助的一个仓库, 但是它有不少主题自带的静态文件缺失, 而这个主题目前不支持自定义的方式去修改, 要改就是全局改了, 后续可能需要DIY一下..

0x02. 修改主题

这里记录一下对主题的修改, 不然主题更新的时候会比较蛋疼, 做好备注后升级就很简单了:

记录修改了哪些地方, 一般文件不会多, 代码也不会超过百行, 到时候手动和新版合并一下
备份静态文件和_config.yml 文件, 到时候合并替换. (新版可能有些新配置, 不建议直接覆盖)

1. 页脚修改

<!-- theme/layout/_partials/footer.* -->
<footer id="footer">
  <div class="footer-left">
    <%= __('footer.copyright') %> &copy; <%= new Date().getFullYear() %> <%= config.author || config.title %>
  </div>
  <div class="footer-right">
    <nav>
      <ul>
        <% for (var i in theme.nav) { %> 
          <li><a href="<%- url_for(theme.nav[i]) %>"><%= __('nav.'+i).replace("nav.", "") %></a></li>
        <% } %>
      </ul>
    </nav>
  </div>
</footer>

2. 静态资源改为CDN引用

这里修改比较多, 所以建议fork原主题文件, 方便后续合并, 不然手动合并可能要崩溃的…以cactus主题为例, 我们主要是替换它公有的CSS/JS 库为CDN地址, 这些源文件主要在source/lib下, 那我们主要就是找到哪些文件引用了它们. 我这里直接把文件夹导入到vscode全局搜索了.. (感谢staticfile-CDN提供开源支持, 不过因为它一直是 HTTP1, 换成 jsdelivr 全部, 最早支持HTTP3, 点赞)

建议: 先实际通过F12查看一下哪些文件耗时多, 优先替换.

a. 替换 css/js 文件

script.ejs (layout\_partial\scripts.ejs)

<!-- jquery 修改前1 -->
<%- js('lib/jquery/jquery.min') %>
<%- js('lib/justified-gallery/js/jquery.justifiedGallery.min.js') %>

https://cdn.jsdelivr.net/npm
<!-- jquery 修改后1 -->
<%- js('https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js') %>
<%- js('https://cdn.jsdelivr.net/npm/justifiedGallery@3.8.1/dist/js/jquery.justifiedGallery.min.js') %>

<!-- clipboard 修改前2 -->
<% if (is_post()){ %>
  <%- js('lib/clipboard/clipboard.min') %>

<!-- clipboard 修改后2-->
<% if (is_post()){ %>
  <%- js('https://cdn.jsdelivr.net/npm/clipboard@2.0.10/dist/clipboard.min.js') %>

style.ejs (layout\_partial\styles.ejs)

<!-- styles修改前 -->
<%- css('lib/font-awesome/css/all.min.css') %>
<%- css('lib/justified-gallery/css/justifiedGallery.min.css') %>

<!-- styles修改后 -->
https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@5.7.1/css/all.min.css
<%- css('https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.1.1/css/all.min.css') %>
<%- css('https://cdn.jsdelivr.net/npm/justifiedGallery@3.8.1/dist/css/justifiedGallery.min.css') %>

rtl.style (source/css/rtl.styl)

@font-face
  font-family: Vazir
  src: url('../lib/vazir-font/Vazir.eot')
  src: url('../lib/vazir-font/Vazir.eot?#iefix') format('embedded-opentype'),
       url('../lib/vazir-font/Vazir.woff2') format('woff2'),
       url('../lib/vazir-font/Vazir.woff') format('woff'),
       url('../lib/vazir-font/Vazir.ttf') format('truetype')
  font-weight: normal

这里字体还是不好替换, 主要是两个问题:

国内CDN没有收入此字体, 可以自行尝试提交PR…
全网都找不到合适的CDN加速…例如关键的meslo-LG/MesloLGS-Regular.ttf字体..
海外CDN虽然有, 但是访问速度可能还不如相对路径访问快, 而且需要硬修改很多的css引用处, 容易出错

备注: CDN引用库版本最好与原本引用的版本一致, 以免有一些报错需要自己排查.

B. 替换字体文件

实际测试里大家可以发现, 从google 引用的字体库会非常耗时且慢, 所以替换字体比替换静态文件在国内要重要的多, 也要麻烦不少, 我使用的是参考资料提到的反代模式的CDN, 文档写的很好了, 看看就明白, 关键在于我们要找到是怎么引入的这个字体的, 这个比较麻烦, 如果全文搜索找不到任何google /googleapi /fonts.google 相关自样, 那考虑如下可能:

主题本身没有使用任何google字体库, 只是Chrome的字体机制去自动加载了 (使用firefox/edge测试, 看看f12有没有加载google字体就知道了)
Chrome的插件或设置强制启动了某些页面下使用自身字体库 (待确认如何解决)

除开Chrome 自身字体加载的问题, 先说一下如何替换主题lib 的字体, 因为CDN很多可能没有缓存, 所以建议自己用七牛的源站镜像, 然后直接替换原本引用:

_fonts.styl

@font-face
  font-style: normal
  font-family: "Meslo LG"
  src: local("Meslo LG S"), url("../lib/meslo-LG/MesloLGS-Regular.ttf") format("truetype")
  // 替换最后一行为
  src: local("Meslo LG S"), url("//cdnsite/lib/meslo-LG/MesloLGS-Regular.ttf") format("truetype")

但是这里实测会引入一个很蛋疼的跨域问题, 关于跨域什么时候会触发, 这里我先不说…之后再看看如何解决. (以及字体文件是否允许http混入)

C. 替换图片

这里主要就是几个自带的logo, 但是因为原图没有压缩, 所以也挺大, 我们压缩一下再用CDN替换(一般都能压缩10倍左右大小.), ico文件一般不适合直接压缩, 很简单的做法就是用压缩后的png重新转一下ico就行了.

但是要注意, http 下替换只能换logo.png. 而网站标签图标favicon这种不能替换, 否则仍然会被浏览器直接blocked掉, 关于全站完全升级到HTTPS, 暂时七牛无免费额度的情况应该是比较麻烦的…..

而如果任何一个http 资源的引入, 都会使得当前页面失去安全标识… 所以还是尽量压缩文件使用源站的相对路径吧..

D. 修改默认disqus加载方式 (重要 + 更新)

这里是开启 disqus 主题性能优化的大重点, 考虑到修改的复杂性和相关问题, 先列一下参考文章和库, 之后单独写一篇文章, 先简要说一下问题难点和改造方案:

难点
1. 虽然 disqus 可以异步加载不阻塞渲染主线程, 但是不知道为何 mermaid.js 就是会等它资源加载完才展示, 所以流程图总是很慢才显示
2. 参考常见的屏蔽/加载 disqus 方案, 多是选择 Image + Promise 模式, 这种模式不存在跨域 (CROS) 问题, 但是性能不好, 无法终止请求, 浏览器会一直转圈, 控制台还会输出错误 (虽然不影响使用)
3. 使用常见的 fetch()/XHR 方式, 可以很容易/优雅的超时终止HTTP请求, 但是访问 disqus.com 下任何资源都会被禁止 (CROS报错)
方案
1. 采用 fetch() 作为核心 API, 且不需访问图片, 可以访问更小的 HTTP 资源 API
2. 重点在于如何处理 CORS 的报错问题, 查阅 Mozilla 的文档可知 CORS 报错特意被隐藏无法直接捕获细节.
3. 那么逆向思维, 我们通过捕获超时抛出的 AbortError , 则可以判断非此类型错误的请求都是可访问 Disqus 的用户
4. 于是容易想到, 在异常处理中进行 Disqus 的加载 (虽然在异常中做业务操作也不够合理, 但是已经尽可能对用户无感知且性能是最好的了)

Disqus 在主题中应用的原代码, 这里在查阅前端文章/文档以及讨论后, 使用了 fetch() 一个很快能返回结果的 api 来判断是否加载 disqus, 应该是全网原创, 绝大部分做法都是 image + promise 的写法, 性能和用户友好度都要弱得多, 下面是完整可用的代码: (欢迎反馈更好的写法)

<!-- Disqus Comments -->
<% if (theme.disqus.enabled && theme.disqus.shortname){ %>
   <script type="text/javascript">
     const ac = new AbortController();
     const { signal } = ac;
     var check_url = "https://disqus.com/api/3.0/forumCategories/details";
     var disqus_shortname = '<%= theme.disqus.shortname %>';

     fetch(check_url, { signal })
       .then(response => {
         if (!response.ok) { // 此处 response 没有值, 浏览器是返回403了, 有些奇怪
           console.log('http error code', response.status)
         }
       })
       .catch(e => {
         if (e.name == 'AbortError') {
           console.log('Over 800ms, stop loading Disqus')
         } else {
           console.log('catch cors!')
           var dsq = document.createElement('script');
           dsq.type = 'text/javascript';
           dsq.async = true;
           dsq.src = '//' + disqus_shortname + '.disqus.com/<% if (page.comments){ %>embed.js<% } else { %>count.js<% } %>';
           (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);
         }
       });

     // 800ms then abort fetch
     setTimeout(() => ac.abort(), 800);
   </script>
   <% } %>

这里也附一下常规的思路做法, 例如 DisqusJS 是这样的思路, 尝试访问一个 .ico 图片, 来判断是否可达: (这也是一个可用的版本, 但弊端在于请求无法中断, promise 没有提供 abort 这样的方法, 只能在后台记在, 浏览器就会一直转圈, 而且必定会在 console 报个错最后)

<!-- Disqus Comments -->
<% if (theme.disqus.enabled && theme.disqus.shortname){ %>
   <script type="text/javascript">
     var disqus_shortname = '<%= theme.disqus.shortname %>';

     // 校验图片是不是超时，从而判断加不加载对应的js
     const runcheck = (domain) => {
       return new Promise((resolve, reject) => {
         const img = new Image;
         // 处理加载超时
         const timeout = setTimeout(() => {
           img.onerror = img.onload = null;
           reject();
         }, 1500);

         img.onerror = () => {
           clearTimeout(timeout);
           reject();
         }

         img.onload = () => {
           clearTimeout(timeout);
           resolve();
         }

         img.src = `https://${domain}/favicon.ico?${+(new Date)}=${+(new Date)}`;
       })
     }

     setTimeout(() => {
       runcheck('disqus.com').then(() => {
         var dsq = document.createElement('script');
         dsq.type = 'text/javascript';
         dsq.async = true;
         dsq.src = '//' + disqus_shortname + '.disqus.com/<% if (page.comments){ %>embed.js<% } else { %>count.js<% } %>';
         (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);
       }).catch(() => {
         console.log('Over 1.5s, stop loading Disqus')
       })
     }, 1500)
   </script>
   <% } %>

如果想让国内用户也能访问 disqus 的评论区, 也就是做一个代理, 定时去拉取远端评论, 也有前辈做了单独的开源组件, 详见下 (比较麻烦)

DisqusJS - 一个超轻量级的 DISQUS「评论基础模式」的实现

E. 反向代理使全站HTTPS化 (不推荐)

简单可以参考这篇, 但是我稍微想了一下, 发现这样还是并不可取. 因为这等于把CDN 的效果给废了, 所有静态图片请求又回到了我自己的server(Nginx)上, 然后再反代到七牛的CDN….如果服务器在海外, 那七牛CDN返回的就近节点就更尴尬了…

所以总体来看这个方法还是不是很合适..

未完待续

0x03. 让主题支持mermaid流程图

大家应该都知道, markdown 本身的语法是比较薄弱的, 基本只是支持纯文本, 但是有些比较特殊的样式, 比如数学公式, 流程图等原生是并不支持的, 但是由于本质转换为html的特性, 它可以通过一些js插件来很好的实现这种效果(甚至支持Echarts)

今天我就说一下实际做展示和写blog最常用的一个–Mermaid的支持, 有了它就可以替代常见的各种流程图了, 选它的理由很简单:

语法相对最简单, 除了官方文档, 在我这篇讲mermaid语法的文章有举例, 也可以看看实际效果
支持的图表很多, UI也是个人觉得最不错的
最通用

下面就以当前主题cactus为例, 说一下如何让它快速支持mermaid 语法 (借助hexo-filter-mermaid-diagrams插件)

# 在hexo的根目录下. 安装完后确认node_modules下有
npm install hexo-filter-mermaid-diagrams

# 然后修改主题的_config.yml文件, 加入以下配置
# mermaid chart
mermaid:
  enable: true
  version: "8.4.2" # Set to the latest version
  options:  # find more api options from https://github.com/knsv/mermaid/blob/master/src/mermaidAPI.js
    #startOnload: true  // default true

其实默认就只需要配一个版本参数, 参考Mermaid官方最新版本号即可, 注意UML图的支持有点bug, 参考插件说明, 我不需要它就没管了, 然后修改一下主题的foot模板, 一般在themes/cactus/layout/_partial 下的footer.xx尾部, 可能是swig/ejs/pug, 参考插件文档都有对应, 再次感谢社区的帮助, 这里有多种主题, 你可以根据背景色调整, 其他可调项也可参考Mermaid文档, 下面是我给出ejs的模板参考: (unpkg 速度不佳且协议低)

<% if (theme.mermaid.enable) { %>
  <script src='https://cdn.jsdelivr.net/npm/mermaid@<%= theme.mermaid.version %>/dist/mermaid.min.js'></script>
  <script>
    if (window.mermaid) {
      mermaid.initialize({
        startOnLoad:true,  
        theme: 'default',
        "flowchart": {
          curve: 'basis'
      }
      });
    }
  </script>
<% } %>

大功告成, 你就可以试着插入mermaid的代码片段了, 不过需要注意的是最新的图Typora或者其他渲染器可能还不支持. 静待更新.

更新:

Hexo上的居中实现, 只需要简单添加css即可, 很简单, 如果有适配问题, 请切换一个浏览器, 别急着下结论, 不同主题稍有区别, 但是本质不大:

修改 mermaid 使其居中显示
修改table显示, 使其均匀分散 (源自PR145的不当修改)

// 样式文件1: cactus\source\css\style.styl

.max-width 70rem // 默认65, 文章页最大宽度 (自己调整)

// Add for mermaid.js
.mermaid
  text-align: center

// 样式文件2: cactus\source\css\_extend.styl
  table
    width: 100%
    border-collapse: collapse
    text-align: left
    font-size: $font-size - 2px
    overflow: auto
    display: table  // block修改为table

0x04. 让主题支持图片点击放大

简单说就是有些主题的图片不能点击放大, 导致有些细节和文字看不清, 而且多个图片也不能↔切换来查看, 不过看到好心的Githuber提示, 也有现成的hexo插件可以实现这个效果, github地址

# 先安装
npm install --save hexo-light-gallery

# 然后在hexo根目录下的配置文件里加入下面这一行就行, 很简单
# 然后我们可以启用一个全屏插件让效果更好一些(可选)
# 比如增强后有放大/缩小按钮, 可以自动播放图片, 显示列表等
lightgallery:
  plugins:
    lg-pager: /js/lg-pager.min.js

不过目前插件的启用有报错导致没有生效, 待我确认一下情况再更新.

0x05. 隐藏和加密文章

早些时候 Hexo 只用来写技术博文, 其实没有多少这类需要, 不过后续随着文章变多或者其他非技术文章引入, 就非常有必要有一个加密 + 隐藏的插件了, 也就是下面说的 hexo-encrypt 和 hexo-hide-post

需要注意的是, 加密插件在最新版已经需要站点 HTTPS 化, 否则会无法解密, 暂时没看到很好的解决方法, 可以先尝试退化到低版本(但是似乎有别的bug, 慎重测试)

参考资料: