跳到主要內容

[教學]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。

《畫中畫Anamorph》─ 傑作與劣作的一筆之遙

  Joyce偏愛犯罪驚悚類型的電影,常在觀影後思考是什麼動機驅使連續殺人魔再三地凌虐屠殺被害者,是報復、快感、或是控制慾?有時甚至暗自聯想在奪去他者的性命的那一刻,是否會如臨盆的孕婦,感受著帶有神聖性的生命躍動(或掙扎),而有自身確切活著的喜悅,思及至此,赫然驚察我心底竟蘊含這般原始又嗜血的因子,究竟電影是放大人性中潛伏的黑影,抑或電影只是你我夢靨的些許再現?《畫中畫Anamorph》則在觀眾意識開拓出一座嶄新的幽暗花園...   容我先說明一下片名《Anamorph》,原意來自於文藝復興時期的一種特殊繪畫技巧「變形繪畫」,其中以漢斯.賀賓(Hans Holbein)1533年的作品「使節」(The Ambassadors)最具代表性(如上圖),傳統的透視法皆假設觀賞者位於畫作的正面,然而變形繪畫則得由特定角度才能看到畫作內的第二幅作品「象徵死亡的骷髏頭」,意喻有限的視角造成了認知的晦澀性。畫作裡的兩位青年擁有權勢與才華,乍看是幸福圓滿的人生,卻同樣逃不開死亡的命運。導演以此繪畫術語表達“真實是隨著視角不同而變化”     《畫中畫Anamorph》的劇情設定不足為奇,頗似克里斯多福諾藍執導的《針鋒相對 Insomnia》 (註:Joyce強力推薦) : 70年代紐約市,警探Stan(威廉達佛 飾)偵破一樁駭人聽聞的連續殺人案件「Uncle Eddie」,然而因疏失導致一名少女遭殺害,使得他背負強烈罪惡感覺並渾噩地酗酒消愁,五年後,一起兇殺案竟與疑似死亡的「Uncle Eddie」有著同樣的手法,究竟是模仿犯還是當年抓錯兇手?瀕臨崩潰邊緣的警探Stan究竟藏著什麼不為人知的秘密呢?   Joyce懷疑編劇兼導演Henry S. Miller的靈感是否來自勞倫斯‧卜洛 克所寫的「屠宰場之舞」,地點同樣是光鮮且污穢的紐約,主角皆背負著過去的陰影及酗酒,小說裡的兇手將虐殺過程拍攝成電影,《畫中畫Anamorph》則是以屍體創作藝術品,甚至結局也都令人錯愕悵然,解開了部分迷題卻又帶給讀者亙古難解的人性難題,這部電影的確有種類似偵探小說的懸疑氣氛,且厚實有味。   但隨著劇情推展,電影的情節鋪陳則漏洞百出, 《畫中畫 Anamorph》以屍作畫入鏡的點子的確別樹一

紐西蘭如何作永續設計:「好自然」捕鼠器

很少人知道紐西蘭當地有個名為 BestAwards 的設計盛事,每年會選出從平面設計、產品設計、空間設計等各領域的最紐設計,而2011年的最佳永續性產品的得獎者是一款名為「好自然」的全自動人性化捕負鼠器(Goodnature Automatic Humane Possum Trap),我看到的瞬間心底不禁湧現許多疑問,一款傷害生命的捕鼠器為何取名為好自然?負鼠是什麼鼠?這款捕鼠器又憑什麼獲得永續性(Sustainable)設計大獎?