注明:以下方案是在 Valine 1.4.9 版本下完成,对于其他版本应该会根据实际情况修改参数,使用 F12 查看参数修改即可使用!(说明于 2020 - 04 - 25)
强烈推荐大佬们直接去看 cungudafa 对于 Valine 评论系统的优化,实在是棒,本人博客:EnjoyToShare 的评论系统也是根据这位大佬的文章阐述修改而来,在此对她表示感谢!
一款快速、简洁且高效的无后端评论系统。
Valine 诞生于 2017 年 8 月 7 日,是一款基于 LeanCloud 的快速、简洁且高效的无后端评论系统。
理论上支持但不限于静态博客,目前已有 Hexo、Jekyll、Typecho、Hugo、Ghost 等博客程序在使用 Valine。
Valine 特性
1 注册 LeanCloud
2 创建 Valine 应用,名称任意,例如 Valine-Admin
3 进入对应的应用,点击 设置 -> 应用 Keys
,获取 AppID
和 AppKey
4 在 Hexo 博客主题配置文件 next/_config.yml
中进行配置,大家也可根据自己来设置该评论设置。
valine:
enable: true # 设置为true,默认为false
appid: # 将应用key的App ID设置在这里
appkey: # 将应用key的App Key设置在这里
notify: false# 邮箱通知 , https://github.com/xCss/Valine/wiki,默认为false
verify: false# 验证码 默认为false
placeholder: Just go go ^_^ # 初始化评论显示,根据自己修改,这里默认,
avatar: monsterid # 头像风格,默认为mm,可进入网址:https://valine.js.org/visitor.html查看头像设置,这里有许多头像风格,进行设置
guest_info: nick,mail,link # 自定义评论标题
pageSize: 10 # 分页大小,10页就自动分页
visitor: true # 是否允许游客评论 ,进入官网查看设置:https://valine.js.org/visitor.html
了解更多 Valine 配置参数信息请参考:Valine 官方文档
1 查看评论
点击 存储 -> 结构化数据
,选择 创建 Class
,名称 Comment
,其他保持默认,以后就可在此 Class 内查看
注:选择
Valine
评论系统是因为支持国内网络,不需要连接外网(翻墙)就可以进行显示评论系统,而且很好管理,页面简单
2 文章阅读量统计
点击 存储 -> 结构化数据
,选择创建 Class
,名称 Counter
,其他保持默认,以后就可在此 Class 内查看
我喜欢简洁一点,所以想去掉这个提示。查看 Elements 可以看到这个 div,那么我只要移除这个 div 下的所有子节点,就可以去掉这个 Powered By 了。
但是怎么改呢?
使用 F12
,按 ctrl + shift + c
,鼠标放到 Powered By 的地方,点击一下
这个 div 里的就是要修改的,打开 themes/next/source/css/_custom/custom.styl
文件,添加以下内容:
// 隐藏 valine 的 powered by
.vcopy.txt-right {
display: none;
}
登录 leadcloud 后台,在应用的设置->邮件模板->邮件主题
(修改主题名称和内容,保存)
修改邮件主题:你在{{appname}}的评论收到了新的评论
内容如下:(链接为你的博客主页链接)
<p>Hi, {{username}}</p>
<p>你在 {{appname}} 的评论收到了新的回复,请点击查看:</p>
<p>
<a href="https://cungudafa.gitee.io" style="display: inline-block; padding: 10px 20px; border-radius: 4px; background-color: #3090e4; color: #fff; text-decoration: none;">马上查看</a></p>
点击 “保存” 按钮
并且修改主题配置文件:改成 true
邮件回复功能
登录 leadcloud 后台,在应用的设置->邮件模板->邮件主题
(修改主题名称和内容,保存)
修改邮件主题:你在{{appname}}的评论收到了新的评论
内容如下:(链接为你的博客主页链接)
<p>Hi, {{username}}</p>
<p>你在 {{appname}} 的评论收到了新的回复,请点击查看:</p>
<p>
<a href="https://cungudafa.gitee.io" style="display: inline-block; padding: 10px 20px; border-radius: 4px; background-color: #3090e4; color: #fff; text-decoration: none;">马上查看</a></p>
点击 “保存” 按钮
并且修改主题配置文件:改成 true
不是很 nice!下面给出一个加强 plus 版
这里会使用到 Valine Admin,Valine Admin 项目是一个对 Valine 评论系统的拓展应用,可增强 Valine 的邮件通知功能。基于 Leancloud 的云引擎与云函数,主要实现评论邮件通知、评论管理、自定义邮件通知模板等功能,而且还可以提供邮件 通知站长
和 @ 通知
的功能。
(1)设置云引擎
云引擎 -> 设置
填写代码库:https://github.com/wugenqiang/Valine-Admin
,保存自定义环境变量
,需要设置云引擎的环境变量以提供必要的信息,变量参数参考下面的配置项
配置项
变量 | 示例 | 说明 |
---|---|---|
SITE_NAME | HONGWEI’S Blog | [必填] 网站名称 |
SITE_URL | https://wugenqiang.github.io | [必填] 网站地址,最后不要加 / |
SMTP_SERVICE | [必填] 邮件服务提供商,支持 QQ、163、126、Gmail 以及 更多。 — 如这里没有你使用的邮件提供商,请查看自定义邮件服务器 | |
SMTP_USER | xxxx@qq.com | [必填] SMTP登录用户,一般为邮箱地址 |
SMTP_PASS | xxxx | [必填] SMTP登录密码,一般为授权码,而不是邮箱的登陆密码,请自行查询对应邮件服务商的获取方式 |
SENDER_NAME | HONGWEI’S Blog Valine 评论提醒 | [可选] 发件人 |
ADMIN_URL | https://xxx.leanapp.cn/ | [建议] Web主机二级域名,用于自动唤醒 |
TO_EMAIL | xxxxx@gmail.com | [可选] 指定站长收信邮箱,默认值为SITE_USER。用于 SMTP 发件人与站长收件人不一致的情况下使用。 |
TEMPLATE_NAME | rainbow | [可选] 通知邮件的模板(default和rainbow),参考高级功能 |
云引擎 -> 部署
,选择 Git 源码部署
,分支或版本号输入 master
,下载最新依赖(可选),部署(2)评论后台管理
云引擎 -> 设置
,在Web主机域名
位置点击申请
,获取二级域名,现在的二级域名不支持自定义,如果想好记请参考高级功能输入 https://kilqxscmpyri.leanapp.cn/ 登陆测试:输入你自己的二级域名
此后,可以通过 https://二级域名.leanapp.cn/
管理评论
(3)定时任务接收
防止云引擎休眠
免费版的 LeanCloud 容器,是有强制性休眠策略的,不能 24 小时运行:
分析了一下上方的策略,如果不想付费的话,最佳使用方案就设置定时器,目前基于 LeanCloud 自带定时器实现了两种云函数定时任务:
配置
云引擎 -> 设置
,配置自定义环境变量
,变量名ADMIN_URL
,变量值 Web 主机域名,即二级域名地址
,添加后重启容器环境变量才会生效云引擎 -> 定时任务
显示这样表明 OK
1 获取接口
一个是 QQ 头像的,一个是 Gravatar 国内源,它们的调用方式如下:
以上就是两个头像接口的信息,值得注意的是 Gravatar 后面的 s 分辨率参数可以随意定义,而 QQ 不行,QQ 只有几个有限的分辨率,比如 100, 200, 640,其它的数字会报 400 错误,所以 QQ 的 s 参数更像是一种清晰度,宽高还是通过 css 定义比较好。
2 步骤实现:
3 F12 查看源码–发现 valine 中显示头像的相关代码是:(关键标签:vimg
)
再以ctrl+F
快速查找(关键词:vimg
),不负众望,在 Valine.min.js 中找到
替换掉 src 即可,好了,思路清晰,下面开始实现:
引入 Valine.min.js 到本地themes/next/source/js/src/Valine.min.js
修改引入本地的 Valine
在 themes/next/layout/_partials/footer.swig 中引入 <script src="./js/src/Valine.min.js"></script>
注意你的 valine 的版本号,我这里是 v1.4.9
打开 Valine.min.js,ctrl+F
快速查找关键词:
(j.cdn+(0,s.default)(t.get("mail"))+j.params)
稍加换行如图所示:(换行按分号换行)
//var qq_img = m.cdn + a(e.get("mail")) + m.params;
var qq_img = E.cdn+(0,s.default)(t.get("mail"))+E.params;
if (t.get("mail").indexOf("@qq.com") >= 0) {
var prefix = t.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";
}
}
流程:
在 themes/next/layout/_partials/footer.swig 中引入:
<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>
在 themes/next/layout/_partials/footer.swig 中引入:
<script>
// 点击回复直接评论,官方版本点击回复时都是跳回到页面上方的评论框进行回复,评论框是固定不动的
// 参考https://immmmm.com/valine-diy,用到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();
})
})
</script>
在 themes/next/layout/_partials/footer.swig 中引入:
<!-- 评论框美化 -->
<style>
#comments .veditor{
min-height: 10rem;
background-image: url(https://gitee.com/wugenqiang/PictureBed/raw/master/CS-Notes/20200425091751.png);
background-size: contain;
background-repeat: no-repeat;
background-position: right;
background-color: rgba(255,255,255,0);
resize: none;}
</style>