添加Disqus评论系统到Hugo网站

Disqus是一款广受欢迎的第三方评论服务，它可以让博客站长轻松地为自己的网站或博客添加评论功能。Disqus通过提供评论系统的代管服务，博客站长只需要嵌入Disqus评论框代码，就可以轻松地将功能引入自己的站点。

Disqus的主要功能包括：

• 能够对文章进行评论
• 用户可以发布评论、回复评论、点赞评论等操作
• 可以实现用户匿名评论功能
• 可以过滤垃圾评论并进行管理
• 支持社交媒体分享功能，方便用户分享内容到不同的平台

本文会以本站点为例子,介绍如何在BlowFish主题下添加Disqus,让观众可以对文章进行评论和点赞. 和Hugo官方方法添加会略有不同.

注册Disqus #

首先访问 https://disqus.com/, 点击GET STARTED按步骤注册.

接下来填入自己站点的名称. 在下方会生成xxx.disqus.com的地址. 注意.号会被替换成-号.把前缀记录下来

选择Basic免费计划.

接下来选择部署平台.这里没有Hugo框架特定的平台,选择I don't see my platform listed, install manually with Universal Code 然后按自己情况填写配置. 注意Website URL填入自己的博客主页,其他的随意

接下来选择风格.没有别的需求选择Balance即可. 基本的注册就完成了.

在Hugo启用Disquz #

在config.toml里填入在上步骤获得的前缀

disqusShortname = "DisqusShortname"

这里的disqusShortname需要放到最上级, 和baseURL一样.

在根目录创建layouts/partials/comments.html (注意,官方例子中给出的是disqus.html,由于我们使用了blowfish主题,这里的文件名根据官方文档需要改成comments.html)

接下来就是和拷贝官方例子的代码到该文件:

<div id="disqus_thread"></div>
<script type="text/javascript">

(function() {
    // Don't ever inject Disqus on localhost--it creates unwanted
    // discussions from 'localhost:1313' on your Disqus account...
    if (window.location.hostname == "localhost")
        return;

    var dsq = document.createElement('script'); dsq.type = 'text/javascript'; dsq.async = true;
    var disqus_shortname = '{{ .Site.DisqusShortname }}';
    dsq.src = '//' + disqus_shortname + '.disqus.com/embed.js';
    (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);
})();
</script>
<noscript>Please enable JavaScript to view the <a href="https://disqus.com/?ref_noscript">comments powered by Disqus.</a></noscript>
<a href="https://disqus.com/" class="dsq-brlink">comments powered by <span class="logo-disqus">Disqus</span></a>

如果需要在本地部署时看到效果,将中间return的部分注释掉. 在params.toml中将showComments设为true

由于comments.html元素会被Blowfish接管, 所以不需要像官方例子一样在文章里加入{{ partial "disqus.html" . }}.

运行 #

接下来运行Hugo Server -D就能在文章最下部看到评论区了.