在现代化的博客平台中,评论系统是非常重要的一部分。它不仅可以让读者参与到文章的讨论中,还可以为博主提供反馈和互动的机会。在本文中,我们将介绍如何在 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
<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 的引用
<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 文件中添加以下配置:
[params.utterances]
repo = "owner/repo"
enable = false
issueTerm = "pathname"
theme = "github-light"
同样,owner 是你的 GitHub 用户名,repo 是你创建的仓库名称。
引入 Utterances 在你的博客页面中,你需要添加以下代码来引入 Utterances:
<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,并为你的读者提供更好的交互体验。