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

    npm install -g vercel
    
  • 安装完 vercel 后,输入 vercel login ,会让你选择登陆 vercel 的方式(选择的位置以 等待输入光标 为准, Enter 键确认,具体依情况选择),之后会跳出登入页面如图所示
    这里我使用的是邮箱登陆,会出现下图中的情况,这是 vercel 给你登陆邮箱发送了确认邮件,需要你在邮件中点击确认链接才能登陆邮箱登陆

  • 新建一个名为 jd_gh 文件夹 (名字自定义),进入到 jd_gh 文件夹中,新建一个 jd_gh.json 文件 (名字自定义)

    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? 这个提示,此处是提示输入你部署项目所需要的名称 (按喜好来定就行了,另外这里不支持特殊字符, - 号除外),其他的选项按下方图片提示来选择即可直接使用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 地址或自己绑定的域名

    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;
    }
    
更新于 阅读次数