valine评论系统使用

最开始用这个评论是在使用Sakura主题的时候，但是那个时候没认真看教程

觉得它没有邮件提醒功能、而且有的时候还会报错，就没使用了

改用的来必力和gitment，gitment使用起来挺方便的，能够邮件提醒，而且报的错误也能解决

emmmm……一直到现在，想接着用valine，然后搜了很多篇教程，发现valine还是非常好用的

手动配图：真香.gif

然后接下来就讲下怎样添加valine，对其进行美化和添加评论功能吧

注册登录

前往LeanCloud注册账号，如果已经有了账号，可以直接登录

接着进入控制台,左下角有两个按钮快速入门和创建应用，我们点击创建应用，随便输入一个名字，例如valine，其他默认，点击创建

现在在控制台出现了你刚刚创建的应用，点击这个应用的右上角图标

进入了设置界面，点击valine开发版下面那栏里的应用Keys

我们只需要里面的AppID和AppKey，现在先开始下面操作，这两个等下会用到

修改博客渲染文件

添加代码

现在到博客主题目录下打开layout目录，再进入_partial目录，在这个目录即MyBlog/themes/主题名/layout/_partial下新建comment.ejs文件，填入代码：

<% if (theme.valine && post.comments) { %>
    <script src='//unpkg.com/valine/dist/Valine.min.js'></script>
    <!-- 当然啦，这个可以在<head></head>中引入 -->
    <div id="vcomments"></div>
    <script>
    new Valine({
        el: '#vcomments' ,
        appId: '<%= theme.v_appId %>',
        appKey: '<%= theme.v_appKey %>',
        notify:false, 
        verify:false, 
        avatar:'mp', 
        placeholder: 'just go go' 
    });
    </script>
<% } %>

再将如下代码放到需要的位置，一般是在文章底部

<%- partial('_partial/comment') %>

判断讲解

加入判断是为了方便开启和关闭评论，首先是主题配置文件_config.yml中,加入

valine: true   # 修改为false关闭valine评论
v_appId: 刚刚获取的appid
v_appKey: 刚刚获取的appkey

接着是写的文章中文章名.md

---
title: 文章名
categories: 博客
date: 2020-03-30 12:16:01
comments: true    添加上这个，如果这篇文章不需要评论改为false，默认开启
tags: hexo
---
正文

这里需要注意一下：以前我使用post.comments没有问题，但是现在好像不行了，如果报的是有关post的错误，可以改为page.comments，或者直接去掉

配置项讲解

可以前往valine官网查看具体的使用

这里挑一些我们会用到的说下

el: '#vcomments', <!-- 这个字段只要你不改`div`的代码就不需要修改,如果你`div`不想用`id`，而是改为了`class="valine"`，那你就需要把这里改为'.valine`' -->
appId: '从LeanCloud的应用中得到的appId.',
appKey: '从LeanCloud的应用中得到的APP Key.',
placeholder: `快来评论啊`, <!-- 评论框占位提示符，写了之后会在评论框内出现文字 --> 
notify: true, <!-- 评论回复邮件提醒，等下我们需要配置 -->
verify: true, <!-- 验证码服务,设置为true评论的时候需要答题 -->
path: 'window.location.pathname', <!-- 用这个默认值就行 -->
avatar: 'mp', <!-- 看官网的介绍，可以配置为QQ头像 -->
pageSize: '5', <!-- 评论列表分页，每页条数,默认为10 -->
lang: 'en',   <!-- 语言，默认为中文：zh-cn -->
visitor: true, <!-- 文章访问量统计,这个还是挺好用的，等下说 -->
highlight: false,  <!-- 代码高亮，默认开启，这个不推荐关闭，去掉这个字段就行 -->
avatarForce: false  <!-- 每次访问强制拉取最新的评论列表头像,不推荐设置为true，目前的评论列表头像会自动带上Valine的版本号 -->

文章阅读量

可以使用不蒜子，但是偶尔会链接不到

按照valine的说法：

如果开启了阅读量统计，Valine 会自动检测 leancloud 应用中是否存在Counter类，如果不存在会自动创建，无需手动创建~

也就是如果没使用valine的话还需要自己添加一个Counter类，这个是在LeanCloud的存储中，但是我们现在配置了valine了就可以省事了

