前言

本博客采用了 Twikoo 和 Valine 双评论系统，其中 Twikoo 是基于腾讯云开发CloudBase开发，Valine 是基于LeanCloud应用进行搭建，两者都支持微信、QQ评论提醒，Twikoo还支持QQ邮箱提醒。

本文主要讲述基于LeanCloud应用的Valine评论系统的搭建与使用，Twikoo将在下篇文章进行叙述。

由于在搭建本博客时部分步骤及设置没有及时进行笔记记录，只记录了一些核心重要的步骤，所以本教程主要参考了大佬们的杰作，各位童鞋在进行搭建时可供参考，如有问题可至文章末尾评论留言，小菜鸟看到后会进行一一解答。（说是有点小瑕疵，但其实都不时是什么问题，相信大家还是可以自己解决的）

创建LeanCloud应用

注册我就不多说了，有手有脑都会

注意：一定要选择国际版，如果你选择的是华北或者华东的话，Valine 后台评论管理是需要备案才能绑定的.

打开LeanCloud

官网：https://console.leancloud.app/#/app
注册登陆后长这样
image.png
由于小菜鸟已经创建过了应用，所以登录后的页面中会有记录，同学们刚注册登录后是没有的，需要新建应用。
点击下边的 创建应用 填写应用昵称点击 创建 即可：
image.png

打开创建的应用

选择 设置 –> 域名绑定(这个就是LeancLoud的后台地址，输入自己喜欢的一个的前缀)，后台地址后面加上 /sign-up 就可以注册。
例如：https://lynsite.avosapps.us/sign-up
image.png

当然如果你有自己的域名也可以选择绑定自己的域名，选择 设置 –> 域名绑定 –> 云引擎域名
image.png

image.png
绑定后还需要配置DNS解析，如上图 推荐DNS配置。复制此配置记录前往阿里云或腾讯云（域名服务商）添加域名解析记录，我的是腾讯云域名。
image.png

等待几分钟后刷新页面发现已经绑定成功：
image.png

自定义环境变量

选择 云引擎 –> 设置 –> 添加自定义环境变量

变量名 示例 说明
SITE_NAME 小菜鸟个人博客 [必填] 网站名称
SITE_URL https://xxx.top [必填] 网站地址
SMTP_USER xxx@lynsite.cn [必填] 邮箱地址
SMTP_PASS 123456789 [必填] 邮箱授权码
(部分邮箱服务商默认开启SMTP)
(如果没有授权码可直接填写邮箱密码)
SMTP_SERVICE QQ [必填] 邮箱服务商查询相关详细
SENDER_NAME 楠先生 [必填] 寄件人名称
TEMPLATE_NAME rainbow [必填] 设置提醒邮件的主题
看下方有主题模板
ADMIN_URL https://xxx.leanapp.cn [可选] 后台管理地址
SCKEY SCUxxxxxxxxxxxx2dc [可选] server 酱的 SCKEY(微信提醒)
QMSG_KEY fdexxxx4xxxxxxxxa00 [可选] Qmsg 酱的密钥
QQ 123456789 [可选] Qmsg 酱发送的 qq，不填为全部
支持多个，用英文逗号分隔即可
QQ_SHAKE true [可选] 填写代表发送 QQ 戳一戳
INFO <p style=’color:red’>test<p> [可选] 自定义信息输出，支持 HTML 代码
LeanCloud控制台日志信息输出
FAVICON http://xxx/favicon.ico [可选] 网页 favicon 图标
TO_EMAIL admin@lynsite.cn [可选]博主通知收件地址，默认使用 SMTP_USER
SPAM_WORDS 检测的内容，如：单号，物流 [可选] 需要对屏蔽的关键词，关键词用半角逗号分隔
MAIN_COLOR #ff9191 [可选] 仅针对 custom2 模板主题的主要颜色
MAIN_IMG https:xxxx/22.jpg [可选] 仅针对 custom2 模板主题的头图

邮箱主题模板

主题 说明
default 默认主题
rainbow 原版的 rainbow
custom1 基于 梨花町の肾兄さん 的模板
custom2 对 custom1 的改进版

参考：https://blog.hclonely.com/posts/409d3090/
参考：https://www.antmoe.com/posts/2380732b/

