Hugo中加入Valine评论功能

部署与运维

Hugo搭建的博客网站如何引入Valine的第三方评论插件。

使用Valine的第三方评论插件功能，需要开通LeanCloud账号，并进行配置。可以参考https://valine.js.org/quickstart.html。

比较容易有问题的是在哪里插入Valine的HTML代码。在Hugo中如果使用了Theme主题，一般会有这样一个文件

/themes/(你的theme名)/layouts/partials/comments.html

在comments.html中增加以下代码

{{- if .Site.Params.valine.enable }}
<span id="{{ .URL | relURL }}" class="leancloud_visitors" data-flag-title="{{ .Title }}">
<p></p>
</span>
<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.valine.appId }}',
    appKey: '{{ .Site.Params.valine.appKey }}',
    notify: {{ .Site.Params.valine.notify }}, 
    verify: {{ .Site.Params.valine.verify }}, 
    avatar:'{{ .Site.Params.valine.avatar }}', 
    placeholder: '{{ .Site.Params.valine.placeholder }}',
    visitor: {{ .Site.Params.valine.visitor }}
});
</script>
{{- end }}

因为使用了Site的配置，所以将Valine相关的配置在hugo的config.toml中增加。

[Params.valine]
  enable = true
  appId = '在LeanCloud账号中找到对应appid'
  appKey = '在leanCloud账号中找到对应的appKey'
  notify = false
  verify = false
  avatar = 'mm' 
  placeholder = '说点什么吧...'
  visitor = true

这样hugo就可以有评论功能了。

但有些人遇到问题，会尝试在LeanCloud账号的存储中自己新建Class，比如新建Comment。其实不需要，增加的js代码会自动调用API新建Comment Class，不用手动创建。