在 hugo 中集成utterances-comments评论插件教程

hugo 评论插件 #

Hugo是一个非常流行的静态网站生成器，它支持多种评论系统插件，包括：

1. Disqus： Disqus是一个非常流行的第三方评论系统，它可以轻松地与Hugo集成。只需在Disqus网站上注册一个帐户，创建一个新的站点，并将其配置为在您的Hugo站点中显示评论。
2. Commento： Commento是一个开源的评论系统，它提供了一个易于使用的评论插件，可以在Hugo站点上使用。Commento还提供了一些高级功能，如邮件通知和社交媒体身份验证。
3. Gitalk： Gitalk是一个基于GitHub Issue的评论系统，它使用GitHub帐户进行身份验证。 Gitalk提供了一个易于使用的评论插件，可与Hugo集成。
4. Staticman： Staticman是一个开源的评论系统，它使用静态网站生成器的git提交功能将评论保存为Markdown文件。 Staticman可以与多个静态网站生成器集成，包括Hugo。

关于静态的评论插件，以下是一些不错的推荐：

1. Utterances： Utterances是一个开源的评论系统，它使用GitHub Issue作为后端存储。它可以轻松地与Hugo集成，只需在GitHub上创建一个新的存储库并配置它，然后将Utterances评论插件添加到您的Hugo站点中即可。
2. Static Comments： Static Comments是另一个基于Git的静态评论插件，它使用GitHub存储库作为后端存储。它可以很容易地与Hugo集成，只需在GitHub上创建一个新的存储库并将其配置，然后将Static Comments评论插件添加到您的Hugo站点中即可。
3. CommentBox： CommentBox是一个基于JavaScript的静态评论插件，它可以轻松地与Hugo集成。您只需将CommentBox评论插件添加到您的Hugo站点中即可。它使用localStorage保存评论，并在用户再次访问该页面时自动加载评论。

这些评论插件都很容易与Hugo集成，并为您的站点提供了一个易于使用的评论系统。

Utterances和 gittalk 区别 #

Utterances和Gitalk都是基于GitHub Issue的评论系统，它们都使用GitHub的API来管理评论，并将评论存储为GitHub Issue。这些评论系统有以下区别：

1. 用户身份验证方式：Gitalk使用GitHub账户进行身份验证，而Utterances使用GitHub OAuth应用程序进行身份验证。这意味着使用Gitalk进行评论时，您需要拥有GitHub帐户，而使用Utterances进行评论时，您可以使用GitHub或其他OAuth提供商（例如Google或Twitter）的帐户。
2. 自定义性：Utterances更容易进行自定义，可以使用GitHub Issues的标签和筛选器来自定义评论样式和显示方式，而Gitalk的自定义选项较少。
3. 开源性：Utterances是一个完全开源的评论系统，可以轻松地部署在自己的服务器上。而Gitalk则是部分开源的，使用者需要将评论存储在GitHub上。
4. 多语言支持：Utterances支持多种语言，可以使用不同的本地化翻译评论框。而Gitalk则需要手动更改源代码来实现多语言支持。

总的来说，Utterances相对于Gitalk来说，更加灵活和易于自定义，而Gitalk更加简单易用，对于GitHub用户而言会更加友好。

Utterances如何集成 #

要将Utterances集成到您的Hugo网站中，可以按照以下步骤进行操作：

1. 创建一个GitHub存储库，用于存储您的评论。确保存储库名称为utterances-comments，并将存储库设置为公共可见。
2. 转到Utterances官方网站，使用您的GitHub账户登录，创建一个新的OAuth应用程序，然后将应用程序ID复制到剪贴板。
3. 在您的Hugo网站中的config.toml文件中添加以下配置：

tomlCopy code
[params.utterances]
repo = "yourusername/utterances-comments"
issueTerm = "pathname"
theme = "github-light"
clientId = "your-utterances-app-id"

其中，repo是您在步骤1中创建的GitHub存储库名称，clientId是您在步骤2中创建的OAuth应用程序ID，issueTerm是指定Utterances将评论存储为GitHub Issue的方式，pathname表示评论将与页面的路径关联，theme是您选择的评论框主题。

1. 在您的Hugo网站中的单篇文章模板中，添加以下代码来呈现Utterances评论框：

htmlCopy code
<section id="utterances"></section>
<script src="https://utteranc.es/client.js"
        repo="{{ .Site.Params.utterances.repo }}"
        issue-term="{{ .Permalink }}"
        theme="{{ .Site.Params.utterances.theme }}"
        crossorigin="anonymous"
        async>
</script>

这将在页面底部呈现Utterances评论框，并使用您在config.toml文件中指定的配置。

1. 保存您的更改，并重新生成您的Hugo网站。在网站上访问任何文章页面，您应该能够看到Utterances评论框。

这就是将Utterances集成到您的Hugo网站中的基本步骤。如果需要更多帮助或自定义配置，请查看Utterances官方文档。

注意，使用 Utterances 需要在访问 Utterances 官网时能够正常访问 GitHub，如果你的网络环境无法访问 GitHub，那么评论功能将会受到影响。