Hugo加入评论的功能

最新推荐文章于 2025-06-01 11:59:05 发布

原创最新推荐文章于 2025-06-01 11:59:05 发布 · 4.7k 阅读

7 ·

CC 4.0 BY-SA版权

文章标签：

#Hugo #评论 #valine

Hugo博客专栏收录该内容

2 篇文章

订阅专栏

本文介绍了如何在Hugo主题LeaveIt中集成第三方评论系统Valine，包括配置Valine的基本步骤、创建comments文件以及在模板中引入comments的详细过程。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

0x00 写在前面

LeaveIt主题没有提供评论的功能，因此需要自己写，这里我用的是 Valine 第三方评论系统。在看下面的内容之前请务必先阅读完快速开始 | Valine

0x01 配置Valine

在 config.toml 中加入以下代码（Valine基本配置）

  # 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 = 'Your appId'
    appKey = 'Your appKey'
    notify = false  # mail notifier , https://github.com/xCss/Valine/wiki
    verify = false # Verification code
    avatar = 'mm'
    placeholder = '说点什么吧...'
    visitor = true

0x02 创建comments

在 layouts/partials/ 中创建 comments.html 文件，文件内容如下：

  <!-- valine -->
  {{- if .Site.Params.valine.enable -}}
  <!-- id 将作为查询条件 -->
  
  <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 -}}

0x03 引入comments

在 layouts/_default/single.html 中加入下面的代码，以引入 comments.html

<div class="post-comment">
    <!-- 加入评论功能 -->
    {{ partial "comments.html" . }}
</div>

0x04 附

详细的配置信息请阅读配置项 | Valine
具体效果请看这：blog.hgtweb.com