Hexo Next 主题点击加载 Disqus 和来必力双评论系统

本文解决两个问题：

1. hexo next 主题（version 5.1.3)怎么设置成点击按钮再加载评论
2. hexo next 主题怎样设置才能同时加载 Disqus 和来必力（livere）双评论系统或更多评论系统

设计思路

我的博客主要是面向墙向用户，所以只能在墙内评论系统里面选一个。不需要备案、登录方式相对多的系统就轮到来必力，唯一的缺点是加载的时候有点慢。但 Disqus 评论系统在墙外应用比较广、功能全，而且显得格调和水平比较高，于是就想加载两个系统。还有一种思路是用JavaScript判断用户的网络是否在中国大陆，然后再加载对应的评论系统。还有为Disqus设置代理的方法，不过评论少的时候折腾了收益不高。

在搜索实现方式的过程，发现还可以让用户点击按钮之后再加载评论系统，这样可避免缓冲过多的JavaScript脚本，改善读者的体验，让博客页面简洁。而且甚至还可以多个评论按钮，用户想看哪个评论系统就点哪个。

上面几种思路就有好几种排列组合了，我暂定选用了设置一个“加载评论”的按钮，读者点击之后同时加载两个评论系统，当然墙内用户看不到Disqus。

研究了hexo next 主题的源文件，发现它把带个博客拆成各种模块，再由配置文件里面的开关和JavaScript判断语句来决定最后生成的博客是什么样。而且最后生成的静态博客，还可以通过JavaScript的条件语句来判断是否加载某些模块。

以post页面的评论模块为例，它牵扯到的源文件有：

• "\blog\themes\next_config.yml"

  这是主题配置文件，里面有开关和参数

  # Disqus
  
  disqus:
    enable: true
    shortname: 
    count: false
  

  ​

• "\blog\themes\next\layout_layout.swig"

  layout就是布局，这里面有两行

           {% include '_partials/comments.swig' %}
  

    {% include '_third-party/comments/index.swig' %}
  

  大概就是它分别引用了comments.swig 和 index.swig 两个模块

• "\blog\themes\next\layout_third-party\comments\index.swig"

  这个模块就是一堆include

  {% include 'duoshuo.swig' %}
  {% include 'disqus.swig' %}
  {% include 'hypercomments.swig' %}
  {% include 'youyan.swig' %}
  {% include 'livere.swig' %}
  {% include 'changyan.swig' %}
  {% include 'gitment.swig' %}
  {% include 'valine.swig' %}

• "\blog\themes\next\layout_third-party\comments\disqus.swig"

  这个就是最最基础的disqus代码了，也就是disqus官方的代码。但是它有一堆if来判断具体怎么加载。但具体的代码貌似跟官方的不太一样。

{% if not (theme.duoshuo and theme.duoshuo.shortname) and not theme.duoshuo_shortname %} ///duoshuo不激活才执行
  {% if theme.disqus.enable %}   ///前面disqus的开关
{% if theme.disqus.count  %}      ///disqus commment数目显示
  
{% endif %}

{% if page.comments %}
  
{% endif %}

  {% endif %}
{% endif %}

• "\blog\themes\next\layout_partials\comments.swig"

hexo next主题只加载一种评论插件的限定就这个在这里实现的。它用连环if语句来控制只实现一种评论插件（通过控制插件参数赋值的方式）

点击按钮加载 Disqus

《Hexo Next 主题点击加载 Disqus》这篇文章讲得很清楚。不过我的next 主题版本和它不一样，所以有一步还是有点区别，反复研究和测试，得出以下步骤。

1.打开需要更改的文件

"\blog\themes\next\layout_partials\comments.swig"

"\blog\themes\next\layout_third-party\comments\disqus.swig"

我用的是EmEditor来编辑，编辑之前可以先备份一下原文件，当然只要不关闭窗口，始终可以ctrl+Z到原文件的状态的。

2. 添加按钮

编辑第一个 comments.swig 文件，在文件内容

前面加入下面内容：

  加载评论

按钮样式我就直接用默认的btn，懒得改了。这里的开关就是onclick="disqus.load()

3.在Disqus的代码外面外包一层判断语句

《Hexo Next 主题点击加载 Disqus》disqus.swig的代码和next 5.1.3里面的disqus.swig长得不太一样，直接copy过来不能用。研究了一下，是要在disqus核心代码外面包一层这样的判断语句：

   var disqus = {
     load : function disqus(){
         此处是disqus核心代码

           $('#load-disqus').remove(); ///加载后移除按钮
         }
     }
   }

这个disqus = { load就对应onclick="disqus.load()

修改之后disqus.swig是如下内容：

{% if not (theme.duoshuo and theme.duoshuo.shortname) and not theme.duoshuo_shortname %}
  {% if theme.disqus.enable %}

    {% if theme.disqus.count  %}
      
    {% endif %}

    {% if page.comments %}
      
    {% endif %}

  {% endif %}
{% endif %}

我就不用那个disqus计数了。它其实是在标题的下面显示评论数，评论全是0的时候好难看。而且它一开始就默认加载，墙内用户会显示加载到失败。

同时加载 Disqus 和来必力双评论系统

上面谈到，hexo next是通过comments.swig里面的if语句和livere.swig里面的if语句来限定了加载disqus就不继续加载来必力。最简单粗暴的解决方法就是，直接把上述两个文件里面的来必力对应的分支语句copy到disqus的分支。

1.打开需要更改的文件

"\blog\themes\next\layout_partials\comments.swig"

"\blog\themes\next\layout_third-party\comments\disqus.swig"

"\blog\themes\next\layout_third-party\comments\livere.swig"

2.修改comments.swig中的disqus部分

在里面分别找到两个插件对应的语句。来必力的语句就是一行，直接插到disqus里面

 

    
  
 ///livere行

3.在disqus.swig里面直接插入来必力核心代码

先在livere.swig里面找出来必力的核心代码：

​

   var d = document, s = d.createElement('script');
           s.src = 'https://{{theme.disqus.shortname}}.disqus.com/embed.js';
           s.setAttribute('data-timestamp', '' + +new Date());
           (d.head || d.body).appendChild(s);
         (function(d, s) {
           var j, e = d.getElementsByTagName(s)[0];
           if (typeof LivereTower === 'function') { return; }
           j = d.createElement(s);
           j.src = 'https://cdn-city.livere.com/js/embed.dist.js';
           j.async = true;
           e.parentNode.insertBefore(j, e);
         })(document, 'script');

​

插入disqus.swig里面：

{% if not (theme.duoshuo and theme.duoshuo.shortname) and not theme.duoshuo_shortname %}
  {% if theme.disqus.enable %}

    {% if theme.disqus.count  %}
      
    {% endif %}

    {% if page.comments %}
      
    {% endif %}

  {% endif %}
{% endif %}

测试成功

---

Markdown中分组标题#与有序列表并用时，#必须写在有序列表的序号前面。用Typora写作时，必须先按快捷键ctrl+数字指定标题的等级，再写序号。相反操作，就会变成“序号.###”的代码，虽然在Typora里面预览没有问题，但最终渲染成HTML时序号就乱了。

原文发表于：Hexo Next 主题点击加载 Disqus 和来必力双评论系统