普通视图

发现新文章,点击刷新页面。
昨天以前首页

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

    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;
    }
❌
❌