hexo-theme-matery主题的评论插件-Utterances

简介

Utterances是一个基于GitHub Issues的评论插件，可以让你在博客中添加评论功能。

相比于其他评论系统，它有以下优点：

• 不需要额外的服务器或数据库支持；
• 可以利用GitHub Issues进行管理，方便备份和恢复；
• 支持Markdown语法，可以编写富文本内容；
• 可以自定义样式和主题。

缺点:

• 不支持匿名评论，需要GitHub账号登录。
• 功能较为单一，没有复杂的自定义选项。
• 国内访问速度较慢，可能需要使用代理。

参考链接: Hexo 评论插件对比：Gitalk vs Valine vs Utterances

使用方法

1. 创建存储评论的仓库

首先，你需要在GitHub上创建一个公开的仓库来存储评论。所有评论都会以Issues的形式存储在这个仓库中。这个仓库不需要包含任何代码文件。并在你的评论仓库中安装utterances app, 指定创建存储评论的仓库。

这里具体步骤参考: hexo-fluid添加utterances评论功能(详细图文过程)

在此，也表示感谢作者的分享。

2. utterances安装完成后,访问utterances生成配置脚本。

<div class="card" data-aos="fade-up">
    <div id="utteranc-container" class="card-content">
        <script src="https://utteranc.es/client.js" // 引入utterances的客户端脚本
                repo="yuhuo863/blog-comments" // 替换为你的仓库信息, 格式为"用户名/仓库名"
                issue-term="pathname" // 评论的分类方式，可选pathname、url、title
                theme="github-light" // 评论的主题，默认github-light
                crossorigin="anonymous" // 跨域策略，默认anonymous
                async // 异步加载，默认true
            >
        </script>
    </div>
</div>

此外，外面加了2个div模块，主要是为了在页面展示的时候加入一个方块、和文章风格保持基本一致。

3. 在hexo-theme-matery主题配置文件中添加utterances

接下来，你需要在主题文件下的_config.yml文件中添加以下代码来启用utterances：

utterances:
  enable: true

4. 在主题文件下的layout/_partial/utterances.ejs文件中配置utterances模板, 方便其他模板引用。

在该文件中添加第二步生成的repo配置信息。

5. 在主题文件下的需要评论系统的模板中引用配置好的utterances模板。

例如，在每个文章详情页模板中添加评论功能: 你只需要在layout/_partial/post_detail.ejs模板中添加以下代码来引入utterances的客户端脚本即可。

<% if (theme.utterances && theme.utterances.enable) { %>
    <%- partial('_partial/utterances') %>
<% } %>

6. 刷新你的博客页面，你应该可以看到评论功能已经正常工作了。

分别执行清理缓存hexo clean，生成静态文件hexo generate，重启服务hexo serve，刷新页面。

这样，你就成功地在hexo-theme-matery主题中启用并配置了utterances评论插件。

参考链接: hexo在matery主题下集成utteranc评论插件