发布于 

hexo博客引入Waline评论模块

Waline

一款简洁、安全的评论系统。完全的 Markdown 支持，同时包含表情、数学公式、HTML 嵌入。支持账号注册，保持身份，同时支持匿名回复。最主要的是部署简单，并且可以免费部署在 Vercel 上。

上面这些都是抄的

一、配置数据库

Waline是一位大佬在 Valine 的基础之上开发的，跟Valine一样支持LeanCloud作为数据存储。

1、注册LeanCloud

LeanCloud分国内版和国际版，因为国内版需要绑定已经备案的域名，多一事不如少一事的原则，我们点这里注册一个LeanCloud国际版账号。

2、创建应用

之后在应用里点击创建应用

应用名称随意填

应用计价方式选择开发版，点击创建。

3、获取应用凭证

然后点应用右下角的 ⚙ 进入设置菜单

点击左侧边栏的应用凭证获取AppID、AppKey以及MasterKey

这三个值在之后的服务端配置环境变量中使用

二、创建服务端

我们选择既简单访问又快还能白嫖的Vercel

1、创建服务端仓库

点击这里选择用Github快速连接

然后在Create Git Repository放块里选择Github创建一个仓库

当你的屏幕放起彩带烟花，表明已经构建完成

2、配置环境变量

点击右上角的Continue to Dashboard

选择Settings - Environment Variable

需要配置的环境变量与第一步里获取的应用凭证对应：

Environment Variable Lean Cloud
LEAN_ID AppID
LEAN_KEY AppKey
LEAN_MASTER_KEY MasterKey
LEAN_SERVER 已备案的域名

LeanCloud国际版只需配置前三项，国内版需要额外配置第四项LEAN_SERVER

然后点顶部的Deployments在刚才创建的服务上选择Redeploy重新部署

等部署好之后记下DOMAINS的地址

在hexo配置文件中要用

三、hexo站点配置

我使用的是Stellar主题

需要编辑主题的配置文件 theme/stellar/_config.yml 下的 comments.service 和 comments.waline.serverURL .

可以在博客的根目录里创建一个 _config.stellar.yml ,将所有对 theme/stellar/_config.yml 的更改写在里面，这样即便更新主题后也不用重新写配置文件。

blog/_config.stellar.yml
1
2
3
4
comments:
  service: waline
  waline:
  	serverURL: 上一步获得的DOMAINS地址

之后重新部署hexo即可

四、注册管理员

Waline支持评论管理，默认第一个注册的用户为管理员

可以直接访问上面获取的DOMAINS地址

也可以打开你的站点，在评论板块点登录

此时就可以注册啦，也可以用微博、Github、Twitter、Facebook快速连接

五、评论通知

当网站有用户发布评论或者用户回复评论时，Waline 支持对博主和回复评论作者进行通知。

1、微信通知

因为每天只能白嫖5次提醒于是弃用了

点这里申请 Server 酱提供的Token，需要回到Vercel，去配置以下几个环境变量：

环境变量值
SC_KEYServer 酱提供的 Token
AUTHOR_EMAIL你的邮箱，用来区分发布的评论是否是博主本身发布的。如果是博主发布的则不进行提醒通知
SITE_NAME网站名称，用于在消息中显示
SITE_URL网站地址，用于在消息中显示

2、邮件通知

邮件通知的优势是无提醒次数的限制，并且如果访客在评论时填写了邮箱，那么访客也会在第一时间收到消息提醒，避免垃圾邮件也避免影响自己正常的邮件，建议注册一个新的邮箱专门用于发送提醒邮件。

