Valine

什么是Valine

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

Valine 诞生于2017年8月7日，是一款基于LeanCloud的快速、简洁且高效的无后端评论系统。

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

Valine官网

Valine特性

• 快速
• 安全
• Emoji 😉
• 无后端实现
• MarkDown 全语法支持
• 轻量易用
• 文章阅读量统计 v1.2.0+

Leancloud配置

评论系统依赖于leancloud，所以需要先在leancloud中进行相关的准备工作。

1. 注册Leancloud

注册时请注意右上角的版本选用国际版，否则后续使用自己的域名时会涉及到备案问题。

附上国际版注册链接：Leancloud国际版注册

2. 创建应用

登录成功后，进入后台点击左上角的创建应用：

创建好应用，进入应用，左边栏找到 设置 ，然后点击 应用凭证，此时记录出现的 App ID 和 App Key，后面配置文件中会用到：

因为评论和文章阅读数统计依赖于存储，所以还需要建立两个新的存储 Class，左边栏找到并点击 数据存储，在结构化数据中点击 创建Class:分别命名为: Counter 和 Comment；ACL权限设置为限制写入

3. 域名设置

安全域名，此处配置你自己的域名，配置后仅可在该域名下通过JavaScript SDK 调用服务器资源

域名绑定：

• 如果是国际版，不要求绑定自定义域名，可以使用如下共享域名：appid前八位.api.lncldglobal.com；也可以绑定自定义域名并且无需备案，一键开启SSL
• 如果是国内节点，就需要绑定自定义域名，且根据工信部规定需要备案

Config.toml添加参数

为了使配置更灵活，可将 Valine 中大部分初始化参数项均设置为配置文件中的参数添加到config.toml中的适当位置。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16

# Valine comment config (https://github.com/xCss/Valine)
# Valine 评论系统设置 (https://github.com/xCss/Valine)
	[params.page.comment.valine]
    	enable = true
        appId = "XXXXXXXXXXXX" 	# 之前记录的APP ID
        appKey = "XXXXXXXXXXX" 	# 之前记录的APP Key
        placeholder = ""
        avatar = "mp"
        meta= ""
        pageSize = 10
        lang = ""
        visitor = true
        recordIP = true
        highlight = true
        enableQQ = false
        serverURLs = ""

Valine配置中各个参数的意义：

详细可见Valine配置项。

修改主题文件

目前Hugo的主题基本上都已经适配了Valine、utterances、disqus等主流评论系统，主题文件comments中有相关布局可以不需要修改。

如果主题布局文件中没有Valine的布局设置也没关系，按照下面步骤添加代码即可。

• 在themes文件夹下layouts/partials/comments.html中可以修改评论系统相关的布局文件，添加Valine评论代码：

  1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30

  {{- /* Valine Comment System */ -}} {{- $valine := $comment.valine | default dict -}} {{- if $valine.enable -}} <!-- id 将作为查询条件 --> <span id="{{ .URL | relURL }}" class="leancloud_visitors" data-flag-title="{{ .Title }}"> <span class="post-meta-item-text">文章阅读量 </span> <span class="leancloud-visitors-count">1000000</span> <p></p> </span> <div id="valine" class="comment"></div> <!--Leancloud 操作库--> <script src="//cdn1.lncld.net/static/js/3.0.4/av-min.js"></script> <!--Valine 的核心代码库--> <script src='//unpkg.com/valine/dist/Valine.min.js'></script> <script type="text/javascript"> new Valine({ el: '#valine' , appId: '{{ $valine.appId }}', appKey: '{{ $valine.appKey }}', notify: '{{ $valine.notify }}', verify: '{{ $valine.verify }}', avatar:'{{ $valine.avatar }}', placeholder: '{{ $valine.placeholder }}', visitor: '{{ $valine.visitor }}' }); </script> <noscript> Please enable JavaScript to view the comments powered by <a href="https://valine.js.org/">Valine</a>. </noscript> {{- end -}}

将配置文件中 valine 配置的 eanble 设置为 true，就可以生成静态博客文件，部署到自己的托管平台，正常的话打开博客中的一篇文章，就可以看到正常的文章计数和评论框了。

同时，Leancloud中应用Comment 和 Counter存储中新加了相应网址的条目。

LoveIt主题下的Valine

LoveIt主题的评论功能默认情况下是无法在本地使用的，除非修改模板渲染文件，或者启动本地服务时添加参数，如下：

1

hugo server -e production

这样就可以在本地调试时使用"评论系统”, “CDN” 和 “fingerprint”。

但是对于v0.2.10版本的LoveIt主题，只是加入启动参数依然无法使用Valine评论功能，原因是评论功能的模板文件有问题，需要我们自己修改才能正常使用，如下：

1. 把\themes\LoveIt\layouts\partials\comment.html拷贝到站点根目录下的\layouts\partials\comment.html
2. 打开拷贝后的comment.html，找到Valine相关的代码，把{{- if $valine.enable -}}和{{- end -}}之间的代码改成上面提及的在layouts/partials/comments.html中添加的Valine代码。

注：要注意的是对于阅读量统计功能，LoveIt主题在themes\LoveIt\layouts\posts\single.html中使用了如下Valine统计阅读量的代码：

1
2
3
4
5

{{- if $comment.enable | and $comment.valine.enable | and $comment.valine.visitor -}}
	<span id="{{ .RelPermalink }}" class="leancloud_visitors" data-flag-title="{{ .Title }}">
		<i class="far fa-eye fa-fw"></i>&nbsp;<span class=leancloud-visitors-count></span>&nbsp;{{ T "views" }}
	</span>&nbsp;
{{- end -}}

这和之前在layouts/partials/comments.html中的统计阅读量代码相冲突：

1
2
3
4
5
6

<!-- id 将作为查询条件 -->
<span id="{{ .URL | relURL }}" class="leancloud_visitors" data-flag-title="{{ .Title }}">
	<span class="post-meta-item-text">文章阅读量 </span>
	<span class="leancloud-visitors-count">1000000</span>
	<p></p>
</span>

造成阅读量不会自动更新累加的问题，留其一就行了。