Hugo 添加评论功能

affectalways 收录于 blog hugo

2020-06-17 约 1218 字预计阅读 3 分钟次阅读

不能评论!

Hugo 是一个强大的静态网页生成器，使用 go 开发，速度贼快。不过 Hugo 还比较年轻，没有像 NexT 那样功能强大，成熟稳定的主题。所以很多东西需要自己动手撸。

比如评论系统。

评论系统排名

valine > gitalk > gitment > livere > 畅言

关于Valine

官方网址： «https://valine.js.org/>>
其特性不一一赘述，官方网址有介绍

添加评论区

目前博客使用的主题是meme

不同的主题可能有所区别，但原理大都类似

原理？

Hugo 会将 Markdown 文档 按照 主题 (包括 HTML 模板、CSS、JavaScript 等) 编译成静态网页

那么我们只需要将 Valine作为一个 <div> 插入到 HTML 模板中，然后在 config.toml 中添加相关配置，就可以添加评论区了

Leancloud相关配置

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

登录或注册 LeanCloud
登录成功后，进入后台点击左上角的创建应用：
创建好应用，进入应用，左边栏找到设置，然后点击 应用Key，此时记录出现的 App ID 和 App Key，后面配置文件中会用到：
因为评论和文章阅读数统计依赖于存储，所以还需要建立两个新的存储 Class，左边栏找到并点击存储，点击 创建Class:
创建两个存储Class，分别命名为: Counter 和 Comment;
还需要为应用添加安全域名，左边栏点击设置，找到 安全中心，点击后会看到 安全域名 设置框，输入博客使用的域名，点击保存即可：

config.toml开启comment

将enableComments = false设置为enableComments = true
将enableValine = false设置为enableValine = true

添加 Valine 参数项：

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


## Valine
    enableValine = true
    valineAppId = "************"
    valineAppKey = "*****************"
    valinePlaceholder = "Just go go"
    valinePath = ""
    valineAvatar = "mm"
    valineMeta = ["nick", "mail", "link"]
    valinePageSize = 10
    valineLang = "zh-cn"
    valineVisitor = false
    valineHighlight = true
    valineAvatarForce = false
    valineRecordIP = false
    valineServerURLs = ""
    valineEmojiCDN = ""
    valineEmojiMaps = {}
    valineEnableQQ = false
    valineRequiredFields = []

上面几项内容的含义，这里简单一说，具体还是要看 Valine官网中配置相关的内容：

参数	用途
enable	这是用于主题中配置的，不是官方Valine的参数，true时控制开启此评论系统
appId	这是在 leancloud 后台应用中获取的，也就是上面提到的 App ID
appKey	这是在 leancloud 后台应用中获取的，也就是上面提到的 App Key
notify	用于控制是否开启邮件通知功能，具体参考邮件提醒配置
verify	用于控制是否开启评论验证码功能
avatar	用于配置评论项中用户头像样式，有多种选择：mm, identicon, monsterid, wavatar, retro, hide。详细参考：头像配置
placehoder	评论框的提示符
visitor	控制是否开启文章阅读数的统计功能i, 详情阅读文章阅读数统计

修改主题文件

主要是修改主题中评论相关的布局文件 themes\meme\layouts\partials\components\comments.html，按照 Valine快速开始添加 Valine 相关代码，找到以下位置

1
2


{{ if .Site.Params.enableValine }}
{{- end }}

添加的 Valine 评论的代码如下：

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


{{ if .Site.Params.enableValine }}
            <div id="vcomments"></div>
			<script src="//cdn1.lncld.net/static/js/3.0.4/av-min.js"></script>
			  <script src='//unpkg.com/valine/dist/Valine.min.js'></script>
			  <script type="text/javascript">
				new Valine({
					el: '#vcomments' ,
					appId: '{{ .Site.Params.valineAppId }}',
					appKey: '{{ .Site.Params.valineAppKey }}',
					notify: '{{ .Site.Params.valineNotify }}', 
					verify: '{{ .Site.Params.valineVerify }}', 
					avatar:'{{ .Site.Params.valineAvatar }}', 
					placeholder: '{{ .Site.Params.valinePlaceholder }}',
					visitor: '{{ .Site.Params.valineVisitor }}'
				});
			  </script>
        {{ end }}

可以看到上述代码中引用了配置文件中的相关参数，这样以后修改配置就不用修改代码了，只需要改配置文件 config.toml。

目录