为 Hexo 博客加入 Disqus 评论

由于多说将于近期关闭服务，所以不得不切换其他的评论服务

昨天打开自己的博客看了一眼，在评论框下面多了一行提示，多说即将关闭，这个是多说官网的页面通知，重要通知: 多说即将关闭
链接内主要是说 “多说将于2017年6月1日正式关停服务”，距服务离关闭还有不到三个月了，择日不如撞日，今天正巧有时间，搞起
至于选择哪家的评论，我自己去 Google 搜了一下，好像用 Disqus 的也不少，考查了一下集成难度，感觉很容易集成，于是决定使用 Disqus

注册 Disqus

打开 Disqus 主页

Disqus.png
可以看到，Disqus 支持 Facebook，Twitter以及 Google 登录，当然也可以用邮箱注册一个账号，如果是注册的账号，需要验证一下邮箱

配置 Disqus

登录后，点击首页的 GET STARTED 按钮，之后选择 I want to install Disqus on my site 选项，就会看到下面的界面

Setup.png

Websit Name 就是 short name 自己填写，但是要求全网唯一，设定后不可改变，比如我的是 wangkunlin，这个在配置 Hexo 的时候需要用到
Category 选择种类，可以随便选
Language 语言选 Chinese 或者 English
然后点 Create Site 等待界面跳转
接下来在页面的左侧点击 Configure Disqus

Complete.png
在 Website URL 那里填写自己的博客地址，Description 可以不写，然后点 Complete Setup，Disqus 基本的设置已经完成

配置 Hexo

在 blog 下的 _config.yml 里

# 填写你自己的 shortname
disqus_shortname: wangkunlin

进入 theme 目录，这里我用的主题是 Tinnypp 找到 comment.ejs，我的是在 blog/themes/Tinnypp/layout/_partial/post/comment.ejs，不同主题请自行查找，替换为下面的内容

<% if (page.comments){ %>
<section id="comment">
  <% if(config.disqus_shortname) { %>
  <div id="disqus_thread">
    <noscript>Please enable JavaScript to view the <a href="//disqus.com/?ref_noscript">comments powered by Disqus.</a></noscript>
  </div>
  <% } %>
</section>
<% } %>

修改 blog/themes/Tinnypp/layout/_partial/after_footer.ejs，将原来的多说相关的代码删掉，增加下面的代码（这是根据原来的逻辑修改过）

<% if ((page.layout == 'post' || page.layout == 'page') && config.disqus_shortname && page.comments){ %>
    <script type="text/javascript">
    var disqus_shortname = '<%= config.disqus_shortname %>';
    var disqus_config = function () {
        this.page.url = '<%= config.url %>/<%= page.path %>';
        this.page.identifier = '/<%= page.path %>';
        this.page.title = '<%= page.title %>';
    };
    (function(){
      var d = document;
      var dsq = d.createElement('script');
      dsq.type = 'text/javascript';
      dsq.async = true;
      dsq.src = '//' + disqus_shortname + '.disqus.com/<% if (page.comments){ %>embed.js<% } else { %>count.js<% } %>';
      (d.head || d.body).appendChild(dsq);
    })();
    </script>
<% } %>

然后执行

$ hexo clean
$ hexo g
$ hexo s

就可以看到 Disqus 已经成功集成到自己的博客了，Disqus 详细的配置可以自己去看看，这里不再介绍了