自定义环境变量

image.png

我自己的配置：
image.png

部署

选择 云引擎–>部署–>部署项目–>Git部署–>配置Git–>填写下方任意一个地址–>保存–>生产环境–>部署
个人定制：https://github.com/lete114/Valine-Admin-Server.git
小康：https://github.com/sviptzk/Valine-Admin-Server.git

创建定时任务

1）定时检查24小时内漏发的邮件通知
　生产环境选择 resend_mails
　选择Cron表达式 时间自己调整 0 0 1 * * *

2）自动唤醒
　生产环境选择 self_wake
　选择Cron表达式 时间自己调整 0 0/60 0 * * ?
image.png

设置安全域名

这里设置的是你博客的地址，你博客有多少个地址就填多少个地址，不然评论显示403
image.png

申请Qmsg酱

打开官网

官网：https://qmsg.zendee.cn/
点击登陆(我选择的是QQ登陆)
image.png

添加QQ

可填写多个
image.png

点击右上角文档

把 send 后面的 key 复制到LeanCloud的 QMSG_KEY 环境变量后保存即可
image.png

申请Server酱

和Qmsg类似，注册—>登陆—>发送消息—>就可以得到SCKEY代码了
官网：http://sc.ftqq.com/3.version
http://blog.lete114.top/img/Valine-LeanCloud-Config/12.png

Valine 配置

1）打开C:\Hexo-Blog\themes\Butterfly_config.yml
注意：下方步骤由Butterfly主题独有，如果你是其他主题请自行查看主题源码
找到 # comments 修改 valine 的js地址以下选其一
HCLonely魔改版：https://fastly.jsdelivr.net/gh/HCLonely/Valine@latest/dist/Valine.min.js

1
2
3
4
5
6
7
8
9
10
11
# comments
gitalk: https://fastly.jsdelivr.net/npm/gitalk@latest/dist/gitalk.min.js
gitalk_css: https://fastly.jsdelivr.net/npm/gitalk/dist/gitalk.min.css
# 评论美化
# valine: https://fastly.jsdelivr.net/npm/valine/dist/Valine.min.js
valine: https://fastly.jsdelivr.net/gh/HCLonely/Valine@latest/dist/Valine.min.js
disqusjs: https://fastly.jsdelivr.net/npm/disqusjs@1/dist/disqus.js
disqusjs_css: https://fastly.jsdelivr.net/npm/disqusjs@1/dist/disqusjs.css
utterances: https://utteranc.es/client.js
twikoo: https://fastly.jsdelivr.net/npm/twikoo/dist/twikoo.all.min.js
waline: https://fastly.jsdelivr.net/npm/@waline/client/dist/Waline.min.js

