本篇博客将介绍如何在博客中引入valine评论系统,如果要使用disqus可以参考这里

目录

配置leancloud

大致按如下步骤配置,详情请看这里

  1. 登录或注册leancloud
  2. 进入后台创建应用
  3. 创建好应用,进入应用,左边栏找到 设置 ,然后点击 应用Key,查看 App IDApp Key,后面配置文件中会用到
  4. 在存储中创建两个Class,Counter和comment
  5. 依次点击设置->安全中心,找到web安全域名,然后填写自己的博客网址

配置config.toml

可参考如下配置代码,同时需要注释掉这行代码disqusShortname = "hugo-tranquilpeak-theme"

  [params.valine]
    enable = true
    appId = 'YOUR APPID'
    appKey = 'YOUR APPKEY'
    notify = false  # mail notifier , https://github.com/xCss/Valine/wiki

    verify = false # Verification code

    avatar = 'mm' 
    placeholder = '说点什么吧...'
    visitor = true

修改主题文件

在myblog\themes\hugo-tranquilpeak-theme\layouts\partials文件夹下,新建comments.html布局文件,填写如下代码

<!-- 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 }}

然后在myblog\themes\hugo-tranquilpeak-theme\layouts_default文件夹下找到single.html文件,将如下代码插入到源文件的第42行(也可以插到其它行,插到不同地方会使评论显示在博客的不同位置)

<div class=" post-comment">
	{{ partial "comments.html" . }}
</div>

引入leancloud后台自动唤醒功能

免费版的leancloud容器,有强制性休眠策略,每天至少休眠6小时,并且30分钟没有外部请求会自动休眠。leancloud后台休眠状态下收到请求会被唤醒,但是这请求不会发送相应的通知邮件。

所以需要配置leancloud定时器,每隔一段时间,如20min,自动激活一次,使后台长时间处于唤醒状态。

大致步骤如下,详情请参考这里

  1. 在leancloud后台,点击云引擎->设置,填写代码库https://github.com/zhaojun1998/Valine-Admin

  2. 点击云引擎->部署->git源码部署

  3. 云引擎->设置->自定义环境变量,添加必要的环境变量,注意SMTP_PASS为相应邮箱的授权码而不是邮箱密码

  4. 设置web主机域名,使用默认的即可

  5. 存储->结构化数据->**_User**添加行,只需要填写 emailpasswordusername三个字段即可

  6. 云引擎->设置->自定义环境变量,新增环境变量ADMIN_URLWeb 主机域名,重启容器

  7. 云引擎->定时任务->新增定时器,配置名称、模式选择self-wake,Cron表达式填写如下0 */20 7-23 * * ?

至此一个基本的评论系统已经添加你自己的博客了,快去测试吧。

主要参考

https://www.smslit.top/2018/07/08/hugo-valine/

https://github.com/zhaojun1998/Valine-Admin

https://3mile.github.io/archives/2019/0903100406/

https://valine.js.org/