Click to load Disqus

前情提要

前些天考虑Disqus VS Bitcron comments的时候做了个决定：

……甚至打算不继续使用投入产出比不高的特殊方法。

这里说的其实就是用回最原始的Disqus评论。不过为了照顾国内访客的情绪，同时加速页面生成，我把目光转到之前就一直关注着的「点击加载Disqus评论」上。

起初在一些静态博客里看到过类似的加载按钮，觉得想法很不错，当时谷歌方法却没找到合适的，适逢又用着lepture赞助的Typlog牌Disqus，便未做他想。之后周良同志慷慨提供方法，尝试过后不得要领，却突然开了窍用英文一搜，才发现在英语圈这已不成问题。即使歪果仁没有我们的本土化烦恼，但仍旧介意加载速度，所以「按需加载（load disqus on demand）」应运而生。尝试了谷歌搜索出的第一条方法，简单粗暴有效率，于是就用上了。

伪干货

首先，在post.jade的最下方放入以下代码：

script
    $(document).ready(function() {
        $('.disqus_btn').on('click', function(){
            var disqus_shortname = 'YOUR-DISQUS-SHORTNAME'; // 请填入你的Disqus shortname
            // 使用ajax加载Disqus脚本
            $.ajax({
                type: "GET",
                slug: "//" + disqus_shortname + ".disqus.com/embed.js",
                dataType: "script",
                cache: true
            });
            // 加载后去掉按钮
            $(this).fadeOut();
        });
    });

其次，在相应位置放入加载按钮和评论框的显示代码：

• 加载按钮：.disqus_btn Click to load Disqus
• 评论框：#disqus_thread

其中「Click to load Disqus」可以替换为其他文本，比如「点击加载Disqus评论」等。

最后，根据自身需求用CSS包装加载按钮。

做个记录

我的post.jade是这么写的：

#comments
    h3.disqus_btn Click to load Disqus
    #disqus_thread

script
    $(document).ready(function() {
        $('.disqus_btn').on('click', function(){
            var disqus_shortname = 'shuibaco';
            // ajax request to load the disqus javascript
            $.ajax({
                type: "GET",
                slug: "//" + disqus_shortname + ".disqus.com/embed.js",
                dataType: "script",
                cache: true
            });
            // hide the button once comments load
            $(this).fadeOut();
        });
    });

CSS是这么写的：

.disqus_btn:hover {
    cursor: pointer;
}

因为我前面定义了#comments h3，所以就顺着用了。刚好加载后去掉按钮用的是fadeOut，跟主题「淡泊」很搭，便没有做太多调整。