忍不住了,还是升级了Waline

7 天的国庆假期结束了,接下来要连上 7 天班。同样是 7 天,为啥感觉假期就很短呢?😂


什么是 Valine ?

Valine 是 一款快速、简洁且高效的无后端评论系统。

什么是 Waline ?

Waline 是一款从 Valine 衍生的带后端评论系统。可以将 Waline 等价成 With backend Valine.

背景

这两天在 Waline 的后台管理界面不断收到新版发布的消息

老苏的博客 https://laosu.tech,最早用的留言评论系统是 Valine,后来 Valine 被爆出存在安全性问题,从 v1.4.0 后就暂停更新了。

Waline 的组件属性是完全兼容 Valine 的,所以老苏很容易就从 Valine 迁移到了 Waline,像评论数统计和浏览量统计都没变化,所以还是很丝滑的

但是 Waline 本身的改动比较大,尤其是 Waline 客户端升级到 v2 之后

中途几次想升级,但是遇到了各种问题,一直也没时间深入,所以老苏一直就停留在:

  • @waline/vercel 的版本为 1.13.5
  • @waline/client 的版本为 1.6.0

这次趁着国庆假期,忍不住折腾的心,下决心把这个问题解决了

升级

升级软件

升级本身并不复杂

  • wbsu2003/waline 仓库中修改 package.json 文件,@waline/vercel1.13.5 升级到 1.23.5

  • wbsu2003/myblog 仓库中修改config.next.yml,从@waline/client@1.6.0 升级到 @waline/client@2.11.3

  • wbsu2003/myblog仓库中修改 package.json

    • @waline/hexo-next^2.0.6 升级到 ^3.0.1
    • hexo-theme-next^8.8.2 升级到 ^8.13.1

复杂的是解决升级完成后带来的问题,比如评论数统计和浏览量统计没有了等等。

修改 config.yml

老苏的主题是 Next,所以需要修改 _config.next.yml 文件,waline 部分是下面👇这样的

为防止自动升级导致问题,老苏强制指定了 @waline/client 的版本为 1.6.0

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
waline:
enable: true
serverURL: "https://0x404.ml" # vercel 域名
path: window.location.pathname # 当前 文章页 路径,用于区分不同的 文章页,以保证正确读取该 文章页 下的评论列表。
placeholder: "有什么想法和需求,可以留个言" # comment box placeholder
avatar: monsterid # Gravatar style
meta: [nick, mail, link] # Custom comment header
pageSize: 10 # Pagination size
lang: zh-cn # Language, available values: en, zh-cn
# Warning: Do not enable both `waline.visitor` and `leancloud_visitors`.
visitor: true # Article reading statistic
comment_count: true # If false, comment count will only be displayed in post page, not in home page
requiredMeta: [nick, mail] # Set required fields: [nick] | [nick, mail]
# 设置 emoji 为QQ、微博、哔哩哔哩、贴吧、Twitter、Alus
emoji:
[
"https://cdn.jsdelivr.net/gh/walinejs/emojis@1.0.0/qq",
"https://cdn.jsdelivr.net/gh/walinejs/emojis@1.0.0/weibo",
"https://cdn.jsdelivr.net/gh/walinejs/emojis@1.0.0/bilibili",
"https://cdn.jsdelivr.net/gh/walinejs/emojis@1.0.0/tieba",
"https://cdn.jsdelivr.net/gh/walinejs/emojis@1.0.0/tw-emoji",
"https://cdn.jsdelivr.net/gh/walinejs/emojis@1.0.0/alus",
]
libUrl: //cdn.jsdelivr.net/npm/@waline/client@1.6.0 # Set custom library cdn url
dark: "auto" # 自动适应模式

老苏改为了下面,仔细对比的话会发现组件属性发生了变化,比如 placeholder 改为了 locale.placeholder 等等

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
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
# 2022.10.05 修改
# 参考文档:https://www.npmjs.com/package/@waline/hexo-next
waline:
# New! Whether enable this plugin
enable: true

# Waline server address url, you should set this to your own link
serverURL: https://0x404.ml

# Waline library CDN url, you can set this to your preferred CDN
libUrl: https://unpkg.com/@waline/client@v2/dist/waline.js

# Waline CSS styles CDN url, you can set this to your preferred CDN
cssUrl: https://unpkg.com/@waline/client@v2/dist/waline.css

# Custom locales
locale:
placeholder: "有什么想法和需求,可以留个言" # Comment box placeholder

# If false, comment count will only be displayed in post page, not in home page
commentCount: true

# Pageviews count, Note: You should not enable both `waline.pageview` and `leancloud_visitors`.
pageview: false

# Custom emoji
emoji:
- https://unpkg.com/@waline/emojis@1.0.1/qq
- https://unpkg.com/@waline/emojis@1.0.1/weibo
- https://unpkg.com/@waline/emojis@1.0.1/alus
- https://unpkg.com/@waline/emojis@1.0.1/bilibili
- https://unpkg.com/@waline/emojis@1.0.1/tieba
- https://unpkg.com/@waline/emojis@1.0.1/tw-emoji

# Comment infomation, valid meta are nick, mail and link
meta:
- nick
- mail
- link

# Set required meta field, e.g.: [nick] | [nick, mail]
requiredMeta:
- nick
- mail

# Language, available values: en-US, zh-CN, zh-TW, pt-BR, ru-RU, jp-JP
lang: zh-CN

# Word limit, no limit when setting to 0
wordLimit: 0

# Whether enable login, can choose from 'enable', 'disable' and 'force'
login: enable

# comment per page
pageSize: 10

dark: "auto" # 自动适应模式

leancloud_visitors:
enable: false

解决问题

完成上述修改后,老苏设置的 Github Action 脚本 和 vercel 网站会完成自动发布的工作,等全部完成后回到 https://laosu.tech 你会发现文章的阅读次数都是 0

打开文章后,阅读次数变成了 1,难道把计数都清零了?

数据库

进入 LeanCloud 后台,可以看到 time 字段都在

  • 需要说明的是,titlexid 字段是老苏手工添加的,但是具体原因已经忘记了;
  • url 字段最直观的变化就是其中的文章标题进行了 UrlEncode 编码处理;

每篇文章点开之后,数据库都会新建了一条记录

因为文章数量不多,所以老苏采用了比较笨的办法(主要还是因为不是程序员,没法通过代码方式解决问题😂),直接手动复制粘贴了 time 字段

现在阅读次数恢复正常了

热榜去重

因为老苏并没有删除原来的记录,所需要处理热榜,避免重复,基本思路是:

  • 只取 title 字段为 undefined的,因为原来的都手动添加了 title 字段;
  • url 字段进入 UrlDecode 处理,然后通过 split 处理来获得文章标题;

目前看起来似乎已经可以正常获取结果

效果

在文章末尾的评论区可以看到 Waline 客户端的版本是最新的 v2.12.0

对于已发表的评论,新版本多了部分管理功能

这些功能原本只有后台才有

对读者来说没什么变化,但是对老苏来说方便了不少

参考文档

Waline | Waline
地址:https://waline.js.org/

@waline/hexo-next - npm
地址:https://www.npmjs.com/package/@waline/hexo-next

@waline/vercel - npm
地址:https://www.npmjs.com/package/@waline/vercel

@waline/client - npm
地址:https://www.npmjs.com/package/@waline/client