文章主要内容：

  1. Waline 邮件通知的设置
  2. 输入 QQ 邮箱自动获取 QQ 头像的配置
  3. 评论区美化要点
  4. 评论安全
    1. 设置违禁词的方法
    2. 设置 IP 黑名单
    3. 使用 Turnstile 验证码服务

Waline 邮件通知

Waline 发送邮件，首先你得有一个专门发送通知的邮箱，任何支持 STMP 协议的都行。这里以腾讯企业邮作域名邮箱为例。

拥有域名邮箱

注册一个企业微信，企业微信完成企业创建后，可以申请域名邮箱：

image-20230428231218707

解析设置

然后在阿里云云解析进行设置：（其他云服务商解析设置方法参考：如何确认域名的服务商以及各大域名商的域名设置方法-帮助中心-企业微信 (qq.com)）

image-20230428230939924

image-20230428231010712

邮箱设置好密码

拥有企业邮箱之后，登录邮箱设置好密码。可参考 成员如何设置邮箱密码？腾讯企业邮箱帮助中心 (qq.com)

image-20230428222407581

环境变量配置

设置好域名邮箱密码后，打开 Vercel 服务端项目，点击环境变量：

image-20230428223656516

然后按照 Waline 官方文档的指导设置好服务端的环境变量：评论通知 | Waline，腾讯企业邮相关参数如下：

1
2
3
4
5
6
7
"QQex": {
    "aliases": ["QQ Enterprise"],
    "domains": ["exmail.qq.com"],
    "host": "smtp.exmail.qq.com",
    "port": 465,
    "secure": true
},

参考：Fluid -15- Waline 邮件通知 - 腾讯云开发者社区-腾讯云 (tencent.com)

信件模板

关于邮件内容的模板，即环境变量 MAIL_TEMPLATE_ADMIN 如何写，可自行搜索样例。

这里我参考了洪涝（张洪 Heo）的针对 Twikoo 评论系统的示例：Twikoo 评论回复邮件模板：Acrylic Mail 粉 | 张洪 Heo (zhheo.com)

效果

QQ 邮箱网页版：

image.png

QQ 邮箱手机（暗黑模式）：

Screenshot_20230712_235815.jpg

改动

其实与 Waline 大差不差，只是有一些写法需要注意（适配 Waline 后改动的地方）：

  • 把洪涝示例中变量的形式改成 Waline 中变量的形式，比如 ${NICK} 改为 {{self.nick}}
  • 评论内容记得加上 safe，否则信件中显示的是 raw html 字符 [1]。如：{{self.comment|safe}}。
  • 链接地址加上 https://，否则点不了。如 href="https://{{site.url}}"
  • Bug 修复：主框宽度调整。手机端、电脑端邮件显示正常。暗黑模式显示正常。

模板

