Hexo笔记——解决Shoka主题评论系统表情加载失败的问题

作者 Aicsuk

2022年9月16日 16:32

近期将博客换成Hexo之后，最开始是部署在Github Pages上面，访问时一切正常。后面觉得Github Pages访问速度时快时慢，边重新部署在国内的华为云服务器上，这时问题就出来了，评论系统里面的表情图片正常情况下加载不出来，要搭梯子才行。表情加载失败

后来参考了ReverseSacle大佬关于[Shoka主题功能的一些补充介绍](Hexo-Shoka主题功能介绍补充点 | ReverseSacle-Blog = 逆转天平 = 执着过去的人,无法迈向未来)一文，并请教了ReverseSacle大佬后才了解到，shoka 主题使用的是 Valine-Admin 魔改评论系统，基本上都使用了 Jsdelivr 的资源，并由于国内的服务器无法访问资源才导致的表情加载失败。

为防止自己以后会忘记，特此记录下解决过程。

Vercel 反代 Jsdelivr 的加速链接

这一步，ReverseSacle大佬的文章中是以 Windows10 系统为例，但我习惯使用 Linux 系统，所以此次我使用 Centos 8.2 系统为例。

安装 Node.js

yum install update
yum install nodejs
yum install npm
npm install -g n
n lts

安装 vercel
1
npm install -g vercel
安装完 vercel 后，输入 vercel login ，会让你选择登陆 vercel 的方式（选择的位置以 等待输入光标 为准， Enter 键确认，具体依情况选择)，之后会跳出登入页面
这里我使用的是邮箱登陆，会出现下图中的情况，这是 vercel 给你登陆邮箱发送了确认邮件，需要你在邮件中点击确认链接才能登陆
新建一个名为 jd_gh 文件夹 (名字自定义)，进入到 jd_gh 文件夹中，新建一个 jd_gh.json 文件 (名字自定义)
1
2
3
mkdir jd_gh
cd jd_gh
touch jd_gh.json

用 文本编辑器 打开 jd_gh.json 文件并输入下方反代代码

{
        "version": 2,
        "routes": [
                {"src": "/(.*)","dest": "https://cdn.jsdelivr.net/$1"}
                ]
}

最后输入命令 vercel -A jd_gh.json --prod 来在 vercel 上部署
++注意 what's your project's name? 这个提示，此处是提示输入你部署项目所需要的名称 (按喜好来定就行了，另外这里不支持特殊字符， - 号除外)，其他的选项按下方图片提示来选择即可++{.dot}
最后，进入 Vercel 官网，登入后可以看到刚刚创建的项目，点击项目，进入后记录下 DOMAINS 处的链接，也可以绑定自己的域名使用

解决评论区表情图片加载失败问题

在 MiniValine (Github) 下载 MiniValine.min.js 文件，并将 MiniValine.min.js 文件放入到 hexo 根目录的 ./themes/shoka/source/js 文件夹中

打开 MiniValine.min.js 文件，找到 VERSION="4.2.2" 这一项，将 t.EUrl 后链接中的XXX替换为刚刚记录的 DOMAINS 地址或自己绑定的域名

t.VERSION = "4.2.2",
t.GBUrl = "https://gravatar.loli.net/avatar/",
t.EUrl = ["https://xxxx/npm/alus@latest", 
          "https://xxxx/gh/MiniValine/qq@master", 
          "https://xxxx/gh/MiniValine/Bilibilis@master",
          "https://xxxx/gh/MiniValine/tieba@master", 
          "https://xxxx/gh/MiniValine/twemoji@master",
          "https://xxxx/gh/MiniValine/weibo@master"]

打开 hexo 根目录 ./themes/shoka/_config.yml 文件，滑倒最后，找到 valine 元素，将其参数设为 https://博客域名/js/MiniValine.min.js

最后修改 ./themes/shoka/source/js/_app/utils.js文件第26~35行处

//将此代码if(str.indexOf('npm')>-1||str.indexOf('gh')>-1||str.indexOf('combine')>-1)
//拆分为下面的代码
  if(str.indexOf('npm')>-1||str.indexOf('combine')>-1)
     return "https://cdn.jsdelivr.net/" + str

  if(str.indexOf('js')>-1)
    return str  
    
  if(str.indexOf('gh')>-1)
    return "https://cdn.jsdelivr.net/" + str
    
//代码示例
const assetUrl = function(asset, type) {
  var str = CONFIG[asset][type]
  
  if(str.indexOf('npm')>-1||str.indexOf('combine')>-1)
     return "https://cdn.jsdelivr.net/" + str

  if(str.indexOf('js')>-1)
    return str  
    
  if(str.indexOf('gh')>-1)
    return "https://cdn.jsdelivr.net/" + str

  return statics + str;
}

普通视图

Vercel 反代 Jsdelivr 的加速链接

解决评论区表情图片加载失败问题