原創(chuàng)文离赫，最初發(fā)布于 szhshp的第三邊境研究所 , 轉(zhuǎn)載請注明
最近從多說遷移到了Disqus婶熬，確實(shí)老東家做的插件會(huì)好得多氏身，唯一的麻煩就是需要一些步驟才能看到評論框歼郭。
大多功能都還湊合。唯一不滿意的就是CSS風(fēng)格潘明。因?yàn)槭荌frame行剂，所以Basic Usage里面沒有提到Style相關(guān)的東西。因此我試著搜了一下發(fā)現(xiàn)Basic Usage的確無法修改CSS钳降，需要用某種辦法調(diào)用官方API厚宰。
本來也沒多在意，也就一個(gè)Disqus的Logo放在那兒還看得過去遂填，今天試著用他們Advanced Usage里面加了個(gè)最近評論框铲觉，同樣也是Iframe，不過各種padding加起來之后丑得不行吓坚。
是時(shí)候研究一下Disqus的API了
畢竟是最大的三方評論供應(yīng)商撵幽，他們的API[1]及其詳細(xì)。
- 首先你肯定已經(jīng)有了Disqus賬號礁击，在Application這里需要注冊一下對應(yīng)的域名盐杂，類似于JS跨域域名注冊，獲得兩個(gè)Key
當(dāng)前通過JS提交的需求只需要Public-Key哆窿，然后進(jìn)行各種get請求链烈，
Making Requests[2]一章內(nèi)介紹了如何進(jìn)行請求，實(shí)際上就是告訴你記得把Key傳過去-
從
Documents[3]
頁面找到我們需要的call挚躯，也就是Forums/listPosts注意還有其他的
listPosts的需求强衡，當(dāng)前我們使用的是全站評論Image 028.png -
用里面提供的URL加上自己的Key組成鏈接：
https://disqus.com/api/3.0/forums/listPosts.json?forum=szhshp&api_key=5Q2Sxxk5WInPOlTllkJKdswsl7M4vtWiY0QrRKXIHtBeJl4YWPa0vbay49KFvQa6 -
直接在瀏覽器點(diǎn)開就能看到目標(biāo)JSON
Image 029.png -
已經(jīng)可以自行輸出對應(yīng)的評論作者/評論內(nèi)容，甚至一同返回了純文本和富文本兩種內(nèi)容码荔，最后將返回的數(shù)據(jù)進(jìn)行渲染一下：
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() { }) -
最終效果
Image 031.png
反正剩下的可以自由修改了漩勤，當(dāng)然要你能夠訪問Disqus才能進(jìn)行AJAX号涯，同時(shí)AJAX成功我才會(huì)讓Div顯示，如果訪問Disqus遇到問題锯七，可以參考 這個(gè)解決方案
過段時(shí)間我有心情再看看是不是自己寫個(gè)評論框插件出來，至少能清理掉很多不想看到的部分誉己。
