Hexo优化 --- 一款极简的评论系统

演示

之前也用多很多评论系统,包括多说,网易云跟帖,Coding Comments…,但是这些评论系统,要不就是稳定性差,要不就是需要繁琐的登录,还有的直接停止服务了。

好了,废话不多说,先看今天的主角长什么样:

image_1bso0bvjd1eb111buici1bbl1o7g2g.png-35kB

Valine – 一款基于 Leancloud 的极简风评论系统

使用方法

获取 Leancloud Key

因为是基于 Leancloud 的评论系统,所以需要先注册一个 Leancloud 账号。

  1. 点击这里注册 Leancloud 账号。
  2. 创建一个应用,应用名随意。
    image_1bsnlr623ktcev31p4fnvb1duq9.png-16.5kB
  3. 进入刚才创建的应用。设置 -> 应用 Key,这里的 App IDApp Key,复制下来,下一步要用。
    image_1bsnluq5t1uon17u81orh4nhi111m.png-58.3kB

配置到页面上

由于 Hexo 主题现在没有内置 Valine 评论系统,所以我们要手动修改 Hexo Next 主题的配置。

为了保险起见,推荐你先备份下 /themes/next/_config.yml/themes/next/layout/_partials/comments.swig。以防出现不备。

修改_config.yml

修改主题目录下的 /themes/next/_config.yml 中添加(如果现在使用着其他评论系统,请先去掉其他评论系统的配置):

1
2
3
4
valine:
enable: true
appId: Your_AppId ##你的 Leancloud App ID
appKey: Your_AppKey ##你的 Leancloud App Key

修改 comments.swig

注:因为我没有其他的评论系统需求,所以将其他评论系统的内容的删掉了。

打开 /themes/next/layout/_partials/comments.swig整个文件修改为:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
{% if page.comments %}
<div class="comments" id="comments"></div>
{% if (theme.valine and theme.valine.enable)%}
<script src="//cdn1.lncld.net/static/js/3.0.4/av-min.js"></script>
<script src="//cdn.jsdelivr.net/npm/valine@1.1.6/dist/Valine.min.js"></script>
<script>
new Valine({
av: AV,
el: '.comments',
notify: true, // 邮件提醒 v1.1.4新增,下一步中有具体的邮箱设置
verify: true,
app_id: '{{ theme.valine.appId }}',
app_key: '{{ theme.valine.appKey }}',
placeholder: 'ヾノ≧∀≦)o来啊,快活啊!'
});
</script>
{% endif %}
{% endif %}

设置邮箱提醒

上一步的 notify 选项为 true 的情况下才需要这个设置,如果不需要邮件提醒,则直接跳过即可。

进入 Leancloud 选择你的评论所存放的 应用 > 设置 > 邮件模板,按下图设置好 用于重置密码的邮件主题 > 然后 保存

image_1bsnv5ksvmhi145t1u05nj5sd223.png-92.5kB

结语

好了,到此为止,重新部署后就可以看到结果了,部署之前,最好先执行以下 hexo clean 命令,防止出现缓存问题。如果出现下图所示的评论框,那么就是成功了。

本文参考:Valine – 一款极简的评论系统

坚持原创技术分享,您的支持将鼓励我继续创作!