文章解耦 241024：解耦自 【索引】定制自己的 Waline 评论系统

本文以 Hexo 的 Butterfly 主题为例。

Butterfly 的主题配置文件中 Waline 有一个 option 字段，里面可以定制自己想要的客户端。在 _config.butterfly.yml 中是这样的：

1
2
3
4
5
waline:
  serverURL:  # Waline server address url
  bg: # waline background
  pageview: false
  option:

在 Waline 官方文档中有很多定制选项，一般官方文档中提到 @waline/client 的配置，都可以使用本文方法进行自定义。

如何将 Waline 官方文档中的内容与 Butterfly 主题配置中 option 字段结合起来？我们只需要关注官网文档示例中 JavaScript 代码片段里的 init 字段，把自定义的地方放到 option 中。

下面将通过更多示例演示具体的配置方法。

自定义显示文字 locale

官网文档中 locale 配置示例如下：

1
2
3
4
5
6
7
8
9
10
Waline.init({
  locale: {
    level0: '炼体',
    level1: '炼气',
    level2: '筑基',
    level3: '金丹',
    level4: '元婴',
    level5: '化神',
  },
});

回到我们的主题配置文件 _config.butterfly.yml ，在 option 中这样配置：

1
2
3
4
5
6
7
8
9
10
11
12
waline:
  option:
    locale: {
      nick: '昵称',
      mail: '邮箱',
      link: '你的网站',
      placeholder: '填写数字QQ邮箱可以自动获取QQ头像',
      requiredMeta: [],
      sofa: '评论区空空如也~呜呜呜',
      anonymous: '匿名的野猫',
      login: '登录(可选)'
      }

locale 写法参照 自定义语言 | Waline，接下来就照猫画虎设置即可。

参考：Hexo|Butterfly 添加 Waline 评论系统 | 小鱼の blog (afish.org)

表情选项卡 emoji

_config.butterfly.yml 示例配置：

1
2
3
4
5
6
7
waline:
  option:
    emoji:
    - '//unpkg.com/@waline/[email protected]/bilibili'
    - '//unpkg.com/@waline/[email protected]/qq'
    - '//unpkg.com/@waline/[email protected]/tieba'
    - '//unpkg.com/@waline/[email protected]/weibo'

官网配置中 emoji 是一个列表的写法，那转写到 Butterfly 主题配置文件中就以 yaml 的列表写法。

emoji 写法参照：表情选项卡 | Waline

注意到，官方示例提供表情包的链接为 unpkg 提供的 CDN，在实际使用中，unpkg 虽然在国内访问不算很慢，但表情包有点耗时。目前解决方案为使用 github.elemecdn.com（饿了么）提供的 unpkg 镜像，实测访问速度显著提升。示例配置如下（其实也就是换一下域名而已）：

1
2
3
4
5
6
waline:
    emoji:
      - https://github.elemecdn.com/@waline/[email protected]/tieba/ 
      - https://github.elemecdn.com/@waline/[email protected]/bilibili/
      - https://github.elemecdn.com/@waline/[email protected]/qq/
      - https://github.elemecdn.com/@waline/[email protected]/weibo

如果想把原有评论数据中的表情链接也替换，可以尝试使用以下 SQL 语句：

1
UPDATE wl_Comment SET `comment`=REPLACE(`comment`,'src="https://unpkg.com/','src="https://github.elemecdn.com/')

反应配置 reaction

Waline 中反应指的是文章下方的表态：

image-20230429172431151

写法：

1
2
3
waline:
  option:
    reaction: true # 开启快速反应

或自己自定义反应：

1
2
3
4
5
6
waline:
  option:
    reaction:
    - 表情地址1
    - 表情地址2
    # 最多支持9个

reaction 写法参照：文章反应 | Waline

关闭表情搜索按钮 search

这个搜索动图的功能真的没啥用，而且还卡。我还遭遇过恶意用户通过这个功能发表垃圾评论。

image.png

1
2
waline:
    search: false

文档：表情包搜索 | Waline

探索更多

更多客户端属性可在 组件属性 | Waline 中进行探索。