首页Log

# 更新：推荐转用 ShokaX，原生支援 Waline

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

# 先有 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配置
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
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配置
1
2
3
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配置 mark:3,10,18
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
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配置
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
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

# 试运行

接下来就是最常规的～

命令行提示符 command:("[root@localhost] $":1,5||"INFO":2-4,6-8)
1
2
3
4
5
6
7
8
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配置
1
@import "_common/components/third-party/waline";

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

# 增加自定义 Waline 样式文件

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

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

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

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

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

# 日间模式

Waline样式
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
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
/*日间模式*/
: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配置
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
/*夜间模式*/
: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配置
1
2
3
.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/

更新于