valine评论系统使用

博客 > valine hexo
发布时间 :
字数:5k 阅读 : 评论:
  1. 注册登录
  2. 修改博客渲染文件
    1. 添加代码
    2. 判断讲解
    3. 配置项讲解
  3. 文章阅读量
  4. 头像配置
  5. 自定义表情
  6. 评论框美化
  7. 评论框的功能
    1. 前端验证
    2. 点击回复评论框跟随
  8. 邮件提醒
    1. 云引擎设置
    2. 设置邮件模板
    3. 开始部署
    4. 设置定时任务

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

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

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

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

手动配图：真香.gif

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

emmmm，版本v1.4.0之后更新了很多内容，不得不说，这段时间作者真的是高产啊

但是不想推翻重写，因此直接在这篇博文上修改

更新内容

  • 去除QQ头像配置的内容，更新为新的方法
  • 按照官网更新配置项解释
  • 添加自定义表情用法
  • 去除评论框跟随，官方已支持
  • 美化的好多不能用了

注册登录

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

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

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

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

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

valine应用keys

当然啦，如果你的博客主题已经集成了valine，那么将这两个值填到_config.yml的相应位置就可以了，下面的教程就可以选择性查看了

修改博客渲染文件

添加代码

现在到博客主题目录下打开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 %>',
        avatar:'mp', 
        placeholder: 'just go go' ，
          enableQQ: true,
          // 设置Bilibili表情包地址
        emojiCDN: '//i0.hdslb.com/bfs/emote/', 
        // 表情title和图片映射
        emojiMaps: {
            "tv_doge": "6ea59c827c414b4a2955fe79e0f6fd3dcd515e24.png",
            "tv_亲亲": "a8111ad55953ef5e3be3327ef94eb4a39d535d06.png",
            "tv_偷笑": "bb690d4107620f1c15cff29509db529a73aee261.png",
            "tv_再见": "180129b8ea851044ce71caf55cc8ce44bd4a4fc8.png",
            "tv_冷漠": "b9cbc755c2b3ee43be07ca13de84e5b699a3f101.png",
            "tv_发怒": "34ba3cd204d5b05fec70ce08fa9fa0dd612409ff.png",
            "tv_发财": "34db290afd2963723c6eb3c4560667db7253a21a.png",
            "tv_可爱": "9e55fd9b500ac4b96613539f1ce2f9499e314ed9.png",
            "tv_吐血": "09dd16a7aa59b77baa1155d47484409624470c77.png",
            "tv_呆": "fe1179ebaa191569b0d31cecafe7a2cd1c951c9d.png",
            "tv_呕吐": "9f996894a39e282ccf5e66856af49483f81870f3.png",
            "tv_困": "241ee304e44c0af029adceb294399391e4737ef2.png",
            "tv_坏笑": "1f0b87f731a671079842116e0991c91c2c88645a.png",
            "tv_大佬": "093c1e2c490161aca397afc45573c877cdead616.png",
            "tv_大哭": "23269aeb35f99daee28dda129676f6e9ea87934f.png",
            "tv_委屈": "d04dba7b5465779e9755d2ab6f0a897b9b33bb77.png",
            "tv_害羞": "a37683fb5642fa3ddfc7f4e5525fd13e42a2bdb1.png",
            "tv_尴尬": "7cfa62dafc59798a3d3fb262d421eeeff166cfa4.png",
            "tv_微笑": "70dc5c7b56f93eb61bddba11e28fb1d18fddcd4c.png",
            "tv_思考": "90cf159733e558137ed20aa04d09964436f618a1.png",
            "tv_惊吓": "0d15c7e2ee58e935adc6a7193ee042388adc22af.png",
            // ... 更多表情
        } 
    });
    </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: `快来评论啊`

评论框占位提示符，写了之后会在评论框内出现文字

path: 'window.location.pathname'

当前文章页路径，用于区分不同的文章页，用这个默认值就行

  • I. 请保证每个文章页路径的唯一性，否则可能会出现不同文章页下加载相同评论列表的情况。
  • II. 如果值为window.location.href，可能会出现随便加不同参数进入该页面，而被判断成新页面的情况。
avatar: 'mp'

看官网的介绍，可以配置为QQ头像

meta: ['nick','mail','link']

评论者相关属性，这里有三个：昵称、邮箱、网页链接

requiredFields: ['nick','mail']

设置必填项，默认为[]，匿名显示

pageSize: '5'

评论列表分页，每页条数,默认为10

lang: 'en'

语言，默认为中文：zh-CN

visitor: true

文章访问量统计,这个还是挺好用的，等下说

highlight: false

代码高亮，默认开启，这个不推荐关闭，去掉这个字段就行

avatarForce: false

每次访问强制拉取最新的评论列表头像,不推荐设置为true，目前的评论列表头像会自动带上Valine的版本号

recordIP: true

设置为true之后会记录评论者IP，默认为false

