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

近期将博客换成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 

    1
    2
    3
    4
    5
    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 文件并输入下方反代代码

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

  • 最后输入命令 vercel -A jd_gh.json --prod 来在 vercel 上部署

  • ++注意 what's your project's name? 这个提示，此处是提示输入你部署项目所需要的名称 (按喜好来定就行了，另外这里不支持特殊字符， - 号除外)，其他的选项按下方图片提示来选择即可++{.dot}直接使用ReverseSacle大佬的图

  • 最后，进入 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 地址或自己绑定的域名

    1
    2
    3
    4
    5
    6
    7
    8
    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行处

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    //将此代码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;
    }