Hugo个人博客添加Valine评论系统

Leslie Shang 收录于 Blog

2021-10-19 约 2132 字预计阅读 5 分钟次阅读

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配置中各个参数的意义：

Value	Function
appId	从LearnCloud上获取的AppID
appKey	从LearnCloud上获取的AppKey
placeholder	评论框内预显示的文本
notify	是否使用邮件提醒
verify	评论时是否使用验证码验证
avatar	头像类型
visitor	是否开启文章阅读量统计
recordIP	是否记录评论者IP地址

详细可见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评论功能，原因是评论功能的模板文件有问题，需要我们自己修改才能正常使用，如下：

把\themes\LoveIt\layouts\partials\comment.html拷贝到站点根目录下的\layouts\partials\comment.html
打开拷贝后的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>

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

目录