143° 2017613字评论

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",
                url: "//" + disqus_shortname + ".disqus.com/embed.js",
                dataType: "script",
                cache: true
            });
            // 加载后去掉按钮
            $(this).fadeOut();
        });
    });

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

其中「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",
                url: "//" + 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,跟主题「淡泊」很搭,便没有做太多调整。

EOF
34°
直链还是脚注?
点击加载Disqus