以下代码可直接写入 Waline 项目里 Vercel 环境变量：

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
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
<div class="page flex-col">
    <div class="box_3 flex-col" style="
    display: flex;
    position: relative;
    width: 100%;
    height: 206px;
    background: #859cef2e;
    top: 0;
    left: 0;
    justify-content: center;
  "><div class="section_1 flex-col" style="
    background-image: url(https://cdn.gallery.uuanqin.top/img/qlogo.png);
    position: absolute;
    width: 152px;
    height: 152px;
    display: flex;
    top: 130px;
    background-size: cover;
  "></div></div>
    <div class="box_4 flex-col" style="
    margin-top: 92px;
    display: flex;
    flex-direction: column;
    align-items: center;
  ">
      <div class="text-group_5 flex-col justify-between" style="
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 0 20px;
  ">
        <span class="text_1" style="
    font-size: 26px;
    font-family: PingFang-SC-Bold, PingFang-SC;
    font-weight: bold;
    color: #000000;
    line-height: 37px;
    text-align: center;
  ">嘿！你有一条新的回复</span>
        <span class="text_2" style="
    font-size: 16px;
    font-family: PingFang-SC-Bold, PingFang-SC;
    font-weight: bold;
    color: #00000050;
    line-height: 22px;
    margin-top: 21px;
    text-align: center;
  ">你在&nbsp;{{site.name|safe}} 博客中留下的评论收到来自&nbsp;{{self.nick}}&nbsp;的回复</span>
      </div>
      <div class="box_2 flex-row" style="
    margin: 0 20px;
    min-height: 128px;
    background: #F7F7F7;
    border-radius: 12px;
    margin-top: 34px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 32px 16px;
    width: 95%;
  ">

        <div class="text-wrapper_4 flex-col justify-between" style="
    display: flex;
    flex-direction: column;
    margin-left: 30px;
    margin-bottom: 16px;
  ">
          <span class="text_3" style="
    height: 22px;
    font-size: 13px;
    font-family: PingFang-SC-Bold, PingFang-SC;
    font-weight: bold;
    color: #2a67ce;
    line-height: 22px;
  ">{{parent.nick|safe}}</span>
          <span class="text_4" style="
    margin-top: 6px;
    margin-right: 22px;
    font-size: 13px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #000000;
    line-height: 22px;
  ">{{parent.comment|safe}}</span>
        </div><hr style="
      display: flex;
      position: relative;
      border: 1px dashed #859cef2e;
      box-sizing: content-box;
      height: 0px;
      overflow: visible;
      width: 100%;
  "><div class="text-wrapper_4 flex-col justify-between" style="
    display: flex;
    flex-direction: column;
    margin-left: 30px;
  ">
  <hr>
          <span class="text_3" style="
    height: 22px;
    font-size: 16px;
    font-family: PingFang-SC-Bold, PingFang-SC;
    font-weight: bold;
    color: #2a67ce;
    line-height: 22px;
  ">{{self.nick|safe}}</span>
          <span class="text_4" style="
    margin-top: 6px;
    margin-right: 22px;
    font-size: 16px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #000000;
    line-height: 22px;
  ">{{self.comment|safe}}</span>
        </div>

        <a class="text-wrapper_2 flex-col" style="
    min-width: 106px;
    height: 38px;
    background: #859cef2e;
    border-radius: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    margin: auto;
    margin-top: 32px;
  " href="https://{{site.postUrl}}">
          <span class="text_5" style="
    color: #218adb;
  ">查看详情</span>
        </a>
      </div>
      <div class="text-group_6 flex-col justify-between" style="
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 34px;
  ">
        <span class="text_6" style="
    height: 17px;
    font-size: 12px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #00000045;
    line-height: 17px;
  ">此邮件由评论服务自动发出，直接回复无效。</span>
        <a class="text_7" style="
    height: 17px;
    font-size: 12px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #218adb;
    line-height: 17px;
    margin-top: 6px;
    text-decoration: none;
  " href="https://{{site.url}}">前往博客</a>
      </div>
    </div>
  </div>

其他模板参考链接

其他样例参考：

输入 QQ 邮箱自动获取 QQ 头像（服务端配置）

如果你的 Waline 服务端是按照官方推荐的 Vercel 部署方式，那么你可以打开 Vercel 对应的 Github 仓库，修改 index.js 文件，将以下内容添加至方框位置：

1
2
3
4
5
6
7
8
9
10
11
/*
此方法或传入一个 comment 对象，你可以通过 comment.mail 获取邮箱。若返回值为 string 类型，则会直接调用返回值作为头像地址，否则正常生成 MD5。
*/
async avatarUrl(comment) {
    const reg = new RegExp('(\\d+)@qq\\.com$', 'i');
    const mail = comment.mail;
    if (reg.test(mail)) {
      const q = mail.replace(/@qq\.com/i, '').toLowerCase();
      return 'https://q1.qlogo.cn/headimg_dl?dst_uin=' + q + '&spec=4';
    }
  },

image-20230428162327261

你也可以试着写一个根据 QQ 号自动获取头像和邮箱的函数

参考：服务端配置 | Waline

评论区美化（客户端配置）

本小节以 Hexo 的 Butterfly 主题为例。

Butterfly 的主题配置文件中 Waline 有一个 option 字段，里面可以定制自己想要的客户端。在 Waline 官方文档中有很多定制选项。

如何将 Waline 官方文档中的内容与 option 字段结合起来？我的理解是，关注官网 js 示例中的 init 字段，把自定义的地方放到 option 中。那怎么放，放什么，格式是什么，接下来跟着我的示例进行即可。

自定义显示文字

打开主题配置文件，在 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)

表情选项卡配置