在Vercel的里新增环境变量如下( # 为选填项)：

环境变量 值
SITE_URL 你站点的链接。
AUTHOR_EMAIL 你的邮箱，用来接收新评论通知。同时如果是你自己发布的评论则不会收到提醒通知。
SITE_NAME 你站点的名称
MAIL_SUBJECT #自定义评论回复邮件标题
MAIL_TEMPLATE #自定义评论回复邮件内容
MAIL_SUBJECT_ADMIN #自定义新评论通知邮件标题
MAIL_TEMPLATE_ADMIN #自定义新评论通知邮件内容
SMTP_SERVICE SMTP 邮件发送服务提供商，点这里查看所以支持的服务商。
SMTP_SECURE 是否使用 SSL 连接 SMTP，上面的服务商清单里看，如果有这一项则填写 true ，没有的就不用配置这一项
SMTP_USER SMTP 邮件发送服务的用户名，一般为登录邮箱
SMTP_PASS SMTP 邮件发送服务的密码，一般为邮箱登录密码，部分邮箱(例如 163)是单独的 SMTP 密码。
SENDER_EMAIL #自定义发送邮件的邮箱地址，与 SMTP_USER 一致
SENDER_NAME # 收到提醒时显示的发件人名称

1、其中 MAIL_SUBJECT 、 MAIL_TEMPLATE 、 MAIL_SUBJECT_ADMIN 、 MAIL_TEMPLATE_ADMIN 这几项可参考 SaraKale’s blog 的邮件模板。因为Vercel的环境变量最大仅支持4kb，如果你的环境变量写得很长超出了限制怎么办，那么这几个环境变量可以不配置，直接将它们写到服务端配置里：在 Github 仓的根目录下找到 index.js，修改其内容为：

这里以官方默认的邮件模板为例
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
const Application = require('@waline/vercel');

module.exports = Application({
    mailSubject: '{{parent.nick | safe}}，您在「{{site.name | safe}}」上的评论收到了回复',
    mailTemplate: `
       <div style="border-top:2px solid #12ADDB;box-shadow:0 1px 3px #AAAAAA;line-height:180%;padding:0 15px 12px;margin:50px auto;font-size:12px;">
         <h2 style="border-bottom:1px solid #DDD;font-size:14px;font-weight:normal;padding:13px 0 10px 8px;">        
           您在博客<a style="text-decoration:none;color: #12ADDB;" href="{{site.url}}" target="_blank">{{site.name}}</a>上的评论有了新的回复
         </h2>
         <div style="padding:0 12px 0 12px;margin-top:18px">
		<p>{{parent.nick}}，您曾发表评论：</p>
           <div style="background-color: #f5f5f5;padding: 10px 15px;margin:18px 0;word-wrap:break-word;">{{parent.comment | safe}}</div>
           <p><strong>{{self.nick}}</strong> 回复说：</p>
           <div style="background-color: #f5f5f5;padding: 10px 15px;margin:18px 0;word-wrap:break-word;">{{self.comment | safe}}</div>
           <p>您可以点击<a style="text-decoration:none; color:#12addb" href="{{site.postUrl}}" target="_blank">前往原文查看完整的回复內容</a>，欢迎再次光临<a style="text-decoration:none; color:#12addb" href="{{site.url}}" target="_blank">{{site.name}}</a>。</p>
           <br/>
         </div>
	  <div style="border-top:1px solid #DDD; padding:13px 0 0 8px;">
		该邮件为系统自动发送的邮件，请勿直接回复。
	  </div>
	  <br/>
       </div>`,
    mailSubjectAdmin: '您的博客「{{site.name | safe}}」收到了新评论',
    mailTemplateAdmin: `
       <div style="border-top:2px solid #12ADDB;box-shadow:0 1px 3px #AAAAAA;line-height:180%;padding:0 15px 12px;margin:50px auto;font-size:12px;">
         <h2 style="border-bottom:1px solid #DDD;font-size:14px;font-weight:normal;padding:13px 0 10px 8px;">        
           有人在<a style="text-decoration:none;color: #12ADDB;" href="{{site.url}}" target="_blank">{{site.name}}</a>发表了新的评论
         </h2>
         <div style="padding:0 12px 0 12px;margin-top:18px">
		<p><strong>{{self.nick}}</strong> 评论说：</p>
		<div style="background-color: #f5f5f5;padding: 10px 15px;margin:18px 0;word-wrap:break-word;">{{self.comment | safe}}</div>
           <p>您可以点击<a style="text-decoration:none; color:#12addb" href="{{site.postUrl}}" target="_blank">前往原文查看完整的评论内容。</a></p>
           <br/>
         </div>
	  <div style="border-top:1px solid #DDD; padding:13px 0 0 8px;">
		该邮件为系统自动发送的邮件，请勿直接回复。
	  </div>
	  <br/>
       </div>`
});

2、SMTP_SERVICE 则填写服务商名称就行，比我使用的163的邮箱来发送消息提醒，而在支持的服务商清单里是有 163 的，所以我这一项的值写 163 就行。如果你使用的邮箱没有在支持的清单里，则需要配置 SMTP_HOST 、和 SMTP_PORT 。

注意：任何环境变量的变动，都需要重新部署后才会生效。其次，如果设置了多种提醒方式，仅会有一种生效！

Waline还支持其他通知方式，见详情

六、客制化

1、自定义表情

Stellar主题的配置文件里默认是将表情注释掉的，在 _config.stellar.yml 里的 comments.waline 下补充一个 emoji 项，下面写入emoji的地址即可，例如：

blog/_config.stellar.yml
1
2
3
4
5
6
7
comments:
  service: waline
  waline:
  	serverURL: 上一步获得的DOMAINS地址
  	emoji:
     - https://xxx/blobs
     - https://xxx/qq

官方有表情预设，如果嫌加载慢的话也可以上传到自己的图床，改一下上面引用的地址即可。如果需要创建自己的预设可以参考这里。

2、自定义文章反应

文章反应是类似于点赞的互动，在 blog/config.stellar.yml 里的 comment.waline.reaction 下键入你自定义的反应表情图片地址即可。默认的反应标题为“你认为这篇文章怎么样？”，可在 comment.waline.locale 自定义，其中 reactionTitle: 为反应标题。如果需要给每一个反应表情加入文字描述，只需新增 reaction0 、reaction1 、reaction2 ……例如：

blog/_config.stellar.yml
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
comments:
  waline:
    serverURL: 上一步获得的DOMAINS地址
    locale:
      #自定义反应标题。如果像我一样不想要反应标题，可以在这一项里留空。
      reactionTitle: 
      #反应表情的文章描述
      reaction0: 爱你哟
      reaction1: oh~~
      reaction2: 嘚瑟~
      reaction3: 无语
    #反应表情组
    reaction: 
      - https://unpkg.com/@waline/emojis@1.1.0/weibo/weibo_heart_eyes.png
      - https://unpkg.com/@waline/emojis@1.1.0/weibo/weibo_dog_joy.png
      - https://unpkg.com/@waline/emojis@1.1.0/weibo/weibo_dog_consider.png
      - https://unpkg.com/@waline/emojis@1.1.0/weibo/weibo_sob.png

Waline最多支持9个反应，可以小于9个但不能多。每个页面的反应计数是独立的，互不干扰。

3、评论框默认文字

先感谢@是非题大佬，这项自定义我找半天没都没找到

如图所示，我在评论框里写了一句提醒“评论时填写邮箱，或者注册并登录后评论，即可在第一时间收到消息提醒。”这句话默认是“欢迎评论”，而我们要自定义它的话是在 _config.stellar.yml 里的 comments.waline.locale.placeholder 下写入你想放的内容即可。

以下是我 blog/_config.stellar.yml 里关于评论板块的完整代码以供参考：

blog/_config.stellar.yml
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
comments:
  service: waline
  waline:
    serverURL: https://waline.skyreeves.com
    locale:
      placeholder: 
       评论时填写邮箱，或者注册并登录后评论，即可在第一时间收到消息提醒。 
      reactionTitle:  
    emoji:
     - https://xxx/blobs
     - https://xxx/qq
    meta:
     - nick
     - mail
     - link
    reaction:
     - https://xxx/1.png
     - https://xxx/2.png
     - https://xxx/3.png

七、自定义配色

配色从客制化里独立出来是因为控制它们的文件不同，Stellar主题关于Waline的自定义配色文件路径如下：

blog/themes/stellar/source/css/_plugins/comments/waline.styl

根据所需更改色值即可

推荐使用visual studio编辑文件，可以安装一个 stylus 扩展，它能直接显示色值所指的颜色，在编辑的时候更直观

八、关于魔法

如果不使用魔法，托管在Vercel上的Waline版块在国内是加载不出来的，为了避免魔法部介入调查，我们可以将Vercel伪装成麻瓜。详情请查看评论板块加载失败的问题

九、参考

Waline快速上手

许可协议

本文采用 署名-非商业性使用-相同方式共享 4.0 国际 许可协议，转载请注明出处。

快来参与讨论吧
©2022 渝ICP备2022011696号-2 | Build By SkyReeves | Powered By Hexo Stellar
本站由 提供CDN加速/云储存 |