jsDelivr和minivaline一起使用

这个问题只有在使用matery1.31及以下版本时会遇到. 作者虽然在主题的_config.yml中添加了minivaline这个js, 但是当同时启用jsDelivr时会发生地址拼接的错误, 导致跟评论相关的所有内容全部显示不出来. 本人是前端小白, 没有前端基础, 纯靠自己摸索, 所以本文是站在前端小白的视角去分析问题并解决的. 想看解决方法的可以直接看最后的修复部分.

现象

直接去看HTML, 发现minivaline的script所用的地址变成了jsDelivr设置的地址 + https://cdn.jsdelivr.net/npm/minivaline/dist/MiniValine.min.js. 直接就出现了地址拼接的错误.

推测

首先, 这个问题是出在matery里面的, 因为先在matery的配置文件进行修改, 启用jsDelivr后才出现的bug, 那么问题的范围一定在matery中. 并且minivaline也是matery新加入的插件, 不可能与Hexo框架本身有关.

文件树分析

直接看一下blog\themes\hexo-theme-matery下的文件结构:

│ _config.yml
│
├─languages
│
├─layout
│ │
│ ├─_partial
│ └─_widget
│
└─source
├─css
├─js
├─libs
└─medias

文件夹 / 文件名	作用
_config.yml	主题配置文件
languages	不同语言文字的配置文件
layout	除去文件夹外, 存放的是page的配置
_partial	页面细节的各种配置
_widget	页面添加的组件的配置
source	额外库的源文件
css	额外库的css
libs	额外库的源码
medias	图片和其他媒体流

缩小范围

languages存放的是不同语言所对应博客文字的翻译, 嫌疑可以排除, layout肯定就是博客的布局, 因为涉及到显示位置, 可以从这里先开刀, 再慢慢找到问题, source里面有各种前端本地配置, 最后肯定要对它进行修改.

既然问题出在评论上, 就先从layout\contact.ejs中找关于minivaline的部分.

<% if (theme.valine && theme.valine.enable) { %>
<%- partial('_partial/valine') %>
<% } %>

<% if (theme.minivaline && theme.minivaline.enable) { %>
<%- partial('_partial/minivaline') %>
<% } %>

果然能够找到关于valine和minivaline的对应代码. 它指向了_partial这个文件夹. 找到_partial\minivaline.ejs, 就能找到插入script的代码.

<script src="<%- theme.jsDelivr.url %><%- url_for(theme.libs.js.minivaline) %>"></script>

参照一下-partial\valine.ejs的同样对应的代码.

<script src="<%- theme.jsDelivr.url %><%- url_for(theme.libs.js.valine) %>"></script>

证明这部分没有问题. 那一定是里面配置的theme.jsDelivr.url或者后半部分的url_for(theme.libs.js.minivaline)出了问题.

原因

按照推测部分提供的线索去找, script里对应的部分一定是一个路径. 在主题下的_config.yml文件中, 找到libs.js端, 里面有对minivaline的引用, 会发现它是一个url而不是一个本地路径.

libs:
  # ...
  js: 
    # ...
    valine: /libs/valine/Valine.min.js
    minivaline: https://cdn.jsdelivr.net/npm/minivaline/dist/MiniValine.min.js

valine和minivaline不一样.

修复

用最笨的办法, 假设你开了jsDelivr, theme.jsDelivr.url的值肯定是你设置的github.io的地址, url_for(theme.libs.js.minivaline)本来应该是上传到github之后的库的地址, 但是现在它的值是一个url, 只需要把前半部分删掉就能保证在开启jsDelivr时不出错了.

即更改_partial\minivaline.ejs中原来有问题的部分为:

<script src="<%- url_for(theme.libs.js.minivaline) %>"></script>

但是要考虑复用性, 总不能以后不使用jsDelivr后再把它换回来吧. 所以最好更改在主题下的_config.yml文件为本地文件路径:

minivaline: /libs/minivaline/MiniValine.min.js

在主题下source\libs下是没有minivaline这个库的, 但是却有valine. 所以只要搞一份这个库的js过来, 放到指定目录再部署, jsDelivr就能按照自己github上的文件地址访问到了. 从博客目录\node_modules\minivaline\dist下复制MiniValine.min.js到主题目录下的source\libs\minivaline中, 重新编译一遍, 再部署到github上, 就大功告成了.