Hexo的hexo-theme-matery主题配置评论


0. 前言

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

1. 评论插件

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

1.1 新建一个评论仓库

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

1.2 安装utteranc

  • 进入utteranc,点击install
  • 选择刚刚创建的自定义评论仓库
  • repo输入自己刚刚新建的仓库
  • 其他按照自己的需要挑战,把最后生成的配置,copy 下来
    <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功能

    # utteranc config, default disabled
    # utteranc 评论模块的配置,默认为不激活
    utteranc:
      enable: true
  • 修改博客文章 themes/hexo-theme-matery/layout/_partial/post-detail.ejs

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

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

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

    <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

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

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

2. 参考

[1]用Hexo搭建个人博客

[2]Hexo-Matery主题评论插件


文章作者: Alex
版权声明: 本博客所有文章除特別声明外,均采用 CC BY 4.0 许可协议。转载请注明来源 Alex !
  目录