菜单
菜单
文章目录
  1. 安装Valine
    1. 主题已集成Valine
    2. 主题未集成Valine
  2. 配置使用
    1. 获取appid和appkey
    2. 快速部署
      1. 环境变量和web域名设置
      2. 云引擎部署
  3. 评论美化
    1. 表情包
    2. 评论框背景图片
    3. 博主、小伙伴、访客标识
  4. 结束

Valine-Admin评论系统的安装使用以及美化

博客也运行了这么久,还是弄个评论系统吧

Valine】: 一种快速,简洁且高效的无预设评论系统。

Valine诞生于2017年8月7日,是一种基于LeanCloud的快速,简洁且高效的无标题评论系统。

理论上支持但不限于静态博客,目前已有Hexo,Jekyll,Typecho,Hugo,Ghost等博客程序在使用Valine

安装Valine

主题已集成Valine

PS: 不过目前大多数主题都已集成Valine

在主题根目录下的配置文件-config.yml文件中启用Valine

true

并在配置项里填入appidappkey的值即可

关于如何获取这两值后文会说到,若您主题已经集成此评论可直接右边目录跳转【配置与使用】阅读。

主题未集成Valine

在主题目录_partial下新建valine.ejs文件,有的可能需要新建在_partial/component/或者_partial/post/

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<div id="vcomment" class="comment"></div> 
<script src="//cdn1.lncld.net/static/js/3.0.4/av-min.js"></script>
<script src="//unpkg.com/valine/dist/Valine.min.js"></script>
<script>
var notify = '<%= theme.valine.notify %>' == true ? true : false;
var verify = '<%= theme.valine.verify %>' == true ? true : false;
window.onload = function() {
new Valine({
el: '.comment',
notify: notify,
verify: verify,
app_id: "<%= theme.valine.appid %>",
app_key: "<%= theme.valine.appkey %>",
placeholder: "<%= theme.valine.placeholder %>",
avatar:"<%= theme.valine.avatar %>"
});
}
</script>

comments.ejs文件的</div>前新增

1
<%- partial('valine') %>

addvl

没有此文件则新建一个,写入如下代码

1
2
3
4
<div class="comments <%= className %>">
<%- partial('valine') %>

</div>

再在layout.ejs</body>之前引入

1
2
3
4
5
<% if (theme.post.showComments && page.layout === 'post'){ %>
<%- partial('_partial/component/comments', {className: 'comments-post'}) %>
<% } else if (page.comments) { %>
<%- partial('_partial/component/comments', {className: 'comments-' + page.layout}) %>
<% } %>

完成以上,再到主题配置文件-config.yml下引入配置

1
2
3
4
5
6
7
8
9
10
11
valine:
enable: true # false关闭Valine
appid: # your leancloud application appid
appkey: # your leancloud application appkey
admin_email:
notify:true,
verify:false,
placeholder: (。・∀・)ノ゙嗨!欢迎评论呀! # comment box placeholder
avatar: monsterid # gravatar style
guest_info: nick,mail,link # custom comment header
pageSize: 10 # pagination size

注:有的主题comments.ejs的代码可能要引入到article.ejs或者post.ejs中去,即不需要建comments.ejs文件。

配置使用

获取appidappkey

由于其是基于LeanCloud的无后端的评论系统,所以我们需要去注册LeanCloud获取appidappkey

注册账号后即可创建一个应用

若使用国内版需要邮箱激活,并且实名认证,推荐使用国际版。

addAPP

进入刚刚创建的应用→设置→选择应用 Keys,即可能看到AppIDAppKey

I&K

快速部署

原版的Valine并不能满足我的需求,而Valine Admin 是 Valine 评论系统的扩展和增强,主要实现评论邮件通知、评论管理、垃圾评论过滤等功能。

所以使用的是 DesertsP大佬的Valine-Admin

环境变量和web域名设置

在刚刚创建的应用后台→云引擎→设置,添加环境变量以及web域名

adden

环境变量参数说明,除可选外其余为必填项,以下变量一定要保证正确!!!

