hexo landscape 主题集成 gitalk 评论插件

hexo 的安装方式本文不再叙述，参考文章 hexo blog 搭建 或者参考 官方文档 即可。

gitalk 注册方式不再叙述，参考文章 gitalk 评论插件

本文用到 ES6 语法，hexo 添加 ES6 语法参考文章 hexo 静态资源 js 文件添加 es6 语法支持

集成 gitalk 步骤

1. 修改 themes/landscape/_config.yml

添加如下内容，内容需替换为自己的相关配置

# ...
# CDN地址
cdn:
  gitalk:
    js: //cdn.bootcss.com/gitalk/1.6.2/gitalk.min.js
    css: //cdn.bootcss.com/gitalk/1.6.2/gitalk.min.css
# gitalk settings
gitalk:
  enable: true # 用来做启用判断可以不用
  clientID: 2ceec9768754a29069c7 # `Github OAuth Application clientID`
  clientSecret: c9544f9e915c128c49909b3325ace37dc7bac22f # `Github OAuth Application clientSecret`
  repo: blog # 储存评论issue的github仓库名，仅需要仓库名字即可
  owner: coder-linx # GitHub repository 所有者，可以是个人或者组织。
  admin: '["coder-linx"]' # GitHub repository 的所有者和合作者 (对这个 repository 有写权限的用户)。
# ...

2. 修改 themes/landscape/layout/_partial/article.ejs

主要修改就是去掉以前的 disqus 评论，添加 gitalk ，修改如下：

@@ -24,8 +25,8 @@
     </div>
     <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>
+      <% if (post.comments && theme.gitalk.enable){ %>
+        <a href="<%- post.permalink %>#gitalk_container" class="article-comment-link"><%= __('comment') %></a>
       <% } %>
       <%- partial('post/tag') %>
     </footer>
@@ -35,10 +36,10 @@
   <% } %>
 </article>

-<% if (!index && post.comments && config.disqus_shortname){ %>
+<% if (!index && post.comments && theme.gitalk.enable){ %>
 <section id="comments">
-  <div id="disqus_thread">
-    <noscript>Please enable JavaScript to view the <a href="//disqus.com/?ref_noscript">comments powered by Disqus.</a></noscript>
+  <div id="gitalk_container">
+    <noscript>Please enable JavaScript to view the <a href="//gitalk.github.io/">comments powered by GITALK.</a></noscript>
   </div>
 </section>
 <% } %>

3. 修改 themes/landscape/layout/_partial/after-footer.ejs

去掉 disqus 评论，添加外部 comment.js 文件：

@@ -1,25 +1,24 @@
-<% if (config.disqus_shortname){ %>
-<script>
-  var disqus_shortname = '<%= config.disqus_shortname %>';
-  <% if (page.permalink){ %>
-  var disqus_url = '<%= page.permalink %>';
-  <% } %>
-  (function(){
-    var dsq = document.createElement('script');
-    dsq.type = 'text/javascript';
-    dsq.async = true;
-    dsq.src = '//' + disqus_shortname + '.disqus.com/<% if (page.comments) { %>embed.js<% } else { %>count.js<% } %>';
-    (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);
-  })();
-</script>
-<% } %>

+<% if (page.comments && theme.gitalk.enable){ %>
+  <%- js({
+    src: 'js/comment',
+    defer: true,
+    id: 'comment_js_file',
+    'data-js': theme.cdn.gitalk.js,
+    'data-css': theme.cdn.gitalk.css,
+    'data-clientID': theme.gitalk.clientID,
+    'data-clientSecret': theme.gitalk.clientSecret,
+    'data-repo': theme.gitalk.repo,
+    'data-owner': theme.gitalk.owner,
+    'data-admin': theme.gitalk.admin,
+    'data-date': date(page.date, 'YYMMDD'),
+    'data-path': url_for(page.path),
+  }) %>
+<% } %>

4. 添加 themes/landscape/source/js/comment.js 文件

添加内容如下：

import md5 from 'blueimp-md5';

(function (){

  const dom = (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]);
  // 装评论模块的盒子
  const node = document.getElementById('gitalk_container');
  // script节点
  const jsNode = document.getElementById('comment_js_file');

  if (!node) {
    return;
  }

  if (!jsNode) {
    return;
  }
  // 获取配置信息
  const js = jsNode.getAttribute('data-js');
  const css = jsNode.getAttribute('data-css');
  const clientID = jsNode.getAttribute('data-clientID');
  const clientSecret = jsNode.getAttribute('data-clientSecret');
  const repo = jsNode.getAttribute('data-repo');
  const owner = jsNode.getAttribute('data-owner');
  let admin = jsNode.getAttribute('data-admin');
  const path = jsNode.getAttribute('data-path') || '';

  if (!js || !css || !clientID || !clientSecret || !repo || !owner || !admin || !path) {
    return;
  }

  // 用于 id 前缀，防止 md5 之后的值相同
  const date = jsNode.getAttribute('data-date') || '';
  const id = date + '-' + md5(path);

  // 用于处理配置的 admin 字段不是字符串，是数组情况
  try {
    admin = JSON.parse(admin)
  } catch (e) {}

  const talkJs = document.createElement('script');
  talkJs.addEventListener('load', function () {
    // 文件加载成功初始评论
    const gitalk = new Gitalk({
      clientID,
      clientSecret,
      repo,
      owner,
      admin,
      id,
      // distractionFreeMode: true,
    });
    gitalk.render('gitalk_container');
  });
  talkJs.async = true;
  talkJs.src = js;

  const talkCss = document.createElement('link');
  talkCss.setAttribute('rel', 'stylesheet');
  talkCss.setAttribute('href', css);

  dom.appendChild(talkJs);
  dom.appendChild(talkCss);
})();

5. 安装 md5 插件 blueimp-md5

npm install blueimp-md5

6. 保存所有文件，启动项目，打开浏览器，不出意外，你应该能看到如下内容：

出现not found错误，参考 Not Found 错误原因

到此 hexo 集成 gitalk评论基本完成！

此集成还有评论初始化问题

问题描述：每次新增文章需要管理员登录，刷新一下页面，让评论初始化一下，其实可以考虑程序自动初始化。
参考文章 hexo gitalk 评论自动初始化

本文由 linx(544819896@qq.com) 创作，采用 CC BY 4.0 CN协议 进行许可。 可自由转载、引用，但需署名作者且注明文章出处。本文链接为： https://blog.jijian.link/2020-01-07/hexo-landscape-gitalk/

如果您觉得文章不错，可以点击文章中的广告支持一下！