忍不住了，还是升级了Waline

发表于 更新于 分类于 Waline： 阅读次数： 本文字数： 4.5k 阅读时长 ≈ 4 分钟
升级了 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/vercel 从 1.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 字段都在

  • 需要说明的是，title 和 xid 字段是老苏手工添加的，但是具体原因已经忘记了；
  • 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