教程：hexo和hugo博客，引入utterances评论系统

发表于 更新于 分类于

在现代化的博客平台中，评论系统是非常重要的一部分。它不仅可以让读者参与到文章的讨论中，还可以为博主提供反馈和互动的机会。在本文中，我们将介绍如何在 Hexo 和 Hugo 博客中引入 Utterances 评论系统。

Utterances 是一个基于 GitHub Issues 的评论系统，它可以让你在博客上进行评论，并将评论保存在 GitHub Issues 中。这种方式不仅可以让你的博客评论变得更加安全，还可以让你更好地管理和控制评论。

以下是在 Hexo 和 Hugo 博客中引入 Utterances 评论系统的步骤：

1.创建一个 GitHub 仓库 首先，你需要创建一个 GitHub 仓库来存储评论。这个仓库可以是公共的或者私有的，但是你需要确保你有权访问它。在仓库设置中，你需要启用 Issues 功能。

（注意：不要fork，需要自己新建一个仓库，在上传Utterances源码）

2.配置 Utterances ,在 Hexo 中，以landscape主题为例，你需要添加以下配置：

①.在 themes\landscape\layout_partial\ 下添加 livere.ejs

1
2
3
4
5
6
7
8
9
10
11
12
<div id="lv-container" data-id="city" data-uid="">
<script src="https://utteranc.es/client.js"
        repo = "owner/repo"
        issue-term="pathname"
        theme="github-light"  
        crossorigin="anonymous"
        async>
</script>
</script>

</div>

②修改 themes\landscape\layout_partial\article.ejs

在 footer 标签尾部添加对 livere.ejs 的引用

1
2
3
4
5
6
7
8
9
10
11
12

<footer class="article-footer">
  <a data-url="<%- post.permalink %>" data-id="<%= post._id %>" class="article-share-link"><%= __('share') %></a>
  <% if (post.comments && config.disqus_shortname){ %>
    <a href="<%- post.permalink %>#disqus_thread" class="article-comment-link"><%= __('comment') %></a>
  <% } %>
  <%- partial('post/tag') %>
  <% if (!index){ %>
    <%- partial('livere') %>
  <% } %>
</footer>

3.在 Hugo 中，你需要在 config.toml 文件中添加以下配置：

1
2
3
4
5
6
7

[params.utterances]
  repo = "owner/repo"
  enable = false 
  issueTerm = "pathname"
  theme = "github-light"

同样，owner 是你的 GitHub 用户名，repo 是你创建的仓库名称。

引入 Utterances 在你的博客页面中，你需要添加以下代码来引入 Utterances：

1
2
3
4
5
6
7
8
9
<div id="utterances"></div>
<script src="https://utteranc.es/client.js"
        repo="owner/repo"
        issue-term="pathname"
        theme="github-light"
        crossorigin="anonymous"
        async>
</script>

其中，owner 和 repo 分别是你的 GitHub 用户名和仓库名称。issue-term 用于指定评论的标识符，我们使用 pathname 来指定博客页面的路径。theme 用于指定评论的主题，你可以根据自己的喜好来选择。crossorigin 和 async 则是 Utterances 的参数，用于指定跨域和异步加载。

完成 现在，你已经成功地在 Hexo 或 Hugo 博客中引入了 Utterances 评论系统。当读者在你的博客页面中进行评论时，评论将会保存在你的 GitHub Issues 中。你可以随时查看和管理这些评论，并与读者进行互动。
总结 通过引入 Utterances 评论系统，你可以为你的博客添加一个安全、可管理、易于控制的评论系统。无论你是在 Hexo 还是 Hugo 中，都可以轻松地引入 Utterances，并为你的读者提供更好的交互体验。