1
2
3
4
5
6
7
waline:
  option:
    emoji:
    - '//unpkg.com/@waline/emojis@1.1.0/bilibili'
    - '//unpkg.com/@waline/emojis@1.1.0/qq'
    - '//unpkg.com/@waline/emojis@1.1.0/tieba'
    - '//unpkg.com/@waline/emojis@1.1.0/weibo'

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

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

反应配置

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

image-20230429172431151

写法：

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

或自己自定义反应：

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

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

魔改 CSS

本来涉及 CSS 的修改，应该另写 css 文件再通过 inject 引入的（这也是 Waline 官方推荐的做法）。但是试了不太成功，所以打算把 waline.css 下载到本地，再将 CDN 指向本地位置。不优雅，但能凑合用。

主题颜色修改

CSS 下载到了本地就好办了。根据官方给的 CSS 变量 说明，我们可以自己更改 css 文件。

评论区背景图

我的做法是在 css 中加上：

1
2
3
4
5
6
7
8
9
10
11
12
13
.wl-editor {
    background-image: url(图片地址);
    background-size: 10%;
    background-repeat: no-repeat;
    background-position: right bottom;
    background-color: rgba(255, 255, 255, 0);
    resize: vertical
}
.wl-editor:focus{
    background-position-x: 800px;
    background-position-y: 1000px;
    transition: all 0.2s ease-in-out 0s;
}

记得隔一段时间就和官网 CSS 同步一下。

参考文章：Hexo 中 Buttefly 主题 Valine 评论系统配置以及美化（七） - 知乎 (zhihu.com)

为评论区增加输入提醒

详看这篇文章：为评论系统增加输入提醒【Waline】

评论安全

设置违禁词（服务端配置）

最近苦于梯子广告入侵，设置违禁词可以解决这个问题。

修改在 Github 上 Waline 文件 index.js：

1
2
3
4
module.exports = Application({
  // 违禁词
  forbiddenWords: ['免费节点'],
});

评论带有违禁词的统一当做垃圾评论处理，存在误判的话可以从垃圾箱中恢复。

参考：服务端配置 | Waline

设置 IP 黑名单

最近存在沙币乱评论，得试试黑名单功能了

配置方法和设置违禁词一样：

1
2
3
4
module.exports = Application({
  // 黑名单
  disallowIPList: ['4.4.4.4'],
});

参考：服务端配置 | Waline

使用 Turnstile 验证码服务

Turnstile 服务注册

Cloudflare Turnstile 是一款替代 CAPTCHA 的免费工具，相比于谷歌 reCAPTCHA，它不需要繁琐的选择红绿灯消防栓之类的交互。

根据网站提示自己注册一个。

image.png

配置时安全域名需要同时添加网站地址和 Waline 服务端地址（不包含传输协议，即 http:// 或 https://）。

image.png

记住这两串 KEY，待会配置需要用到：

image.png

注意，打算关闭 Turnstile 时服务端环境变量和客户端配置要同时删去。免去不必要的错误 [2]。

服务端配置（以 Vercel 部署方案为例）

打开 Vercel 中 waline 服务端项目的环境变量设置，新建这两个环境变量并输入对应的值。

image.png

环境变量名 解释
TURNSTILE_KEY Turnstile key，须与客户端同时配置
TURNSTILE_SECRET Turnstile secret，服务端使用，不可泄漏

环境变量配置好后建议执行 Redeploy。

客户端配置（以 Hexo-Butterfly 主题为例）

Butterfly 主题配置文件 waline 部分为：

1
2
3
4
5
6
waline:
  serverURL: https://pl.uuanqin.top # Waline server address url
  bg: # waline background
  pageview: false
  option:
    turnstileKey: '0x4AAAAAAAXXXXXXXXXXX' # 这里填写你的 turnstile site key
请注意保持 waline.js 为较新版本，否则会出现未知错误

比如，在 Butterfly 主题配置文件使用 waline_js 的 cdn 链接版本至少为 https://cdn.bootcdn.net/ajax/libs/waline/2.15.7/waline.min.js 。之前使用 2.15.1 版本会出现报错。

部署好后尝试评论，可以在 cloudflare 查看监控数据。

参考：

  1. [Bug]: 自定义邮件通知模板后评论内容显示问题 · Issue #1034 · walinejs/waline (github.com) ↩︎

  2. [Bug]: 未登录用户评论时报Forbidden提示 Issue #2427 · walinejs/waline (github.com) ↩︎