valine评论系统使用

本文详细介绍了如何配置和美化Valine评论系统,包括注册登录 LeanCloud、修改博客渲染文件、设置文章阅读量、头像配置、评论框功能如前端验证和回复评论框跟随,以及关键的邮件提醒功能的配置,包括云引擎设置、邮件模板和定时任务的设定。通过这些步骤,实现了Valine评论系统的全面优化和邮件通知功能。
摘要由CSDN通过智能技术生成

文章在本人博客:valine评论系统使用
说下做了什么吧:

  • 评论功能
  • 美化工作
  • 前端验证
  • QQ头像
  • 邮件提醒


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

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

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

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

手动配图:真香.gif

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

1. 注册登录

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

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

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

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

我们只需要里面的AppIDAppKey,现在先开始下面操作,这两个等下会用到

valine应用keys

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;}
评论 4
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值