Valine评论系统在hugo中的坑
主要其实是hugo版本更新, 我没来得及改
排查了好久, G上没有类似, 最后还是去看hugo文档的
Before
...
<span id="{{ .URL | relURL }}" class="leancloud_visitors" data-flag-title="{{ .Title }}">
<span class="post-meta-item-text">访问量 </span>
<span class="leancloud-visitors-count"></span>
<p></p>
</span>
...
After
...
<span id="{{ .Permalink | 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>
...
原因是path错误, 新版hugo弃用了{{ .URL }}类而改用{{ .Permalink }}, {{ .RelPermalink }}同理
Valine部署 以hugo为例
其实官方教程已经挺好的了
https://valine.js.org/quickstart.html
config.toml 添加参数
# Valine.
# You can get your appid and appkey from https://leancloud.cn
# more info please open https://valine.js.org
[params.valine]
enable = true
appId = '你的appId'
appKey = '你的appKey'
notify = false # mail notifier , https://github.com/xCss/Valine/wiki
verify = false # Verification code
avatar = 'mm'
placeholder = '说点什么吧...'
visitor = true
修改主题文件
修改主题中评论相关的布局文件 .../themes/你的主题/layouts/partials/comments.html
添加的 Valine 的代码如下：
<!-- valine -->
{{- if .Site.Params.valine.enable -}}
<!-- id 将作为查询条件 -->
<span id="{{ .Permalink | 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="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 }}
如果主题中没有上面的文件, 去.../themes/你的主题/layouts/_default/single.html中找到并在相应的地方插入上述代码
<div class="post-comment">
{{ if ( .Params.showComments | default true ) }}
{{ if ne .Site.DisqusShortname "" }}
{{ template "_internal/disqus.html" . }}
{{ end }}
<!-- valine -->
{{ end }}
</div>
本地测试和部署
一般设置完成就能看到评论区了