valine评论系统使用

最新推荐文章于 2024-08-13 08:32:30 发布

置顶

卢well

最新推荐文章于 2024-08-13 08:32:30 发布

阅读量4.1k

点赞数 4

分类专栏：博客文章标签：前端 web github

本文链接：https://blog.csdn.net/qq_36949103/article/details/105206740

版权

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

摘要由CSDN通过智能技术生成

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

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

文章目录

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

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

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

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

手动配图：真香.gif

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

1. 注册登录

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

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

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

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

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

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

再把刚刚上面引入的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;}