Valine评论系统详解

写在最前面：本教程把Valine评论系统分为，前端个性化修改和后台管理系统两个部分来写，很多已经能百度到的教程我不想再过多的赘述，教程偏进阶，如果是小白或者新手建议先看过客之评论系统搭建，有什么问题就给我留言吧！

教程说明

本文参考

• Valien官方说明文档
• 过客之评论系统搭建，小白必看
• Hexo博客valine评论微信提醒，进阶必看

教程版本

由于发现教程的一些不足和错误，这里对教程进行一个版本说明，有问题可以给我留言或者私我

• 2.0

1. 添加博主，小伙伴，访客标签
2. 添加浏览器和操作系统图标，需 fontawesomeV5 支持
3. 邮箱检测更严格
4. 增加 QQ 邮箱识别（原版只能通过昵称栏输入 QQ 号识别）
5. meta placeholder 可自定义

先看看效果

接着说一下为什么是2.0版本，首先我看了源码，需要修改的地方太多，不方便以后valine的升级，追求稳定的不推荐魔改，如果一定要改，参考下方个性化修改2.0的教程

然后可能有的小伙伴问，这么好的功能为啥不让作者直接添加呢？

版本说明

最新对应的js下载地址为：

https://unpkg.com/valine/dist/Valine.min.js格持签.min.js`文件里即可，但是之前的修改内容会消失从v1.4.6~v1.4.11主要是增加以下几个新功能

• A 新增必填项
• A 新增评论框获取QQ头像和QQ昵称
• A 新增自定义表情
• 修复了自动拉取QQ头像和QQ昵称的bug

我的目标是评论栏简洁，清楚，不需要评论的人填写太多参数，如下

Valine前端个性化修改

预备工作

在魔改之前需要进行一些预备工作，主要是去除bug，更新到最新版本并禁止自动更新

修复bug

在最新的版本中，官方提示v1.4.7+ 出现Code 98 提示是已知Bug，将在下个版本更新。 若要自己动手解决，请先确认是否开启了主题自带的leancloud_visitor，如果开启了请先关闭(和Valine有冲突)。 然后删掉页面中的av-min.js再试！

av-min.js位于hexo主题文件夹下的source/libs/valine/av-min.js，官方表示已经修复，但我还是有报错，所以干脆把av-min.js给删了

禁止自动更新

在主题的配置文件中，找到libs下的js，如果Valine这里设置的是https://unpkg.com/valine/dist/Valine.min.js，表示自动更新到最新版本，这里我们修改为/libs/valine/Valine.min.js，就不会再更新了，并将该Valine.min.js中内容替换成最新的js

libs:
  css:
	。。。。
  js:
	。。。。
    # 鼠标点击
	。。。。
    valine: /libs/valine/Valine.min.js # 若想保持最新版，请替换为 https://unpkg.com/valine/dist/Valine.min.js  默认为 /libs/valine/Valine.min.js
    jqcloud: /libs/jqcloud/jqcloud-1.0.4.min.js
    tocbot: /libs/tocbot/tocbot.min.js
    。。。。

这里说明一下并是不能更新了，以后手动更新就可以了，自动更新可能导致评论系统和自己的博客不兼容，并不是最新版本就是最好的

自动拉取QQ头和自定义表情

修改valine.ejs

打开主题文件夹下layout/_partial/valine.ejs，拉到最下面，有这样一段JavaScript代码

