Contents

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

Valine

什么是Valine

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

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

理论上支持但不限于静态博客,目前已有HexoJekyllTypechoHugoGhost 等博客程序在使用Valine。

Valine官网

Valine特性

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

Leancloud配置

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

1. 注册Leancloud

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

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

2. 创建应用

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

/images/2021-10-19-Hugo个人博客添加Valine评论系统/01.png

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

/images/2021-10-19-Hugo个人博客添加Valine评论系统/02.png

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

/images/2021-10-19-Hugo个人博客添加Valine评论系统/image-20211019231146184.png

3. 域名设置

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

/images/2021-10-19-Hugo个人博客添加Valine评论系统/image-20211019231451006.png

域名绑定

  • 如果是国际版,不要求绑定自定义域名,可以使用如下共享域名: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,就可以生成静态博客文件,部署到自己的托管平台,正常的话打开博客中的一篇文章,就可以看到正常的文章计数和评论框了。

/images/2021-10-19-Hugo个人博客添加Valine评论系统/image-20211019234700026.png

同时,Leancloud中应用CommentCounter存储中新加了相应网址的条目。

/images/2021-10-19-Hugo个人博客添加Valine评论系统/image-20211019234736875.png

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>

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