Disqus评论框改造工程1-"最近评论"的实现

原创文，最初发布于 szhshp的第三边境研究所 , 转载请注明

最近从多说迁移到了Disqus，确实老东家做的插件会好得多，唯一的麻烦就是需要一些步骤才能看到评论框。

大多功能都还凑合。唯一不满意的就是CSS风格。因为是Iframe，所以Basic Usage里面没有提到Style相关的东西。因此我试着搜了一下发现Basic Usage的确无法修改CSS，需要用某种办法调用官方API。

本来也没多在意，也就一个Disqus的Logo放在那儿还看得过去，今天试着用他们Advanced Usage里面加了个最近评论框，同样也是Iframe，不过各种padding加起来之后丑得不行。

是时候研究一下Disqus的API了

毕竟是最大的三方评论供应商，他们的API^[1]及其详细。

1. 首先你肯定已经有了Disqus账号，在Application这里需要注册一下对应的域名，类似于JS跨域域名注册，获得两个Key

Image 026.png

1. 当前通过JS提交的需求只需要Public-Key，然后进行各种get请求，Making Requests^[2]一章内介绍了如何进行请求，实际上就是告诉你记得把Key传过去

2. 从Documents^[3]
   页面找到我们需要的call，也就是Forums/listPosts

   注意还有其他的listPosts的需求，当前我们使用的是全站评论

   Image 028.png

3. 用里面提供的URL加上自己的Key组成链接：

          https://disqus.com/api/3.0/forums/listPosts.json?forum=szhshp&api_key=5Q2Sxxk5WInPOlTllkJKdswsl7M4vtWiY0QrRKXIHtBeJl4YWPa0vbay49KFvQa6
   

4. 直接在浏览器点开就能看到目标JSON

   Image 029.png

5. 已经可以自行输出对应的评论作者/评论内容，甚至一同返回了纯文本和富文本两种内容，最后将返回的数据进行渲染一下：

   Image 030.png

    $.ajax({
     url: 'https://disqus.com/api/3.0/forums/listPosts.json?',
     dataType: 'json',
     data: {
       "forum": 'szhshp',
       "api_key": '5Q2Sxxk5WInPOlTllkJKdswsl7M4vtWiY0QrRKXIHtBeJl4YWPa0vbay49KFvQa6'
     },
    }).done(function(res) {
     for (var i = 0; i < res.response.length; i++) {
       $('<a href=' + res.response[i].url+ '> ' + res.response[i].author.name+ '</a>:  '+res.response[i].raw_message+' <br>').appendTo('#recentComments');
     };
     $('#recentComments').toggleClass('show');
    }).fail(function() {
    })
   

6. 最终效果

   Image 031.png

反正剩下的可以自由修改了，当然要你能够访问Disqus才能进行AJAX，同时AJAX成功我才会让Div显示，如果访问Disqus遇到问题，可以参考 这个解决方案

过段时间我有心情再看看是不是自己写个评论框插件出来，至少能清理掉很多不想看到的部分。

参考文献

---

1. https://disqus.com/api/docs/ ↩

2. https://disqus.com/api/docs/requests/ ↩

3. https://disqus.com/api/docs/ ↩