虽然已经吹过很多次了不过还是要再吹一下

# 先有 Shoka 后有天!

# 前情提要

Shoka 本身是一个很完美的 Hexo 主题,MiniValine 也是一个足够使用的评论系统,不过,常说 Valine 防君子不防小人,这个评论系统的弊端出于安全问题的欠妥,其可定制和功能也稍显不足。

大约在撰写本文几天前,也就是 2022 年 3 月 3 日,本 Blog 遭到大量灌水式评论轰炸。临时开通了 Akismet 仍然无法避免在 LeanCloud 容器休眠期间的空窗期防御、以及大量评论的写入占用数据库。

似乎解决这种问题的唯一方法是启用登录评论 or 审核评论。

期间也尝试过 Valine-Admin,但,你懂的,这在机器面前实在无能为力。

# 呜呜怎么办

一个很显然的解决方式出现了:更换评论系统。

但是但是,Shoka 唯一支持的评论系统就是 MiniValine 诶,怎么办呢?

当然是让它变成你的形状(bushi

实际上,在 Shoka 主题的 Pull requests 中已经有大佬开发了 Gitalk 的支持。

所以所以,只需要 Gitalk 的小朋友可以去试试啦。

对于我来说 Gitalk 还是有些缺点的,我还是选择 Waline~

强大的安全性(内容校验、防灌水、保护敏感数据等)以及登陆支持,使 Waline 成为了完善本 Blog 的最优选。

那么,开始叭!

# Vercel 部署

这里默认你已经有 MiniValine 的基础,设置了 LeanCloud 数据库。

首先需要在 Vercel 上进行服务端的部署,这个步骤的具体在 Waline 的官网已经介绍得很详细了,只要填入相同的 APP ID, APP KEY, Master Key 就能使用你的 LeanCloud 数据库,Waline 评论的数据结构与 MiniValine 几乎相同,所以并不需要繁复的迁移。

依随官网的教程部署完成后,你应该会得到一条以 .vercel.app 为结尾的 URL,记下它吧。Screenshot 2022-03-06 at 5.44.39 PM

记得访问 serverURL/ui/register 注册,第一个注册的人会被设定为管理员。

总之记下一条 URL,然后我们来到 Hexo 的修改。

# Shoka 引入

# 修改主题的_config.yml

首先把你原先的的 Valine 配置给注释掉 or 删掉,怎么样都行。

在下面添加 Waline 的配置,这里分享一下我的配置:

Waline配置
waline:
  serverURL: https://xxxxxxx.vercel.app/    # 填入刚刚得到的后端 URL(必填)
  visitor: true   # 文章访问量统计
  lang: zh-CN     # 语言,默认 zh-CN
  login: enable   # 登录模式状态,默认值 enable,force 可以强制登录
  wordLimit: 0    # 评论字数限制,0 为不限制,默认值为 0
  pageSize: 10    # 评论列表分页,数字为条数,默认值 10
  highlight: true # 代码高亮,默认 true
  meta: ['nick', 'mail', 'link'] # 评论者相关属性,默认 ['nick', 'mail', 'link']
  requiredMeta: ['nick', 'mail'] #设置评论者属性必填项,默认 [](即匿名)
  placeholder: '捧ぐる祈りの光~★' # 评论框占位提示符,默认 ' 欢迎评论'
  copyright: false # 是否显示页脚版权信息
  emoji: [
    'https://cdn.jsdelivr.net/gh/walinejs/emojis@1.0.0/tw-emoji',
    'https://cdn.jsdelivr.net/gh/norevi/waline-blobcatemojis@1.0/blobs',
    'https://cdn.jsdelivr.net/gh/walinejs/emojis@1.0.0/bilibili',
  ] # 自定义表情包

在 vendors 下加入 Waline 官方提供的 CDN 引入方式:

Waline配置
vendors:
  js:
    waline: npm/@waline/client/dist/Waline.min.js

# 修改 comment.njk

找到 layout/_macro/comment.njk,

改成这样

# 修改 layout.njk

找到 layout/_partials/layout.njk,

在 111 行改成这样

# 修改 script.js

找到 scripts/generaters/script.js,

在每一个 valine 代码下添加相同的 waline 代码:

Waline配置
js: {
      valine: theme.vendors.js.valine,
      waline: theme.vendors.js.waline,
      chart: theme.vendors.js.chart,
      copy_tex: theme.vendors.js.copy_tex,
      fancybox: theme.vendors.js.fancybox
    },
    css: {
      valine: theme.css + "/comment.css",
      waline: theme.css + "/comment.css",
      katex: theme.vendors.css.katex,
      mermaid: theme.css + "/mermaid.css",
      fancybox: theme.vendors.css.fancybox
    },
    loader: theme.loader,
    search : null,
    valine: theme.valine,
    waline: theme.waline,

# 修改 pjax.js

找到 source/js/_app/pjax.js,

在找到 valine 的那串,并在下面添加:

Waline配置
if(CONFIG.waline.serverURL) {
    vendorJs('waline', function() {
      var options = Object.assign({}, CONFIG.waline);
      options = Object.assign(options, LOCAL.waline||{});
      options.el = '#comments';
      options.pathname = LOCAL.path;
      options.pjax = pjax;
      options.lazyload = lazyload;
      new Waline(options);
      setTimeout(function(){
        positionInit(1);
        postFancybox('.waline-container');
      }, 1000);
    }, window.Waline);
  }

其实这个我也不知道怎么写就照抄了,错了请不要打我,不过反正跑得起来嘿嘿 OVO

# 试运行

接下来就是最常规的~

命令行提示符
hexo clean
Validating config
Deleted database.
Deleted public folder.
hexo s -g
Validating config
Start processing
Hexo is running at http://localhost:4000/ . Press Ctrl+C to stop.

# 修改样式

成功跑起来了吗~

我猜猜,在成功的喜悦过后,你的第一反应是:

怎么那么丑!!

是的,Waline 的默认样式和 Shoka 搭配起来就是很丑啦 ww

黑暗模式下更是惨不忍睹!千万别去看(bushi

这份丑已经达到必须去修正的地步了,

那么,再做一点小小的工作~

# 修改 comment.styl

找到 source/css/comment.styl,新增:

Waline配置
@import "_common/components/third-party/waline";

目的是在生成 comments.css 时引入 waline 自定义样式。

# 增加自定义 Waline 样式文件

在 source/css/_common/components/third-party/ 下,新增 waline.styl 文件。

关于 waline 可以自定义的样式,在官网已经全面地提供了可用的 CSS 变量,

如果你一股脑复制粘贴,会发现样式无法生效,原因是 Waline 注入的样式在你 CSS 的后面,意味着优先级较高。

为了覆盖注入的样式,你需要在自定义的样式后面添加!important,以获得最高的优先级让样式生效~

下面本人的样式以供参考:

# 日间模式

Waline样式
/* 日间模式 */
:root {
  /* 字体大小 */
  --waline-font-size: 16px;
  /* 常规颜色 */
  --waline-white: #fff;
  --waline-light-grey: #999;
  --waline-dark-grey: #666;
  /* 主题色 */
  --waline-theme-color: var(--primary-color) !important; /* 主题颜色 */
  --waline-active-color: #ff5c75 !important;
  /* 布局颜色 */
  --waline-text-color: #444;
  --waline-bgcolor: #fff;
  --waline-bgcolor-light: #f8f8f8;
  --waline-bgcolor-hover: #f0f0f0;
  --waline-border-color: #ddd;
  --waline-disable-bgcolor: #f8f8f8;
  --waline-disable-color: #bbb;
  --waline-code-bgcolor: #282c34;
  /* 特殊颜色 */
  --waline-bq-color: #f0f0f0;
  /* 头像 */
  --waline-avatar-size: 3.5rem;
  --waline-mobile-avatar-size: calc(var(--waline-avatar-size) * 9 / 13);
  /* 徽章 */
  --waline-badge-color: var(--primary-color) !important;
  --waline-badge-font-size: 0.775em;
  /* 信息 */
  --waline-info-bgcolor: #f8f8f8;
  --waline-info-color: #999;
  --waline-info-font-size: 0.625em;
  /* 渲染选择 */
  --waline-border: 1px solid var(--waline-border-color);
  --waline-avatar-radius: 50%;
  --waline-box-shadow: none;
}

# 夜间模式

自带的夜间模式搭配 Shoka 主题不但很丑,而且好像没有办法跟随主题进行切换,所以需要进行额外的配置以适配 Shoka 主题,即使用 [data-theme="dark"] 代码。这里我也分享改好的代码:

Waline配置
/* 夜间模式 */
:root[data-theme="dark"] {
  --waline-theme-color: var(--primary-color) !important; /* 主题颜色 */
  --waline-white: #ddd !important; /* 按键字体颜色 */
  --waline-active-color: #ff6680 !important;
  --waline-light-grey: #666 !important;
  --waline-dark-grey: rgba(140, 74, 85, 0.6) !important; /*ID 颜色 */
  --waline-badge-color: rgba(140, 74, 85, 0.6) !important;
  /* 布局颜色 */
  --waline-text-color: #ccc !important;
  --waline-bgcolor: #424242 !important;
  --waline-bgcolor-light: #515151 !important;/* 行内代码块颜色 */
  --waline-border-color: #9B9C9C !important;
  --waline-disable-bgcolor: #444;
  --waline-disable-color: #272727;
  /* 特殊颜色 */
  --waline-bq-color:  #9B9C9C; /*quote*/
  /* 其他颜色 */
  --waline-info-bgcolor: rgba(140, 74, 85, 0.6);
  --waline-info-color: #aaa;
}

啊对了,因为我自定义过自己的 Blog 的颜色搭配,这里的代码是适应本 Blog 的,如有需要请自行改成你自己的颜色搭配~

# 输入框的文字大小

Waline配置
.v input, .v textarea {
  font-size: 0.85em !important
}

# 完成了

运行看看叭!

如果有问题欢迎在下面进行留言~

参考资料:

https://waline.js.org/

https://github.com/amehime/hexo-theme-shoka/pull/19

https://mantyke.icu/2021/comment/