最近從多說遷移到了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

   

2. 當前通過JS提交的需求只需要Public-Key，然後進行各種get請求，Making Requests[^2]一章內介紹瞭如何進行請求，實際上就是告訴你記得把Key傳過去

3. 從Documents[^3]
   頁面找到我們需要的call，也就是Forums/listPosts

   注意還有其他的listPosts的需求，當前我們使用的是全站評論

   

4. 用裡面提供的URL加上自己的Key組成連結：

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

5. 直接在瀏覽器點開就能看到目標JSON

   

6. 已經可以自行輸出對應的評論作者/評論內容，甚至一同返回了純文字和富文字兩種內容，最後將返回的資料進行渲染一下：

   

   $.ajax({
    url: 'https://disqus.com/api/3.0/forum/listPosts.json?',
    dataType: 'json',
    data: {
      "forum": 'szhshp',
      "api_key": '5Q2Sxxk5WInPOlTllkJKdswsl7M4vtWiY0rRKXIHtBeJl4YWPa0vbay49KFvQa6'
    },
   }).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() {
   })
    
   

7. 最終效果

   

反正剩下的可以自由修改了，當然要你能夠訪問Disqus才能進行AJAX，同時AJAX成功我才會讓Div顯示，如果訪問Disqus遇到問題，可以參考 這個解決方案

過段時間我有心情再看看是不是自己寫個評論框外掛出來，至少能清理掉很多不想看到的部分。

參考文獻