跳到主要內容

[教學]Blogger如何手動安裝Disqus

 

 

Joyce這篇文章才寫到一半,就發現國外已經有人寫了幾乎一模一樣的教學,但我還是硬著頭皮寫完好了,希望能幫助更多想安裝Disqus的網友們無痛轉移,假如你英文不錯,可以直接閱讀Shixi XIE所寫的 「HOW TO: Add DISQUS Manually on Blogger/BlogSpot」,有外語焦慮症的請繼續閱讀Joyce的教學。

 

Joyce的Blogger現在所安裝的樣式其實是東拼西湊的混裝物,原作者有許多獨特的語法寫作習慣,加上我自己又寫入亂七八糟的功能,使得安裝disqus相當困難,我想很多blogger都有這種困擾,想挑個與眾不同的樣式,卻造成日後安裝其他功能常出錯。

 

改天再來講我與這個雙欄樣式的抗戰史,在安裝Disqus前,請一定要記得完整備份你的模版!

0

開始打開模板的XML檔案 手動修改,共四個步驟

步驟一:

在 ]]></b:skin> 前,加入下面曲線框框內的語法,可增加在不同瀏覽器的顯示相容性。

// 讓disqus能自動設定留言區塊寬度為100% // #disqus_thread, #disqus_thread #dsq-content { width: 100%; }

步驟二:

為首頁的文章資訊列加入留言訊息,如圖例

1

 

找到符合以下語法的區塊

<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 + &quot;#disqus_thread&quot;'>點此回應 &#187;</a> <!-- -disqus --> </b:if>

步驟三:

在每篇文章頁下方加入留言區塊,如圖例

2

 

找到下面這行語法

<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 = &#39;<data:post.url/>&#39;; var disqus_title = document.getElementById(&#39;disqus_post_title&#39;).innerHTML; var disqus_message = document.getElementById(&#39;disqus_post_message&#39;).innerHTML; </script> <script src='http://disqus.com/forums/你的DISQUS帳號/embed.js' type='text/javascript'/> <noscript><a expr:href='&quot;http://你的DISQUS帳號.disqus.com/?url=&quot; + data:post.url'>View the entire comment thread.</a></noscript> <a class='dsq-brlink' expr:href='&quot;http://disqus.com&quot;'> blog comments powered by <span class='logo-disqus'>Disqus</span></a> <!-- -disqus -->

步驟四:

 

找到下列程式碼

</body>

 

在其上方加入這段程式碼

<!-- +disqus --> <b:if cond='data:blog.pageType != &quot;item&quot;'> <script type='text/javascript'> (function() { var links = document.getElementsByTagName(&#39;a&#39;); var query = &#39;?&#39;; for(var i = 0; i &lt; links.length; i++) { if(links[i].href.indexOf(&#39;#disqus_thread&#39;) &gt;= 0) { query += &#39;url&#39; + i + &#39;=&#39; + encodeURIComponent(links[i].href) + &#39;&amp;&#39;; } } document.write(&#39;&lt;script type=&quot;text/javascript&quot; src=&quot;http://disqus.com/forums/ highstreet5/get_num_replies.js&#39; + query + &#39;&quot;&gt;&lt;/&#39; + &#39;script&gt;&#39;); })(); </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

 

衍伸閱讀:「Disqus視訊留言的策略分析」─ 生自藍海又殺回紅海

這個網誌中的熱門文章

你不知道的普羅米修斯(一)異形電影的藝術DNA

《異形》(1979)導演RidleyScott最近帶著新作《普羅米修斯(Prometheus)》再次將異形這種奇妙生物展現在螢光幕前,而看過這部電影的觀眾評價非常兩極,Joyce寫這篇文章的用意不在於開啟這種好壞的爭辯,而是想談談「異形」這種虛構生物一脈相承的藝術血統, 無劇透!請安心閱讀。 左為異形編劇之一Dan O'Bannon  右為HR Giger,背景是《異形》道具製作現場 在1979年《異形》上映時,觀眾與影評的反應也呈現極端憎惡或無比熱愛,但《異形》在視覺效果上的成就卻是有口皆碑的好,這不得不歸功於瑞士超現實主義畫家與雕塑家HR Giger。

《蝸牛食堂》身心食同源

  日本異常地喜愛拍攝以食物作為人際溝通的電影,Joyce個人尤其關注其中幾部涉及女性主題的美食電影,像是《海鷗食堂》裡日本中年女子企圖將飯糰的美味傳達給芬蘭人,到《幸福的馨香》百貨公司女職員從排斥、喜愛、進而守護中華料理,或是《 幸福便當 》講述單親媽媽如何以便當開啟第二人生的可能,女性料理人的故事往往比料理鐵人類的男性敘事多了幾分柔軟細膩的口感,也更容易喚醒觀眾自身成長的味蕾經驗,畢竟我們的味覺經驗主要還是仰賴成長過程中身邊的女性所建構,不是嗎?

《險路勿近》迷人的惡之華

坦白說,柯恩兄弟 (Joel Coen)的電影向來不是我的tone,然而這部 【險路勿近No Country for Old Men】倒讓Joyce耳目一新,不但具有商業片必備的元素─緊繃的氣氛加上刺激的動作場面,也能有藝術片的哲學內涵,實在是他們近年來最佳的作品,Joyce強烈推薦還沒看的網友一定要看。 Joyce不多說劇情,以下是個人觀影後的一些心得,與各位交流。 隨手可得的暴行 象徵主義 ( symbolism )( Wiki )認為「形式本身不是目的,思想觀念是目的」。Joyce則認為電影【險路勿近No Country for Old Men】中「 暴力只是行兇的形式,而駭人又迷人的卻是那深徹入骨的邪惡 」。 【險路勿近No Country for Old Men】成功地形塑Chigurh這位冷血殺手,從頭看到尾,幾乎把能殺的都殺了,甚至委託人也難逃一死,如此讓人直冒冷汗的角色恐怕只有【沉默的羔羊】裡的漢尼拔博士堪比。 假若對漢尼拔而言,殺人猶如一場神聖的宗教獻祭,他則是手持利刃祭司,在揮下屠刀時得到彷彿為神之化身的興奮,破壞與創造同樣來帶來如神般的成就感,但破壞更省時間。 然而Joyce認為柯恩兄弟 (Joel Coen)在處理暴力本質比「沉默的羔羊」更高竿。 片中飾演老警長的Tommy Lee Jones說了一則故事,大意如下: 過去殺牛得用大鎚敲暈牛,五花大綁後再切斷其喉嚨,某人因為在沙牛時,牛醒來並發狂掙扎,而受傷。今日殺牛的方法不一樣了,只要用空氣槍將石塊射入牛隻頭部再吸出來,畜生永遠不知道被什麼射中... 過去在電影【沉默的羔羊】中,獵物是沒有反擊能力,獵物低聲的啜泣也激起獵人興奮的歡快,但在【險路勿近】中,獵人與獵物的角色不斷倒置,即便是專業的殺手Chigurh也險些栽在Josh Brolin飾演的越戰老兵手裡,意味著在我們這槍枝氾濫的時代,任何人都能輕易擁有槍彈,暴力不再是邪惡的專屬品,不起眼的學童也可能手提步槍到校掃射... 在電影【沉默的羔羊】中著墨的是儀式般的生死交替,看著漢尼拔聽著古典樂品紅酒食人肝,【險路勿近】中殺手Chigurh拿的武器竟是外觀平凡的空氣槍,而非手槍,然而在見到空氣槍無聲...