Joyce這篇文章才寫到一半,就發現國外已經有人寫了幾乎一模一樣的教學,但我還是硬著頭皮寫完好了,希望能幫助更多想安裝Disqus的網友們無痛轉移,假如你英文不錯,可以直接閱讀Shixi XIE所寫的 「HOW TO: Add DISQUS Manually on Blogger/BlogSpot」,有外語焦慮症的請繼續閱讀Joyce的教學。
Joyce的Blogger現在所安裝的樣式其實是東拼西湊的混裝物,原作者有許多獨特的語法寫作習慣,加上我自己又寫入亂七八糟的功能,使得安裝disqus相當困難,我想很多blogger都有這種困擾,想挑個與眾不同的樣式,卻造成日後安裝其他功能常出錯。
改天再來講我與這個雙欄樣式的抗戰史,在安裝Disqus前,請一定要記得完整備份你的模版!
開始打開模板的XML檔案 手動修改,共四個步驟
步驟一:
在 ]]></b:skin> 前,加入下面曲線框框內的語法,可增加在不同瀏覽器的顯示相容性。
// 讓disqus能自動設定留言區塊寬度為100% // #disqus_thread, #disqus_thread #dsq-content { width: 100%; }
步驟二:
為首頁的文章資訊列加入留言訊息,如圖例
找到符合以下語法的區塊
<b:if cond="data:post.allowComments"><a expr:onclick="data:post.addCommentOnclick" expr:href="data:post.addCommentUrl"> <data:post.numcomments />Comments</a> </b:if>
以下面語法替換,中文的部分可換成你習慣的用語
<b:if cond='data:post.allowComments'> <!-- <a expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'> <data:post.numComments/> 則回應</a> --> <!-- +disqus --> <a class='comment-link commentslink' expr:href='data:post.url + "#disqus_thread"'>點此回應 »</a> <!-- -disqus --> </b:if>
步驟三:
在每篇文章頁下方加入留言區塊,如圖例
找到下面這行語法
<div id='backlinks-container'>
在其上方加入這段程式碼,並注意下列程式碼中有兩處需填入你的Disqus帳號!
<!-- +disqus --> <div id='disqus_thread'/> <div id='disqus_post_title' style='display:none;'><data:post.title/> </div> <div id='disqus_post_message' style='display:none;'><data:post.body/> </div> <script type='text/javascript'> var disqus_url = '<data:post.url/>'; var disqus_title = document.getElementById('disqus_post_title').innerHTML; var disqus_message = document.getElementById('disqus_post_message').innerHTML; </script> <script src='http://disqus.com/forums/你的DISQUS帳號/embed.js' type='text/javascript'/> <noscript><a expr:href='"http://你的DISQUS帳號.disqus.com/?url=" + data:post.url'>View the entire comment thread.</a></noscript> <a class='dsq-brlink' expr:href='"http://disqus.com"'> blog comments powered by <span class='logo-disqus'>Disqus</span></a> <!-- -disqus -->
步驟四:
找到下列程式碼
</body>
在其上方加入這段程式碼
<!-- +disqus --> <b:if cond='data:blog.pageType != "item"'> <script type='text/javascript'> (function() { var links = document.getElementsByTagName('a'); var query = '?'; for(var i = 0; i < links.length; i++) { if(links[i].href.indexOf('#disqus_thread') >= 0) { query += 'url' + i + '=' + encodeURIComponent(links[i].href) + '&'; } } document.write('<script type="text/javascript" src="http://disqus.com/forums/ highstreet5/get_num_replies.js' + query + '"></' + 'script>'); })(); </script> </b:if> <!-- -disqus -->
將修改過的語法套用到你的部落格,接著發一篇文章作測試,假如新文章有出現disqus留言功能,恭喜你已成功安裝。
假如按照Joyce的教學依舊失敗,那請接著以Shixi XIE在 「HOW TO: Add DISQUS Manually on Blogger/BlogSpot」這篇所提的另外兩個補充方法試試,方法如下。
補充一:
找找看你的模板內是否有“類似”下列的程式碼
<b:if cond='data:post.numComments == 1'> 1 <data:commentLabel/>: <b:else/> <data:post.numComments/> <data:commentLabelPlural/>: </b:if>
假如有,請以下列程式碼替換
<!-- <b:if cond='data:post.numComments == 1'> --> <!-- 1 <data:commentLabel/>: --> <!-- <b:else/> --> <!-- <data:post.numComments/> <data:commentLabelPlural/>: --> <!-- </b:if> --> Comments:
補充二:
找找看你的模板內是否有“類似”下列的程式碼
<p class='comment-footer2'> <a expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'> <data:postCommentMsg/></a> </p>
假如有,請以下列程式碼替換
<!-- <p class='comment-footer2'> --> <!-- <a expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'> <data:postCommentMsg/></a> --> <!-- </p> -->
再一次將修改過的語法套用到你的部落格,假如依舊不行,歡迎留言或將模板寄給Joyce,我會盡力幫忙。
假如你用的是舊版的blogger模板,Shixi XIE同時寫了一篇「
HOW TO: Integrate DISQUS on Blogger/BlogSpot Classic Template」