2）再次找到valine添加master和friends

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
# valine
# https://valine.js.org
valine:
  appId: JWsraa5Exxxxxxxxxxxx-Mdxxxx# leancloud application app id
  appKey: bjXNxxxxxxxxxxxutg6q # leancloud application app key
  pageSize: 10 # comment list page size
  avatar: monsterid # gravatar style https://valine.js.org/#/avatar
  lang: zh-CN # i18n: zh-CN/zh-TW/en/ja
  placeholder: 填写邮箱可以及时收到回复哦 # valine comment input placeholder (like: Please leave your footprints)
  guest_info: nick,mail,link # valine comment header info (nick/mail/link)
  recordIP: true # Record reviewer IP
  serverURLs: # This configuration is suitable for domestic custom domain name users, overseas version will be automatically detected (no need to manually fill in)
  bg: https://fastly.jsdelivr.net/gh/HCLonely/hclonely.github.io@1.4.7/img/comment_bg.png # valine background
  count: true
  emojiCDN: # emoji CDN
  enableQQ: true # 是否启用昵称框自动获取QQ昵称和QQ头像, 默认关闭，需博/网站主主动启用
  requiredFields: nick,mail # required fields (nick/mail)
  metaPlaceholder:
    nick: 昵称/QQ号(必填)
    mail: 邮箱(必填)
    link: 网址(https://)
  # 此部分配置不生效，现配置在themes\butterfly\layout\includes\third-party\comments\valine.pug中
  # tagMeta: ["博主","小伙伴","访客"] # 标签要显示的文字,默认'博主,小伙伴,访客'
  master:
    - 35ca00xxxxxxxxxxa318
    - 651280xxxxxxx880d5bc
  friends:
    - 673exxxxxxxxxxx276e1

3）随后到themes\butterfly\layout\includes\third-party\comments\valine.pug添加

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
//- 在以下方法中添加内容：
script.
  function loadValine () {
    function initValine () {
      let initData = {
        el: '#vcomment',
        appId: '#{theme.valine.appId}',
        appKey: '#{theme.valine.appKey}',
        placeholder: '#{theme.valine.placeholder}',
        avatar: '#{theme.valine.avatar}',
        meta: '#{theme.valine.guest_info }'.split(','),
        pageSize: '#{theme.valine.pageSize}',
        lang: '#{theme.valine.lang}',
        recordIP: #{theme.valine.recordIP},
        serverURLs: '#{theme.valine.serverURLs}',
        emojiCDN: '#{theme.valine.emojiCDN}',
        emojiMaps: !{emojiMaps},
        enableQQ: #{theme.valine.enableQQ},
        path: window.location.pathname,
        //- Valine评论美化
        //- master: '35ca00d8abfb447a44a0b8292fcaa318',
        //- friends: ['673e21e1a9d1de1cf33fca7b295276e1', '651280dc7cd3791371c2dc0f0880d5bc'],
        master: '#{theme.valine.master}',
        friends: '#{theme.valine.friends}',
        tagMeta: ["博主","小伙伴","访客"],
        metaPlaceholder: !{JSON.stringify(theme.valine.metaPlaceholder || {})}
        //- Valine评论美化end
      }
   ......
  }

4）添加自定义表情包 [可选]
打开themes\butterfly\layout\includes\third-party\comments\valine.pug，按照如下代码格式修改 emojiMaps 变量值即可。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
window.valine = new Valine({
  el:'#vcomment',
  master:'#{theme.valine.master}',
  friends:'#{theme.valine.friends}',
  #省略....
  enableQQ: #{theme.valine.enableQQ},
  requiredFields: requiredFields,
  emojiMaps: {
            "1":"https://fastly.jsdelivr.net/gh/lete114/CDN/emoji/1.gif",
            "001":"https://fastly.jsdelivr.net/gh/lete114/CDN/emoji/001.png",
            "002":"https://fastly.jsdelivr.net/gh/lete114/CDN/emoji/002.png",
            "003":"https://fastly.jsdelivr.net/gh/lete114/CDN/emoji/003.png",
            #省略....
            "0104":"https://fastly.jsdelivr.net/gh/lete114/CDN/emoji/104.jpg",
            "0105":"https://fastly.jsdelivr.net/gh/lete114/CDN/emoji/105.jpg",
            "0106":"https://fastly.jsdelivr.net/gh/lete114/CDN/emoji/106.gif"
        }
});

表情包效果图
image.png

5）评论区域样式美化
主题配置文件中找到如下代码，进行js文件的替换即可：

1
2
3
4
CDN:
 # 评论美化
 # valine: https://fastly.jsdelivr.net/npm/valine/dist/Valine.min.js
 valine: https://fastly.jsdelivr.net/gh/HCLonely/Valine@latest/dist/Valine.min.js

侧边栏显示最新评论配置

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
# Aside widget - Newest Comments
newest_comments:
  enable: true
  sort_order: # Don't modify the setting unless you know how it works
  limit: 6
  storage: 10 # unit: mins, save data to localStorage
  avatar: true
  # You can only choose one, or neither
  # 设置最新评论显示 Valine 的
  valine: true
  github_issues:
    enable: false
    repo:
  disqus:
    enable: false
    forum:
    api_key:
  twikoo: false
  waline: false

如果不想在某个页面显示评论区，可以在对应页面设置 Front-matters 属性，即 comments: false

到此，Butterfly 主题页面添加Valine评论系统已完成，下篇文章将讲解 Twikoo 评论系统的搭建，个人也比较推荐后者。

参考：

Lete乐特：https://blog.lete114.top/article/Valine-LeanCloud-Config.html