区分国内与国外GIT，分别显示多说与DISQUS

发表于   |   分类于   |   阅读次数   |   字数统计: 5,220(字)   |   阅读时长: 30(分)

摘要

相信很多人都已经实现的coding与Github的同时托管NEXT博客。但相信很多人都会碰到coding与github到
底是使用duoshuo还是disqus的问题，毕竟多说适合国内，而disqus适合国外。如何选择都不是最好的。那
有没办法实现国内coding使用多说。国外github使用disqus，其实是可以得。仅需您做部分代码的修改。本
章为此而介绍。
HEXO-建站系列
HEXO-优化系列
HEXO-进阶系列

前沿

本章将会描述如何实现coding使用多说的插件作为底部评论，而github使用disqus插件作为底部评论。其次
本介绍并不会涉及如何获取和设置多说和disqus，所以如果您需要了解相关信息，
请关注本系列的”HEXO-建站系列”

多说与disqus文件代码分析

无论多说与disqus都需要在主题下的_config.yml进行启用相关配置选项，代码如下

1
2
3
4
#多说的配置项
duoshuo_shortname: 你的多说网站链接短名
#disqus的配置项
disqus_shortname: 你的disqus链接的短名

正常情况下你只能启用其中的一个，这是由于NEXT下的代码逻辑所决定.以下部分我们介绍多说与disqus相关
代码文件，你就会明白上面所说情况的原因。

多说涉及文件与分析

多说与disqus的功能实现文件
多说与disqus功能实现分别对应一个swig文件，文件的位置在：
themes\next\layout\_scripts\third-party\comments下面

  1. disqus.swig
  2. duoshuo.swig
    以上两个文件分别是多说与disqus实现代码(代码包含了多说与disqus实现的js代码)
    页面显示的多数与disqus的关键文件
    直接决定是否在文章页面显示的多说或者disqus的关键代码在
    themes\next\layout\_partials\comments.swig
    总结
    故本章目的实现的关键就在comments.swig、disqus.swig、duoshuo.swig。
    comments.swig包含了关于多说与disqus是否页面显示的判断
    disqus.swig、duoshuo.swig 包含了相关官方功能实现的代码。
    默认情况下：
    1
    如果多说与disqus都在`_config.yml`开启，最终`comments.swig`判断标准是以多说为优先。

所以如果您要实现coding与github分开加载对应的评论框，你需要修改comments.swig的显示判断标准
同时你还要在相关的功能文件disqus.swig、duoshuo.swig设置判断您网站属于哪个域名判断，从而加载
对应评论框的代码。
原理描述为此，以下细说实现过程：

实现代码

修改comments.swig判断标准