Valine会自动查找页面中class值为leancloud_visitors的元素，获取其id为查询条件。并将得到的值填充到其class的值为leancloud-visitors-count的子元素里：

so，我们只需要在comment.ejs的最后面加上这些即可

<span id="/<%= page.path %>" class="leancloud_visitors" data-flag-title="Your Article Title">
    <em class="post-meta-item-text">阅读量 </em>
    <i class="leancloud-visitors-count">1000000</i>
</span>

如果这个id不行的话，可以改为page.permalink完整的网址试下

头像配置

Valine 目前使用的是Gravatar 作为评论列表头像。
请自行登录或注册Gravatar，然后修改自己的头像。
评论的时候，留下在Gravatar注册时所使用的邮箱即可。

valine文档中说感谢gravatar.cat.net提供的镜像服务，那用QQ的可不可以呢

然后找到了这篇文章：

Valine-实现QQ邮箱识别生成头像地址（完美解决头像问题）

首先下载valine.min.js ，现在是1.3.10版本

再把刚刚上面引入的js改为

<script src='//unpkg.com/valine/dist/Valine.min.js'></script>
改为
<script src='/js/Valine1.3.10.min.js'></script>

打开js文件，搜索

(m.cdn+a(e.get("mail"))+m.params)+'">',

从这里往前直到var C=function(e,n,r)，都替换为

 var C=function(e,n,r){
    var qq_img=m.cdn+a(e.get("mail"))+m.params;//默认gravator头像接口
     if(e.get("mail").indexOf("@qq.com") >= 0){
        var prefix = e.get("mail").replace(/@.*/, "");//前缀
        var pattern=/^\d+$/g;  //正则表达式，数字
        var result= prefix.match(pattern);//match 是匹配的意思
        if(result!==null){
            qq_img = "//q1.qlogo.cn/g?b=qq&nk="+ prefix +"&s=100";
        }
    }
    var i=u.create("div",{class:"vcard",id:e.id}),o=m.hide?"":'<img class="vimg" src="'+ (qq_img)+'">',

然后填的是QQ邮箱的话就会显示QQ头像辣

当然如果你实在很懒，可以直接使用这个已经修改好了的

<script src='https://cdn.jsdelivr.net/gh/wallleap/cdn@latest/js/Valine1.3.10.min.js'></script>

评论框美化

默认的其实还可以，可素可以更漂亮肯定得加的

可以去看这篇博客Valine 评论框美化及功能优化

这里我就直接搬过来啦

.v .vwrap{padding: 0 0 44px;}.v .veditor{min-height:7rem;resize:none;}.v .vwrap .vedit{padding-top:0}.v .vwrap .vheader{width: 80%;bottom:0;position: absolute;background: #f7f7f7;}.v .vinput{padding:10px 15px;}.v .vwrap .vheader .vinput{border-bottom:0px}.v .vwrap .vedit .vctrl{margin-top:-44px;right:0;position:absolute;margin-right:-3px;}.v .vwrap .vcontrol{    position:absolute;right:0;bottom:0;width:20%;padding-top:0px;}.v .vwrap .vcontrol .col.col-80{width: 100%;}.v .vbtn.vsubmit{border-radius: 0;padding: 0;color: #fff;line-height: 44px;width:100%;border: none;background:#1abc9c;}.v .vwrap .vedit .vctrl span.vpreview-btn,.v .vwrap .vcontrol .col.col-20,.v .vlist .vcard .vhead .vsys{display:none;}
@media screen and (max-width: 520px){
    .v .vwrap .vheader .vinput{width: 33.33%;padding:10px 5px;}
}

如果你需要底部有个图片可以加上

#veditor {
    background-image: url(背景图片地址);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: right;
    background-color: rgba(255,255,255,0);
    resize: vertical;
}

placeholder字段也能用上，使用今日诗词或者一言

<script src="https://sdk.jinrishici.com/v2/browser/jinrishici.js" charset="utf-8"></script>
<script type="text/javascript">
jinrishici.load(function(result) {
    var jrsc_plac =  result.data.content + "\n「" + result.data.origin.title + "」" + result.data.origin.dynasty + " · " + result.data.origin.author
    document.getElementById("veditor").setAttribute("placeholder",jrsc_plac);
});
</script>
<style>
textarea[id='veditor']::placeholder{
    color:#b3b3b3;font-size:14px;text-align:center;line-height:6rem;
}
</style>

评论框的功能

可能需要jQuery，先引入

<script src="https://cdn.jsdelivr.net/npm/jquery/dist/jquery.min.js"></script>

前端验证

valine自带的验证码也可以打开

主要是检查昵称和邮箱

<script>
    document.body.addEventListener('click', function(e) {
        if (e.target.classList.contains('vsubmit')) {
            const email = document.querySelector('input[type=email]');
            const nick = document.querySelector('input[name=nick]');
            const reg = /^[A-Za-z0-9\u4e00-\u9fa5]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/;
            if (!email.value || !nick.value || !reg.test(email.value)) {
                const str = `<div class="valert text-center"><div class="vtext">请填写正确的昵称和邮箱！</div></div>`;
                const vmark = document.querySelector('.vmark');
                vmark.innerHTML = str;
                vmark.style.display = 'block';
                setTimeout(function() {
                    vmark.style.display = 'none';
                    vmark.innerHTML = '';
                }, 2500);
            }
        }
    });
</script>

点击回复评论框跟随

还是immmmm的

官方版本点击回复时都是跳回到页面上方的评论框进行回复，评论框是固定不动的。比较合理的是：点哪条的回复，评论框就显示在此条评论下方。避免页面跳上跳下。
相关 jQuery 代码：

$(document).ready(function(){
    $('.vemoji-btn').text('😀');
    $("#vcomments").on('click', 'span.vat',function(){
        $(this).parent('div.vmeta').next("div.vcontent").after($("div.vwrap"));
        $('textarea#veditor').focus();
    })
})

邮件提醒

重头戏来了

好不容易搭了个博客，结果有人评论我们不能及时回复，这体验感多差

gitment、gitalk都是用的GitHub的issue，能够轻松地发送邮件提醒

而valine呢

有大佬就弄出了valine-Admin，可以结合LeanCloud实现邮箱提醒功能

项目地址：Valine-Admin

云引擎设置

回到我们在LeanCloud创建的应用valine，点击左边的第二个选项云引擎

点击web组下方的设置

在代码库的下方填上https://github.com/DesertsP/Valine-Admin.git，点击方框右边的保存

往下滑，在自定义环境变量这里添加如下变量

这些下面有解释，我们先接着往下滑，把Web 主机域名启用

变量	示例	说明
SITE_NAME	Deserts	[必填]博客名称
SITE_URL	https://deserts.io	[必填]首页地址
*SMTP_SERVICE*	QQ	[新版支持]邮件服务提供商，支持 QQ、163、126、Gmail 以及更多
SMTP_USER	[email protected]	[必填]SMTP登录用户
SMTP_PASS	ccxxxxxxxxch	[必填]SMTP登录密码（QQ邮箱需要获取独立密码）
SENDER_NAME	Deserts	[必填]发件人
SENDER_EMAIL	[email protected]	[必填]发件邮箱
ADMIN_URL	https://xxx.leanapp.cn/	[建议]Web主机二级域名，用于自动唤醒
BLOGGER_EMAIL	[email protected]	[可选]博主通知收件地址，默认使用SENDER_EMAIL
AKISMET_KEY	xxxxxxxxxxxx	[可选]Akismet Key 用于垃圾评论检测，设为MANUAL_REVIEW开启人工审核，留空不使用反垃圾
MAIL_SUBJECT	${PARENT_NICK}，您在${SITE_NAME}上的评论收到了回复	[可选]@通知邮件主题（标题）模板
MAIL_TEMPLATE	见下文	[可选]@通知邮件内容模板
MAIL_SUBJECT_ADMIN	${SITE_NAME}上有新评论了	[可选]博主邮件通知主题模板
MAIL_TEMPLATE_ADMIN	见下文	[可选]博主邮件通知内容模板

博客名、博客地址应该会填吧

邮件服务提供商，你使用的哪种就填哪个，比如我的是[email protected]，那么就填QQ。

SMTP登录用户填上你自己的邮箱

登录密码并不是真的登录密码，网易的自己搜一下网易邮箱登录授权码；QQ邮箱的为独立密码

发件人填自己昵称

发件邮箱和博主收件地址都可以填刚才的邮箱

二级域名就是刚刚开启的哪个

AKISMET_KEY，有三种选择：不添加，不开启审核；添加后设置为MANUAL_REVIEW人工审核；设为你注册https://akismet.com/development/后获取的key自动审核拦截垃圾评论

设置邮件模板

上面还有四个变量没说，这四个就是用来设置邮件模板的，当然，你也可以用LeanCloud自带的

两个标题就不说了

说下@的和通知博主的内容模板

可以直接设置为项目地址中给的

也可以用immmmm的：

MAIL_TEMPLATE 代码，自行替换logo图片地址：

<div style="padding:2em 10%;color:#b3b3b1;width:420px;margin:0 auto;font-size:14px";>
    <img style="display:block;width:50px;margin:0 auto" src="https://图片地址/logo.png">
    <p style="text-align:center;">Hi，<span style="color:#3eae5f"> ${PARENT_NICK} </span></p>
    <p style="font-size:13px;text-align:center;">有人回复了您在 <strong style="font-weight:bold"> ${SITE_NAME} </strong> 上的评论</p>
    <hr style="width:64px;border:0;border-bottom:1px solid #e5e5e5;margin:24px auto;">
    <div style="color:#333;overflow:hidden;">
        <p style="display:inline-block;float:left;"><span style="color:#3eae5f;font-weight:bold"> 您 </span><span>说：</span></p>
        ${PARENT_COMMENT}
    </div>
    <div style="color:#333;overflow:hidden;">
        <p style="display:inline-block;float:left;"><span style="color:#3eae5f;font-weight:bold"> ${NICK} </span><span>说：</span></p>
        ${COMMENT}
    </div>
    <p><a style="color:#ffffff;text-decoration:none;display:inline-block;min-height:28px;line-height:28px;padding:0 13px;outline:0;background:#3eae5f;font-size:13px;text-align:center;font-weight:400;border:0;border-radius:999em" href="${POST_URL}" target="_blank">点击查看</a></p>
    <hr style="width:64px;border:0;border-bottom:1px solid #e5e5e5;margin:24px auto;">
    <p><a style="display:block;color:#b3b3b1;text-decoration:none;text-align:center;" href="${SITE_URL}" target="_blank">${SITE_NAME}</a></p>
</div>

MAIL_TEMPLATE_ADMIN 通知博主邮件模板代码：

<div style="line-height:24px;font-size:13px;">
    <p><span style="color:#3eae5f"> ${NICK} </span> 说：</p>
    <p >${COMMENT}</p>
    <p style="font-size:12px;line-height:12px;"><a style="color:#b3b3b1;text-decoration:none;" href="${POST_URL}" target="_blank">${POST_URL}</a></p>
</div>

在这里面可用的变量有：

模板里的变量	说明
SITE_NAME	博客名称
SITE_URL	博客首页地址
POST_URL	文章地址（完整路径）
PARENT_NICK	收件人昵称（被@者，父级评论人）
PARENT_COMMENT	父级评论内容
NICK	新评论者昵称
COMMENT	新评论内容

在模板中使用的话，${变量名}

斜体的两个变量表示只能在被@的模板中使用

开始部署

点击左边的部署，再点击页面中的Git源码部署

在出现的页面中分支或版本号下方的框中填入master，勾选☑️下载最新依赖复选框

再点击部署,接着等待部署完成即可

设置定时任务

到上一步已经完成了邮箱通知提醒的功能了

但是免费的LeanCloud有休眠政策，具体能运行几小时忘记了，但是不能全天运行

也就是说可能会漏掉一些评论的提醒

刚好LeanCloud有一个定时任务，可以弥补这个缺陷

不能全天24h一直运行，那么我运行一会休息一会，在运行的那个时间段里把邮件补发一下总行吧

这就是定时任务所执行的内容

点击定时任务，创建两个定时任务，分别填：

名称：自动唤醒 生产环境：self-wake Cron表达式：0 0/30 7-23 * * ?
名称：定时检查24小时内漏发的邮件通知 生产环境：resend-mails Cron表达式：0 0 8 * * ?

设置完成之后就OK啦

这样就拥有了一个完美的评论系统了