<script src="<%- theme.jsDelivr.url %>/libs/valine/av-min.js"></script>
<script src="<%- theme.jsDelivr.url %><%- theme.libs.js.valine %>"></script>
<script>
    new Valine({
        el: '#vcomments',
        appId: '<%- theme.valine.appId %>',
        appKey: '<%- theme.valine.appKey %>',
        
。。。。。。

在官方文档配置项已经有了详细说明，这里我去除一些参数，并增加一些修改参数，如果嫌麻烦，可以参考我的配置

<script src="<%- theme.jsDelivr.url %>/libs/valine/av-min.js"></script>
<script src="<%- theme.jsDelivr.url %><%- theme.libs.js.valine %>"></script>
<script>
    new Valine({
        el: '#vcomments',
        appId: '<%- theme.valine.appId %>',
        appKey: '<%- theme.valine.appKey %>',
        visitor: '<%- theme.valine.visitor %>' === 'true',
        avatar: '<%- theme.valine.avatar %>',
        pageSize: '<%- theme.valine.pageSize %>',
        lang: '<% if (config.language == "zh-CN") {  %>zh-cn<% } else { %>en<% } %>',
        placeholder: '<%= theme.valine.placeholder %>',
        enableQQ: '<%= theme.valine.enableQQ %>', 
        meta : ['nick'],
        requiredFields: ['nick'], 
        emojiCDN: 'https://cdn.jsdelivr.net/gh/ccjpro/storage/emofaces/', 
        emojiMaps: {
		"tv2": "[tv_doge].png",
		"tv3": "[tv_亲亲].png",
		"tv4": "[tv_偷笑].png",
		"tv5": "[tv_再见].png",
		"tv6": "[tv_冷漠].png",
		"tv7": "[tv_发怒].png",
		"tv8": "[tv_发财].png",
		"tv9": "[tv_可爱].png",
		"tv10": "[tv_吐血].png",
		"tv11": "[tv_呆].png",
		"tv12": "[tv_呕吐].png",
		"tv13": "[tv_困].png",
		"tv14": "[tv_坏笑].png",
		"tv15": "[tv_大佬].png",
		"tv16": "[tv_大哭].png",
		"tv17": "[tv_委屈].png",
		"tv18": "[tv_害羞].png",
		"tv19": "[tv_尴尬].png",
		"tv20": "[tv_微笑].png",
		"tv21": "[tv_思考].png",
		"tv22": "[tv_惊吓].png",
		"tv23": "[tv_打脸].png",
		"tv24": "[tv_抓狂].png",
		"tv25": "[tv_抠鼻].png",
		"tv26": "[tv_斜眼笑].png",
		"tv27": "[tv_无奈].png",
		"tv28": "[tv_晕].png",
		"tv29": "[tv_流汗].png",
		"tv30": "[tv_流泪].png",
		"tv31": "[tv_流鼻血].png",
		"tv32": "[tv_点赞].png",
		"tv33": "[tv_生气].png",
		"tv34": "[tv_生病].png",
		"tv35": "[tv_疑问].png",
		"tv36": "[tv_白眼].png"
}
    });
</script>

这里主要说明一下几个选项

• enableQQ：强制拉取qq头像
• meta：调整需要填写的选项，默认值:['nick','mail','link']，分别对应，昵称，邮箱和网址，为了简洁仅留下昵称选项，就是['nick']
• requiredFields：必填项，默认值:['nick','mail','link']，我这里设置了昵称必填
• emojiCDN: 表情包的CDN图床，你可以设置成自己的图床
• emojiMaps: 自定义表情，这里设置成b站表情包，你可以自己添加图片

emojiCDN和emojiMaps不填写的话为默认微博表情

默认值:['nick','mail','link']

修改主题配置文件

我的配置如下，其中对几项参数进行说明：

• avatar：默认头像参数，参考官方https://valine.js.org/avatar.html
• placeholder：不写评论时，空白区域语句
• enableQQ：是否开启强制拉取qq头像

# Valine 评论模块的配置，默认为不激活，如要使用，就请激活该配置项，并设置 appId 和 appKey.
valine:
  enable: true
  appId: 你的id
  appKey: 你的key
  visitor: true
  # 默认头像展示方式，小怪物
  avatar: 'monsterid' 
  pageSize: 10
  # 评论区默认的语句
  placeholder: '填写QQ号就能评论，快来一发吧~' # Comment Box placeholder
  # 强制QQ
  enableQQ : true
  # 背景图
  background: /medias/comment_bg.png

进一步优化

做完上面那些，我依然还不是很满意，原因有3个

1. 需要填写项太多，这里有昵称，邮箱和网址，不够简洁(通过上面meta参数已经可以修改)
2. 网址的填选项到了第二排，且横线太长
3. 昵称这里我是希望提示大家输入qq号

那只能修改源码了，建议用vscode等开发能力强的工具打开主题文件夹下source/libs/valine/Valine.min.js文件，初次打开，一团乱麻，建议格式化一下，代码就清爽很多

修改昵称邮箱和网址的输入项

1. 快捷键检索nick

找到以下代码，其中nick.length表示昵称长度，这里表示强制昵称要大于3个字符，我把他修改成1。当然你可以在这里加入一些正则条件，使得如果输入的不是qq号，就让他报错

   。。。     
        var M = e.$el.find(".vsubmit"),
            z = function (t) {
              if (
                e.config.requiredFields.indexOf("nick") > -1 &&
                $.nick.length < 3
              )
                return (
                  h.nick[0].focus(),
                  void e.$el
                    .find(".status-bar")
                    .text("" + e.i18n.t("nickFail"))
                    .empty(3e3)
。。。

2. 快捷键检索昵称

找到以下代码，这里我将nick修改为QQ号，将nickFail(报错返回语句)修改为：请输入正确的QQ号

function (e, t) {
   e.exports = {
     nick: "QQ号",
     mail: "邮箱",
     link: "网址(http://)",
     nickFail: "请输入正确的QQ号",
     mailFail: "请填写正确的邮件地址",
     sofa: "来发评论吧~",
     submit: "提交",
     reply: "回复",
     cancelReply: "取消回复",
     comments: "评论",
     cancel: "取消",
     confirm: "确认",

3. 修改邮箱相关，搜索mail，方法参上

4. 修改网址相关，搜索link，方法参上

修改昵称邮箱和网址的横线

这个昵称栏太长，快捷键搜索.v[data-class=v] .vwrap .vheader.item1 .vinput找到width这个地方，修改成20%(自行修改)

.vwrap .vheader.item1 .vinput{width:20%}.v[data-class=v]

邮箱，搜索：.v[data-class=v] .vwrap .vheader .vinput，修改width参上

网址，搜索：.v[data-class=v] .vwrap .vheader .vinput，修改width参上

如果是valine的其他版本，或者没有找到对应参数，请用f12调试工具找到对应参数，再修改即可

最后看下效果

个性化修改2.0

请先阅读教程版本2.0，如果你想好了可以更新了，确保之前的预备工作已经完成。这个魔改我只在butterfly主题见到过，现在谈谈matery主题怎么改，本教程参考添加博主标签

1. 下载valine1.4.14魔改代码

https://gitee.com/lovelijunyi/mycode/blob/master/Valine.min.js

直接覆盖到主题文件夹下source\libs\valine的Valine.min.js文件

2. 打开主题文件夹下layout/_partial/valine.ejs，修改参数代码

参数	类型	说明	默认	示例
tagMeta	Array	标签要显示的文字	[]	[“博主”,“小伙伴”,“访客”]
master	Array/String	md5 加密后的博主邮箱	[]	[“07f8538a08b496829465d768f94ee49b”]
friends	Array	md5 加密后的小伙伴邮箱	[]	同理
metaPlaceholder	Object	meta placeholder	{}	{“nick”:“昵称 / QQ 号”,“mail”:“邮箱 (必填)”}

然后对参数简单说明一下：

• tagMeta：支持三个标签，内容可以自定义，通过邮箱地址来匹配你是博主还是访客
• master：主人邮箱，需要MD5加密，可以参考这个网站：在线加解密
• friends：小伙伴邮箱，需要MD5加密
• metaPlaceholder：终于支持直接修改昵称邮箱和网址的输入项了，不然需要到源码去搜索修改

我的部分配置代码是这样的，仅做参考：

<script src="<%- theme.jsDelivr.url %>/libs/valine/av-min.js"></script>
<script src="<%- theme.jsDelivr.url %><%- theme.libs.js.valine %>"></script>
<script>
    new Valine({
        el: '#vcomments',
        appId: '<%- theme.valine.appId %>',
        appKey: '<%- theme.valine.appKey %>',
        visitor: '<%- theme.valine.visitor %>' === 'true',
        avatar: '<%- theme.valine.avatar %>',
        pageSize: '<%- theme.valine.pageSize %>',
        lang: '<% if (config.language == "zh-CN") {  %>zh-cn<% } else { %>en<% } %>',
        placeholder: '<%= theme.valine.placeholder %>',
        enableQQ: '<%= theme.valine.enableQQ %>', 
        meta : ['nick'],
        requiredFields: ['nick'], 
        tagMeta : ["博主小弋","小伙伴","访客"],
        master : ["07f8538a08b496829465d768f94ee49b"],
 。。。

Valine后台管理

Valine的后台是基于LeanCloud，这次主要是要实现功能

• 增强评论系统，添加Valine Admin
• 设置评论回复提醒，支持QQ，微信，邮件提醒等
• 增添删改评论
• 支持@对方时给对方发送邮件，并自带主题

增强评论系统

增强评论系统Valine-admin，才可以实现更多功能，例如：支持评论提醒等，打开LeanCloud依次点击，云引擎 -> 设置 -> 代码库，将原来的项目地址换成

• 原版，https://github.com/DesertsP/Valine-Admin
• 小康改版，https://github.com/sviptzk/Valine-Admin-Server

本教程是更新的是小康改版，支持更多功能

接着点击，云引擎 -> 部署 -> 点击部署，如下图，记住不是点击重启，是部署，等待片刻至部署完毕

设置环境变量(各种提醒功能)

提醒主要是通过增加环境变量实现的，依次点击，云引擎 -> 设置 -> 自定义环境变量

参数表如下：

变量	示例	说明
SITE_NAME	Deserts	[必填]博客名称
SITE_URL	https://deserts.io	[必填]首页地址
SMTP_SERVICE	QQ	[新版支持]邮件服务提供商，支持 QQ、163、126、Gmail 以及 更多
SMTP_USER	xxxxxx@qq.com	[必填]SMTP登录用户
SMTP_PASS	ccxxxxxxxxch	[必填]SMTP登录密码（QQ邮箱需要获取独立密码）
SENDER_NAME	Deserts	[必填]发件人
SENDER_EMAIL	xxxxxx@qq.com	[必填]发件邮箱
ADMIN_URL	https://xxx.leanapp.cn/	[建议]Web主机二级域名，用于自动唤醒
BLOGGER_EMAIL	xxxxx@gmail.com	[可选]博主通知收件地址，默认使用SENDER_EMAIL
AKISMET_KEY	xxxxxxxxxxxx	[可选]Akismet Key 用于垃圾评论检测，设为MANUAL_REVIEW开启人工审核，留空不使用反垃圾
SCKEY	SCUxxxxxxxx	[可选]Server酱 SCKEY 用于微信通知，
QMSG_KEY	4122XXXX	可选https://qmsg.zendee.cn/ 获取您的专属密钥
QQ	535668586	用于接受的qq，不填为全部支持多个qq用英文逗号分隔
QQ_SHAKE	true	是否开启qq戳一戳功能
DISABLE_EMAIL	true	如果存在值，代表关掉邮件通知
TEMPLATE_NAME	custom2	设置回复邮件的主题样式

以上必填参数请务必正确设置。

其中，

• QQ提醒通过Qmsg实现，进入官网，登录账号（qq 或者神邸用户都可以），填入环境变量即可

变量名	说明	示例
QMSG_KEY	Qmsg 酱的密钥	243234xxxxxxxxxjiier
QQ	用于接受消息的 qq，也就是第一步添加的 QQ 号（自己用于接收消息的 QQ 号）	123456789

• 微信提醒通过sever酱，登录注册后就会提供，只有参数就是SERVER_KEY

下面是我所填选的参数，请参考

这里给自己通知的话，我设置了sever酱和邮件提醒，qq提醒没弄(个人感觉sever酱的提醒界面看起来比qq舒适)，TEMPLATE_NAME参数设置为custom2，当回复他人时，会有qq邮件提醒他，效果如下

防止服务器休眠

关于自动休眠的官方说法：点击查看

目前最新版的 Valine Admin 已经可以实现自唤醒，即在 LeanCloud 云引擎中定时请求 Web 应用地址防止休眠。对于夜间休眠期漏发的邮件通知，自动在次日早上补发。务必确保配置中设置了 ADMIN_URL 环境变量，并在第 5 步添加了两个云函数定时任务。

目前实现了两种云函数定时任务：(1) 自动唤醒，定时访问 Web APP 二级域名防止云引擎休眠；(2) 每天定时检查 24 小时内漏发的邮件通知。

进入云引擎 - 定时任务中，创建定时器，创建两个定时任务。

选择 self-wake 云函数，Cron 表达式为 0 0/20 7-23 * * ?，表示每天早 7 点到晚 23:59 点每隔 20 分钟访问云引擎，ADMIN_URL 环境变量务必设置正确：

同理再选择 resend-mails 云函数，Cron 表达式为 0 59 7 * * *，表示每天早 8 点检查过去 24 小时内漏发的通知邮件并补发

最后就是两个函数

评论管理

1. 一种是通过设置环境变量ADMIN_URL实现后台管理系统，但是要绑定自己的域名。至于可以调整成国际版，但是国际版有明显的访问量限制，这里也不再赘述

2. 直接数据库管理，这也是我常用的方式，依次点击，存储 -> 结构化数据 -> Comment，这里就能增添删改你的评论了

3. 依次点击，存储 -> 导入导出，就可以备份或者导入你的评论数据，但是注意：每天中午 12 点前可进行数据导出，过时不候。

Tips

写在最后的原因是不想被坏人看到！！！

hexo博客给Valine添加评论自动微信推送，这种通过js代码实现sever酱，的方法也不错

var title1="text=KZblog又有新评论啦~！--by Valine"
var SCKEY_Server=""
var ValineButton=document.getElementsByClassName("vsubmit vbtn")[0];
function send_valine_Server(){
    var text="desp=";
    var pagename=document.title;
    var wz=pagename.indexOf('|');
    var res=pagename.substring(0,wz);
    var pageurl=document.URL;
    var ptime=new Date();
    var vnick=document.getElementsByClassName("vnick vinput")[0].value;
    var vmail=document.getElementsByClassName("vmail vinput")[0].value;
    var vlink=document.getElementsByClassName("vlink vinput")[0].value;
    var veditor=document.getElementsByClassName("veditor vinput")[0].value;
    var data=text+"|昵称："+"|邮箱："+"|网站地址："+"|当前页面："+"|评论内容："+"|跳转链接："+"|评论时间"+"\n"+"|----|----|----|----|"+"\n"+"|   "+vnick+"   |   "+vmail+"  |  "+vlink+"|   "+res+"| "+veditor+"| "+pageurl+"|" +ptime.toLocaleString()+"|";
    var httpRequest = new XMLHttpRequest();//第一步：创建需要的对象
    httpRequest.open('POST', 'https://sc.ftqq.com/'+SCKEY_Server+'.send', true); //第二步：打开连接
    httpRequest.setRequestHeader("Content-type","application/x-www-form-urlencoded");//设置请求头 注：post方式必须设置请求头（在建立连接后设置请求头）
    httpRequest.send(title1+"&"+data);//发送请求 将情头体写在send中
};
ValineButton.onclick=send_valine_Server;

就是有一个尴尬之处，通过F12工具可以直接检索到你的SCKEY_Server，这就意味着可以对微信就行轰炸，太危险了。