目的：修改comments.swig 不区分多说与disqus的优先。其实就是一个if esleif的取消
原代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
{% if page.comments %}
  <div class="comments" id="comments">
    {% if (theme.duoshuo and theme.duoshuo.shortname) or theme.duoshuo_shortname %}
      <div class="ds-thread" data-thread-key="{{ page.path }}"
           data-title="{{ page.title }}" data-url="{{ page.permalink }}">
      </div>
    {% elseif theme.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>
    {% endif %}
  </div>
{% endif %}

修改后的代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
{% if page.comments %}
  <div class="comments" id="comments">
    {% if (theme.duoshuo and theme.duoshuo.shortname) or theme.duoshuo_shortname %}
      <div class="ds-thread" data-thread-key="{{ page.path }}"
           data-title="{{ page.title }}" data-url="{{ page.permalink }}">
      </div>
	{% endif %}
    {% if theme.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>
    {% endif %}
  </div>
{% endif %}

修改duoshuo.swig判断标准

目的：判断你的域名，即判断你当前访问的域名是否是yourname.coding.net.是就加载多说代码，
否不加载
原代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
{% if (theme.duoshuo and theme.duoshuo.shortname) or theme.duoshuo_shortname %}
  {% if theme.duoshuo %}
    {% set duoshuo_shortname = theme.duoshuo.shortname %}
  {% else %}
    {% set duoshuo_shortname = theme.duoshuo_shortname %}
  {% endif %}

  <script type="text/javascript">
    var duoshuoQuery = {short_name:"{{duoshuo_shortname}}"};
    (function() {
      var ds = document.createElement('script');
      ds.type = 'text/javascript';ds.async = true;
      ds.id = 'duoshuo-script';
      ds.src = (document.location.protocol == 'https:' ? 'https:' : 'http:') + '//static.duoshuo.com/embed.js';
      ds.charset = 'UTF-8';
      (document.getElementById('footer')
      || document.getElementsByTagName('body')[0]).appendChild(ds);
    })();	                                 
  </script>

  {% if theme.duoshuo_info.ua_enable %}
    {% if theme.duoshuo_info.admin_enable %}
      {% set ua_parser_internal = url_for(theme.vendors._internal) + '/ua-parser-js/dist/ua-parser.min.js?v=0.7.9' %}
      <script src="{{ theme.vendors.ua_parser | default(ua_parser_internal) }}"></script>
      <script src="{{ url_for(theme.js) }}/src/hook-duoshuo.js"></script>
    {% endif %}
  {% endif %}

{% endif %}

修改后的代码：
需要添加的代码:目的判断你的域名是否是yourname.coding.net.实现判断性加载
您需要替换chinadomain字段的值为你真实的coding.net的网站

1
2
3
4
5
6
 host = window.location.href;
 chinadomain = "yourname.coding.me";
 if (host.indexOf(chinadomain)!=-1)  {
                                     
#包含实现多说功能的代码							   
							      }

最终结果：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
{% if (theme.duoshuo and theme.duoshuo.shortname) or theme.duoshuo_shortname %}
  {% if theme.duoshuo %}
    {% set duoshuo_shortname = theme.duoshuo.shortname %}
  {% else %}
    {% set duoshuo_shortname = theme.duoshuo_shortname %}
  {% endif %}

  <script type="text/javascript">
  host = window.location.href;
  chinadomain = "yourname.coding.me";
  if (host.indexOf(chinadomain)!=-1)  {
    var duoshuoQuery = {short_name:"{{duoshuo_shortname}}"};
    (function() {
      var ds = document.createElement('script');
      ds.type = 'text/javascript';ds.async = true;
      ds.id = 'duoshuo-script';
      ds.src = (document.location.protocol == 'https:' ? 'https:' : 'http:') + '//static.duoshuo.com/embed.js';
      ds.charset = 'UTF-8';
      (document.getElementById('footer')
      || document.getElementsByTagName('body')[0]).appendChild(ds);
    })();
	                                 }
  </script>

  {% if theme.duoshuo_info.ua_enable %}
    {% if theme.duoshuo_info.admin_enable %}
      {% set ua_parser_internal = url_for(theme.vendors._internal) + '/ua-parser-js/dist/ua-parser.min.js?v=0.7.9' %}
      <script src="{{ theme.vendors.ua_parser | default(ua_parser_internal) }}"></script>
      <script src="{{ url_for(theme.js) }}/src/hook-duoshuo.js"></script>
    {% endif %}
  {% endif %}

{% endif %}

同理修改disqus.swig判断标准

原代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
{% if theme.disqus_shortname %}

  <script type="text/javascript">
    var disqus_shortname = '{{theme.disqus_shortname}}';
    var disqus_identifier = '{{ page.path }}';
    var disqus_title = '{{ page.title }}';
    var disqus_url = '{{ page.permalink }}';

    function run_disqus_script(disqus_script){
      var dsq = document.createElement('script');
      dsq.type = 'text/javascript';
      dsq.async = true;
      dsq.src = '//' + disqus_shortname + '.disqus.com/' + disqus_script;
      (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);
    }

    run_disqus_script('count.js');
    {% if page.comments %}
      run_disqus_script('embed.js');
    {% endif %}
                                  
  </script>
{% endif %}

修改后的代码：
需要添加的代码:目的判断你的域名是否是yourname.coding.net.实现判断性加载
您需要替换chinadomain字段的值为你真实的coding.net的网站

1
2
3
4
5
 host = window.location.href;
 chinadomain = "yourname.github.io";
 if (host.indexOf(chinadomain)!=-1)  {
                                     
#包含实现disqus功能的代码

```

总结

当你修改完并保存后，就可以实现coding加载多说，github加载disqus.实现国外与国内评论框的分别加载

结语

如果你还需要了解更多技术文章信息，请继续关注Jory博客

看一看，共同关注，共同分享与讨论！