变量示例说明
SITE_NAMESenorui’s Blog站点名称
SITE_URLhttps://senorui.top站点地址
SMTP_USERxxxx@senorui.comSMTP登录用户
SMTP_PASSxxxxxxSMTP登陆密码
SMTP_SERVICEYandex邮件服务提供商,支持QQ、163、126、Gmail以及更多
SENDER_NAMESenorui收件人
SENDER_EMAILxxxx@senorui.com发件邮箱
AKISMET_KEYxxxxxxxxxxxx(可选)Akismet Key 用于垃圾评论检测,注册
TEMPLATE_NAMEdefault邮件主题,default & rainbown两种

在应用后台,设置→安全中心→Web 安全域名,设置使用域名即可

webd

云引擎部署

在应用后台,部署→部署项目→Git部署,填写Git地址https://github.com/DesertsP/Valine-Admin.git,分支选择master,点击部署即可。

yunhost

yunhost

yunhost

yunhost

测试以下邮件通知是否正常

text

测试正常,邮箱能正常收到评论通知,OVER!!!

text

在应用后台,设置→邮件模板处添加邮件模板,保证网站访问者和站长均能收到回复的邮件。

主题名

1
(。・∀・)ノ゙嗨!你在{{appname}}的文章收到了新的评论

mailmod

内容:

1
2
3
4
5
<p>Hi, {{username}}</p>
<p>
你在 {{appname}} 的评论收到了新的回复,请点击查看:
</p>
<p><a href="站点首页地址" style="display: inline-block; padding: 10px 20px; border-radius: 4px; background-color: #3090e4; color: #fff; text-decoration: none;">马上查看</a></p>
注意: 做出以上配置信息修改后最好重启或者重新部署一下,以保证配置生效。

评论美化

(∪.∪ )…zzz

如何美化!超小白的我也是参考了大佬的博文,对本站主题进行了一点点点点的适配。

【博客Valine评论样式美化】: https://bestzuo.cn/posts/763113948.html

在此感谢大佬的分享!!!

表情包

官方的1.4+版本的Valine已经支持自定义表情包,可参阅官方文档

大佬的JS里已经集成了众多的表情包,直接使用即可

评论框背景图片

在博客CSS文件里加入评论样式代码即可

1
2
3
4
5
6
7
8
9
10
11
12
13
14
#veditor {
background-image: url(https://cdn.jsdelivr.net/gh/drew233/cdn/20200409110727.webp); /* 修改自己喜欢的图片链接即可 */
background-size: contain;
background-repeat: no-repeat;
background-position: right;
background-color: rgba(255, 255, 255, 0);
resize: vertical
}

/* 防止图片遮住输入框文字 */
#veditor:focus{
background-position-y: 200px;
transition: all 0.2s ease-in-out 0s;
}

让评论头像有动态性,给添加头像图片旋转效果

1
2
3
4
5
6
7
8
9
10
11
12
/* 头像图片旋转效果 */
img.vimg {
transition: all 1s /* 旋转时间为 1s */
}

img.vimg:hover {
transform: rotate(360deg);
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-o-transform: rotate(360deg);
-ms-transform: rotate(360deg);
}

博主、小伙伴、访客标识

这个要魔改的Valine才支持,此魔改版支持

  1. 添加博主,小伙伴,访客标签

  2. 添加浏览器和操作系统图标,需引入 fontawesome v5.0+ 的 CSS 样式

  3. 邮箱检测更严格(配合AKISMET效果更佳)

  4. 增加 QQ 邮箱识别并拉取QQ头像

  5. 可自定义meta placeholder

用法挺简单的,只需在Valine.min.js文件的masterfriends下填写需要添加MD5加密后的邮箱账号即可。

如下图,多个账号以数组形式添加即可。

mft

效果如图

last

【附下载】: Valine.min.js

结束

至此,Valine评论系统已趋向于完美。

在此再次感谢的大佬的分享!!!

本文作者: Senorui

本文链接: https://senorui.top/posts/7bde.html

版权声明: 本站所有文章除特别声明外,均为原创且采用【CC BY-NC-ND 4.0】许可协议,若转载请署名!

支持一下
感谢您支持Senorui哦!
  • 微信扫一扫
  • 支付宝扫一扫