使用valine为博客添加评论功能

发表于 更新于 阅读次数： Valine：
本文字数： 4.2k 阅读时长 ≈ 4 分钟

前言

昨天被高渐离嘲笑没有评论功能，本来是不太想加的，因为加了可能也没人用，放着怪冷清的，不过 真香。

既然高先生都使用了Gitalk（为博客添加Gitalk评论插件–高渐离）我就不能用一个一样的是吧（手动滑稽。再看了看对于几个常见的评论系统的使用报告之后，我决定使用valine为我的博客提供评论功能。

简介

Valine - 一款快速、简洁且高效的无后端评论系统。

简单来说这是一个基于leancloud的快速、简洁且高效的无后端评论系统。理论上支持但不限于静态博客，目前已有Hexo、Jekyll、Typecho、Hugo 等博客程序在使用Valine。

具体功能详见官方文档。

使用

注册leancloud并创建应用

按照快速开始给出的建议，我们先去在leancloud上面搞一个应用，并且获得APP ID 和 APP Key。

研究是否需要安装

虽然在官方文档中单独列出了一个 在hexo中使用使用的页面，并给出使用方式，对比快速开始还是存在一个疑点的。就是：给出的两种安装方式在hexo安装中并未提及。

所以我去查看了一下当前模块的相关文件layout/_third-party/comments/valine.swig并且发现了这个

1
<script src="//cdn1.lncld.net/static/js/3.0.4/av-min.js"></script>

可以判断next主题自带的valine采用cdn的形式进行安装。这样也正好免去了这部分静态文件传输占用我可怜带宽的问题。如果必须集成在自己的服务器一起可以通过修改layout/_third-party/comments/valine.swig文件，达成。在判断cdn正常使用之后我会进一步测试如何修改并更新这篇博文。

修改配置文件

1
2
3
4
5
6
7
8
9
10
11
12
13
# Valine.
# You can get your appid and appkey from https://leancloud.cn
# more info please open https://valine.js.org
valine:
  enable: false
  appid:  # your leancloud application appid
  appkey:  # your leancloud application appkey
  notify: false # mail notifier , https://github.com/xCss/Valine/wiki
  verify: false # Verification code
  placeholder: Just go go # comment box placeholder
  avatar: mm # gravatar style
  guest_info: nick,mail,link # custom comment header
  pageSize: 10 # pagination size

notify 评论回复邮件提醒

相关配置介绍

我觉得这是一个不错的功能，决定不启用，但是还是决定试一试

注意：发送次数过多，可能会暂时被Leancloud 屏蔽邮件发送功能
注意：由于邮件提醒功能使用的Leancloud的密码重置邮件提醒，只能传递昵称、邮箱两个属性，所以邮件提醒链接无法直达指定文章页。请悉知。
该功能目前还在测试阶段，谨慎使用。

我的模板

1
2
3
4
5
<p>Hi, {{username}}</p>
<p>
你在 Xice's Note 的评论收到了新的回复。点击链接前往博客
</p>
<p><a href="https://xice.wang" style="display: inline-block; padding: 10px 20px; border-radius: 4px; background-color: #3090e4; color: #fff; text-decoration: none;">马上查看</a></p>

verify 验证码服务

按照 notify 的要求 必须开启。

avatar 头像展示方式

详见头像配置

leancloud_visitors 统计访问人数

统计访问人数：leancloud_visitors 顺便加上了

参考页面hexo-leancloud-counter-security

1
2
3
4
5
# Dependencies: https://github.com/theme-next/hexo-leancloud-counter-security
# If you don't care about security in lc counter and just want to use it directly
# (without hexo-leancloud-counter-security plugin), set the `security` to `false`.
security: true
betterPerformance: false

security 安全

大意就是：“如果你不在意安全只想用，那就不用装这个插件”。不安全这能忍么，安装！

1
$ npm install hexo-leancloud-counter-security --save

添加配置

1
2
3
4
5
6
leancloud_counter_security:
  enable_sync: true
  app_id: <<your app id>>
  app_key: <<your app key>>
  username: <<your username>> # Will be asked while deploying if is left blank
  password: <<your password>> # Recommmended to be left blank. Will be asked while deploying if is left blank

betterPerformance 高性能模式

Explaination for betterPerformance: Because the Leancloud developer’s plan has limits in requst thread amount and running time, counter number may be very slow to load in some times. If set betterPerformance to true, counter number will be displayed quickly by assuming the request is accepted normally.

渣渣翻译

对于betterPerformance的解释: 由于Leancloud开发者对于请求数量和相应时间的限制，访问量计数有时候需要一些时间进行加载。如果这个属性被设置成true，只要请求被正常返回，那么访问数量将会很快加载出来。

没有感觉有什么不一样。。

后续

经高先生提醒，发现有一些page不应该显示评论框，而且即便是显示出来也不能正常使用，比如标签页还有关于页。如何解决这个问题，高先生使用了及其暴力的JQ大法然而我认为事情并不简单。

分析

经过仔细的对比，我发现“归档”页面并不存在评论框，而情况基本相同的“标签”页面存在。由此分析，这个评论框的存在是可以从配置层面关闭的。

打开.\themes\next\layout\archive.swig和.\themes\next\layout\tag.swig进行对比，并没有发现什么不一样。

打开.\themes\next\layout\_macro\post.swig搜索valine找到评论的模块所在，阅读逻辑

1
2
3
4
5
6
7
8
9
10
11
{% elseif theme.valine.enable and theme.valine.appid and theme.valine.appkey %}
  <span class="post-comments-count">
    <span class="post-meta-divider">|</span>
    <span class="post-meta-item-icon">
      <i class="fa fa-comment-o"></i>
    </span>
    <a href="{{ url_for(post.path) }}#comments" itemprop="discussionUrl">
      <span class="post-meta-item-text">{{ __('post.comments_count') + __('symbol.colon') }}</span> <span class="post-comments-count valine-comment-count" data-xid="{{ url_for(post.path) }}" itemprop="commentCount"></span>
    </a>
  </span>
{% endif %}

这部分并不存在选择性关闭的放弃。

接着找到外边一层判断

1
2
3
{% if post.comments %}
  ......
{% endif %}

这貌似应该可以通过post设置一个属性进行关闭，同样搜索post.title发现，这就是post开头配置的地方。大喜过望。

解决

在这些page的配置项中添加comments: false，重新生成，解决。

读文档还不如直接读代码

–Misty