// 这里设置CDN, 默认微博表情CDN
emojiCDN: 'https://img.t.sinajs.cn/t4/appstyle/expression/ext/normal/', 
// 表情title和图片映射
emojiMaps: {
"smile":"e3/2018new_weixioa02_org.png",
"lovely":"09/2018new_keai_org.png",
// ... 更多表情
} 
enableQQ: true

启用昵称框自动获取QQ昵称和QQ头像, 默认关闭

文章阅读量

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

按照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版本

放到主题的source目录的js目录下

再把刚刚上面引入的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已经加入了QQ头像的内容，因此教程修改为以下内容：

仍然只需要引入官方原版的js文件，不需要在源代码中修改了

<script src='//unpkg.com/valine/dist/Valine.min.js'></script>

开启配置项中的昵称框自动获取QQ昵称和QQ头像功能

enableQQ: true;

自定义表情

很早就想把valine里的表情修改为B站表情了，可惜没找到好用的教程，没想到作者居然加入了这个功能

使用方法：

new Valine({
    el:'#vcomment',
    appId:'<Your_APP_ID>',
    appKey:'<Your_APP_KEY>',

    // 设置表情包地址
    emojiCDN: '//i0.hdslb.com/bfs/emote/', 
    // 表情title和图片映射
    emojiMaps: {
        "tv_doge": "6ea59c827c414b4a2955fe79e0f6fd3dcd515e24.png",
        "tv_亲亲": "a8111ad55953ef5e3be3327ef94eb4a39d535d06.png",
        "tv_偷笑": "bb690d4107620f1c15cff29509db529a73aee261.png",
        "tv_再见": "180129b8ea851044ce71caf55cc8ce44bd4a4fc8.png",
        "tv_冷漠": "b9cbc755c2b3ee43be07ca13de84e5b699a3f101.png",
        "tv_发怒": "34ba3cd204d5b05fec70ce08fa9fa0dd612409ff.png",
        "tv_发财": "34db290afd2963723c6eb3c4560667db7253a21a.png",
        "tv_可爱": "9e55fd9b500ac4b96613539f1ce2f9499e314ed9.png",
        "tv_吐血": "09dd16a7aa59b77baa1155d47484409624470c77.png",
        "tv_呆": "fe1179ebaa191569b0d31cecafe7a2cd1c951c9d.png",
        "tv_呕吐": "9f996894a39e282ccf5e66856af49483f81870f3.png",
        "tv_困": "241ee304e44c0af029adceb294399391e4737ef2.png",
        "tv_坏笑": "1f0b87f731a671079842116e0991c91c2c88645a.png",
        "tv_大佬": "093c1e2c490161aca397afc45573c877cdead616.png",
        "tv_大哭": "23269aeb35f99daee28dda129676f6e9ea87934f.png",
        "tv_委屈": "d04dba7b5465779e9755d2ab6f0a897b9b33bb77.png",
        "tv_害羞": "a37683fb5642fa3ddfc7f4e5525fd13e42a2bdb1.png",
        "tv_尴尬": "7cfa62dafc59798a3d3fb262d421eeeff166cfa4.png",
        "tv_微笑": "70dc5c7b56f93eb61bddba11e28fb1d18fddcd4c.png",
        "tv_思考": "90cf159733e558137ed20aa04d09964436f618a1.png",
        "tv_惊吓": "0d15c7e2ee58e935adc6a7193ee042388adc22af.png",
        // ... 更多表情
    } 
})

然后这里分享一下几个表情包：

cdn可以填https://cdn.jsdelivr.net/gh/wallleap/cdn@latest/tree/master/emote/xxx

xxx代表里面的几个目录，每个里都提供了一个包含该目录下所有图片的list.txt

bili B站表情包，里面有两种
cool 酷安表情包
qq   QQ表情包
tieba 百度贴吧
weibo 微博

我实在忘了这是在哪个地方找来的表情包了，所以暂时不声明原地址了，等找到了再加上

啊，还有一个老哥提供的，地址在下面

https://github.com/blogimg/emotion

评论框美化

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

可以去看这篇博客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 主机域名启用

Web主机域名

变量 示例 说明
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开启人工审核，留空不使用反垃圾
MAIL_SUBJECT ${PARENT_NICK}，您在${SITE_NAME}上的评论收到了回复 [可选]@通知邮件主题（标题）模板
MAIL_TEMPLATE 见下文 [可选]@通知邮件内容模板
MAIL_SUBJECT_ADMIN ${SITE_NAME}上有新评论了 [可选]博主邮件通知主题模板
MAIL_TEMPLATE_ADMIN 见下文 [可选]博主邮件通知内容模板

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

邮件服务提供商，你使用的哪种就填哪个，比如我的是xxx@qq.com，那么就填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啦

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

赏

文章标题:valine评论系统使用

文章字数:5k

本文作者:Luwang

发布时间:2020-03-30, 12:16:01

最后更新:2024-01-11, 16:41:20

原始链接:https://wallleap.cn/2020/03/30/hexoValine/

版权声明: "署名-非商用-相同方式共享 4.0" 转载请保留原文链接及作者。

×

喜欢就点赞,疼爱就打赏