0. 前言

之前写过一篇文章用Hexo搭建个人博客,介绍如何用Hexo搭建个人博客网站，使用了hexo-theme-matery主题，今天介绍一下这个主题下使用的评论插件。

1. 评论插件

matery主题集成了各种评论模块，例如 gitalk 、gitment 、disqus 、livere 、valine 、waline 、Twikoo 、utteranc 等，今天要介绍的 utteranc 这种插件是集成在github种的评论插件，并且能够做到github邮箱通知。下面就来详细介绍一下utteranc如何配置

1.1 新建一个评论仓库

首先创建一个公开的评论仓库<自定义名称> ！注意一定要公开，否则别人无法评论

1.2 安装utteranc

进入utteranc,点击install
选择刚刚创建的自定义评论仓库
repo输入自己刚刚新建的仓库
其他按照自己的需要挑战，把最后生成的配置，copy 下来

ini 复制代码

<script src="https://utteranc.es/client.js"
        repo="ZBIGBEAR/sync_test"
        issue-term="pathname"
        theme="github-light"
        crossorigin="anonymous"
        async>
</script>

1.3 添加配置到matery主题

修改matery主题的配置文件 themes/hexo-theme-matery/_config.yml ，开启utteranc功能

yaml 复制代码

# utteranc config, default disabled
# utteranc 评论模块的配置，默认为不激活
utteranc:
  enable: true

修改博客文章 themes/hexo-theme-matery/layout/_partial/post-detail.ejs

scss 复制代码

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

该处改动的目的是为了在所有博客文章中统一在底部加入一个评论模块，这个改动很关键、所放位置也很重要。

新增一个文件 themes/hexo-theme-matery/layout/_partial/utteranc.ejs

ini 复制代码

<div class="card" data-aos="fade-up">
    <div id="utteranc-container" class="card-content">
        <script src="https://utteranc.es/client.js"
                repo="jijunhao/utterances"
                issue-term="pathname"
                theme="github-light"
                crossorigin="anonymous"
                async>
        </script>
    </div>
</div>

所有的留言都会出现在自定义评论仓库 issues 的，并且会每次给邮箱发消息。

如果博客中还有单独的一个留言板模块，需要改 themes/hexo-theme-matery/layout/contact.ejs

scss 复制代码

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

最后重启hexo，就能在网页拥有评论功能了。

2. 参考

$1$ 用Hexo搭建个人博客

$2$ Hexo-Matery主题评论插件