valine评论系统使用
文章在本人博客：valine评论系统使用
说下做了什么吧：
- 评论功能
- 美化工作
- 前端验证
- QQ头像
- 邮件提醒
文章目录
- 1. 注册登录
- 2. 修改博客渲染文件
- 2.1 添加代码
- 2.2 判断讲解
- 2.3 配置项讲解
- 3. 文章阅读量
- 4. 头像配置
- 5. 评论框美化
- 6. 评论框的功能
- 6.1 前端验证
- 6.2 点击回复评论框跟随
- 7. 邮件提醒
- 7.1 云引擎设置
- 7.2 设置邮件模板
- 7.3 开始部署
- 7.4 设置定时任务
最开始用这个评论是在使用Sakura主题的时候，但是那个时候没认真看教程
觉得它没有邮件提醒功能、而且有的时候还会报错，就没使用了
改用的来必力和gitment，gitment使用起来挺方便的，能够邮件提醒，而且报的错误也能解决
emmmm……一直到现在，想接着用valine，然后搜了很多篇教程，发现valine还是非常好用的
手动配图：真香.gif
然后接下来就讲下怎样添加valine，对其进行美化和添加评论功能吧
1. 注册登录
前往LeanCloud注册账号，如果已经有了账号，可以直接登录
接着进入控制台,左下角有两个按钮快速入门和创建应用，我们点击创建应用，随便输入一个名字，例如valine，其他默认，点击创建
现在在控制台出现了你刚刚创建的应用，点击这个应用的右上角****图标
进入了设置界面，点击valine开发版下面那栏里的应用Keys
我们只需要里面的AppID和AppKey，现在先开始下面操作，这两个等下会用到
2. 修改博客渲染文件
2.1 添加代码
现在到博客主题目录下打开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') %>
2.2 判断讲解
加入判断是为了方便开启和关闭评论，首先是主题配置文件_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，或者直接去掉
2.3 配置项讲解
可以前往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的版本号 -->
3. 文章阅读量
可以使用不蒜子，但是偶尔会链接不到
按照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完整的网址试下
4. 头像配置
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>
5. 评论框美化
默认的其实还可以，可素可以更漂亮肯定得加的
可以去看这篇博客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.authordocument.getElementById("veditor").setAttribute("placeholder",jrsc_plac);
});
</script>
<style>
textarea[id='veditor']::placeholder{color:#b3b3b3;font-size:14px;text-align:center;line-height:6rem;
}
</style>
6. 评论框的功能
可能需要jQuery，先引入
<script src="https://cdn.jsdelivr.net/npm/jquery/dist/jquery.min.js"></script>
6.1 前端验证
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>
6.2 点击回复评论框跟随
还是immmmm的
官方版本点击回复时都是跳回到页面上方的评论框进行回复，评论框是固定不动的。比较合理的是：点哪条的回复，评论框就显示在此条评论下方。避免页面跳上跳下。
相关 jQuery 代码：
$(document).ready(function(){$('.vemoji-btn').text('
valine评论系统使用相关推荐
- Hexo折腾之改用Valine评论系统 - 更新域名绑定，评论后台管理
前几天给博客添加了来必力评论系统,但是加载速度实在是慢的可以,原因是来必力是在页面滑到底部的时候才开始加载,但是通过控制台看,来必力确实时间很久,很影响我自己的使用体验(嗯,没有别人,哭),所以在网上 ...
- hexo添加valine评论系统 (yilia主题)
hexo-yilia添加valine评论系统 配置步骤 一.创建应用 二.yilia下的配置文件 三.到此整个评论系统创建完成啦,看一下结果!如果遇到一些问题还可以参见[yilia增加valine]( ...
- Valine评论系统不能使用
1.Valine 评论系统不能使用 这几天发现 Valine 评论系统不见了,没法使用啦,发现原来是themes / next1 / layout / _third-party / comments ...
- 为使用matery主题的hexo增加Valine评论系统
为使用matery主题的hexo增加Valine评论系统 序言 环境准备 配置评论系统 管理评论 增强Valine系统 更换Valine的版本 更换表情 本文参考matery主题+Valine评论系统 ...
- 为 Hexo 博客添加 valine 评论系统
注册 LeanCloud 由于 valine 评论系统是放在 LeanCloud 上的,因此需要先打开 https://www.leancloud.cn/ 网址注册一个 LeanCloud 账号. 注 ...
- Valine评论系统无法正常使用问题
Valine评论系统无法正常使用 一.今天发现 Valine 评论系统无法使用啦,发现原来是valine里的av -min.js检查不到的原因. 官方也给了说法,是因为 leancloud.cn 以及 ...
- Hexo博客进阶：为Next主题添加Valine评论系统
文章目录 前言 根据读者反馈,Valine 评论系统在 Next 主题高版本 (7.+) 以上没有内置,且 Valine 已经很久没有更新维护了.如果想要配置体验 Valine 的,建议使用 Next ...
- Hexo yilia 主题添加 valine 评论系统
本文仅讨论在 yila 中所增加或修改的代码,有关 leancloud 的申请及配置,请参考我所参考的两篇博文: <Hexo yilia主题 添加valine评论系统> <Valin ...
- Valine评论系统
据我所知的hexo评论系统,我也就知道: Valine.LiveRe- 我之前用的是LiveRe,现在换成Valine了,虽然LiveRe比较方便,但为什么我还要换呢-原因只有一个 ---- 龟速.不 ...
最新文章
- 如何采用简化方法进行需求分析
- 2010最后一篇：使用PyQt4开发的一个开源小程序QaoBa
- 3a算法 isp_Isp图像算法工程师
- c++ 命名规则 private_【译】代码中如何写出更有意义的命名
- HDU 2504 又见GCD
- wireshark 过滤表达式
- 在线字符串长度计算，字符串统计工具
- duilib加载xml以及资源文件的路径问题
- nxlog以syslog方式发送日志
- 学计算机专业你后悔吗？为什么？
- 实现isPrime（）函数，参数是整数，如果整数是质数， 返回True，否则返回False
- 实现一个canvas画板
- 宽带拨号上网显示服务器失效,拨号上网失败 宽带连接错误651怎么办
- 文件服务器均衡负载,文件服务器均衡负载
- 计算机操作系统--Linux初试05
- 用docker搭建discuz论坛
- 找到右下角弹广告的真凶
- 高一上计算机思维导图,高一上思维导图.docx
- Httpwatch网盘下载
- 2018.3.15 《曾国藩传》张宏杰
热门文章