目录

用 Hugo 配合 Valine 实现简洁的评论交互

本文同步更新至 YoutubeBiliBili

作者已经在最新的主题中加入了Algolia搜索,现在只要在配置文件中开启一下即可。

Leancloud相关配置

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

  • 登录注册 LeanCloud

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

    https://pichome-1254392422.cos.ap-chengdu.myqcloud.com/20180708153104380829479.png

  • 进入应用,左边栏找到【设置】【应用Key】 记录 App ID,App Key 后面配置文件中会用到:

  • 建立两个新的存储,因为评论和文章阅读数统计依赖于存储Class

  • 创建两个存储Class,分别命名为: CounterComment; https://pichome-1254392422.cos.ap-chengdu.myqcloud.com/20180708153104475972323.png

  • 为应用添加安全域名,左边栏点击【设置】【安全中心】【安全域名】 输入博客使用的域名,点击保存即可: https://pichome-1254392422.cos.ap-chengdu.myqcloud.com/20180708153104592457270.png

config.toml添加参数

为了使配置更灵活,将 Valine 中大部分初始化参数项均设置为配置文件中的参数项,在 config.toml 的适当位置,比如我的文件中 [params.gitment] 的下面:

1
2
3
4
5
6
7
  [params.gitment]          # Gitment is a comment system based on GitHub issues. see https://github.com/imsun/gitment

    owner = ""              # Your GitHub ID

    repo = ""               # The repo to store comments

    clientId = ""           # Your client ID

    clientSecret = ""       # Your client secret


  # 这里添加Valine的相关参数

添加 Valine 参数项:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
  # 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

上面几项内容的含义,这里简单一说,具体还是要看 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/even/layouts/partials/comments.html,按照 Valine快速开始 添加 Valine 相关代码,找到以下位置,大概55~81行的位置:

1
2
3
4
5
6
7
8
  <!-- gitment -->
  {{- if .Site.Params.gitment.enable -}}
  <div id="comments-gitment"></div>
  <!--这里省略了部分代码-->
  <noscript>Please enable JavaScript to view the <a href="https://github.com/imsun/gitment">comments powered by gitment.</a></noscript>
  {{- end }}

  <!--这个位置添加Valine相关代码-->

添加的 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
  <!-- valine -->
  {{- if .Site.Params.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="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 }}

可以看到上述代码中引用了配置文件中的相关参数,这样以后修改配置就不用修改代码了,只需要改配置文件 config.toml,另外注意到的是,我也添加了文章阅读数统计的显示内容。将配置文件中 valine 配置的 eanble 设置为 true ,本地测试一下,正常的话,打开一篇文章会看到:

https://pichome-1254392422.cos.ap-chengdu.myqcloud.com/20180708153104555886981.png

此时,生成静态博客文件,部署到自己的托管平台,正常的话打开博客中的一篇文章,就可以看到正常的文章计数和评论框了,此时随便评论一条,验证一下,评论如果成功,可以去leancloud后台看一下 CommentCounter存储中新加了相应网址的条目。