在 HexoMatery 主题下配置 utteranc 评论插件

HexoMatery 主题没有自带 utteranc 评论插件，当然我们也可以依葫芦画瓢地搞一个上去

先决条件

• 可以保存 utteranc 评论的公共库
• 可以提交修改的主题仓库

配置 utteranc 评论库

1. 先跟以往创建 github 仓库的方式一样创建一个公共代码库
2. 安装 utteranc app

将 utteranc 插件添加到主题仓库

1. 创建评论模版
   在主题 layout\_partial\ 目录下创建 utterances.ejs
请修改文件中有注释说明的部分为你自己的配置信息

   <div class="card" data-aos="fade-up">
   <div id="comment_head">
       <div class="comment_headling" style="font-size: 20px; font-weight: 700; position: relative; padding-left: 20px; top: 15px; padding-bottom: 5px;">
           <i class="fas fa-comments fa-fw" aria-hidden="true"></i>
           <span>评论</span>
       </div>
   </div>
   <script type="text/javascript">
       $(function() {
           if(document.getElementById('contact_plan') !== null){
               document.getElementById('comment_head').remove();
           }
       })
   </script>
   
   <div id="utterances-container" class="card-content center-align">
       <span class="utterances_loading" style="align-content: center;">
           <i class="fas fa-spinner fa-spin"></i>
       </span>
       <script type="text/javascript">
           function _checkUtteranc() {
               document.getElementsByClassName('utterances').length == 1
               ? ($('.utterances_loading').fadeTo(1e3, 0))
               : setTimeout(_checkUtteranc, 1000);
           }
   
           setTimeout(() => {
               var utterances = document.createElement('script');
               utterances.type = 'text/javascript';
               utterances.async = true;
               utterances.setAttribute('issue-term','title') // 这里我们设置为使用页面标题作为 issue titile，更多的请参阅 utterances 官网
               utterances.setAttribute('repo','CListery/hexo-utterances') // 这里设置你自己的 utteranc 评论仓库
               utterances.setAttribute('label','comment') // 设置 issue 的标签
               $('body').hasClass('DarkMode')
               ? (utterances.setAttribute('theme','github-dark'))
               : (utterances.setAttribute('theme','github-light')),
               utterances.crossorigin = 'anonymous';
               utterances.src = 'https://utteranc.es/client.js';
               document.getElementById('utterances-container').appendChild(utterances);
               _checkUtteranc();
           }, 1);
       </script>
   </div>
   </div>

2. 修改主题模版文件

   • 修改 layout\_partial\post-detail.ejs
     在 <% if (theme.gitalk && theme.gitalk.enable) { %> 上一行添加

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

   • 修改 layout\contact.ejs
     在 <% if (theme.gitalk && theme.gitalk.enable) { %> 上一行添加

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

   • 修改主题中的 _config.yml
     添加以下内容

     utterances:
         enable: true

---

最后

以上就完成了 utteranc 评论插件的配置，重启 hexo 服务，不出意外就可以看到了