跳到主要內容

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

《迷霧驚魂》最深沉的恐懼乃是絕望

看看我!看看我!我體內的怪物已經變的這麼大了喔! 引自浦澤直樹的漫畫Monster 如果要Joyce簡單描述電影迷霧驚魂(Mist)的感想,我會說:導演 Frank Darabont 與原著史蒂芬金聯手在觀眾的心裡喚醒一頭駭人的怪物,電影播畢你會發覺自己連呼吸都飄散著逼人窒息的絕望。 導演 Frank Darabont 先前曾拍過「刺激1995」與「綠色奇蹟」,皆是史蒂芬金的小說改編,今年推出的「迷霧驚魂(Mist)」是兩人第三次合作,自然比起前兩部作品更細膩精準地詮釋史蒂芬金的恐怖風格,「迷霧驚魂(Mist)」的影片時間較短,因此一些故事細節讓觀眾摸不著頭緒,但絕對是近年來翻拍史蒂芬金小說最成功的電影。   內容簡介(無雷): 電影始自遭暴風雨摧折的小鎮,一陣濃霧悄然地自山巔飄降,男主角開車帶著幼子來到鎮上的超市採買,而大多數鎮民打算囤積糧食也蜂擁而來,當伸手不見五指的濃霧措手不及地籠罩整個市鎮,霧裡更藏匿著未知的怪物時,這間超市成為他們唯一的避難所.... 迷霧的第一層涵義: 許多恐怖片都熱愛運用「霧」陰冷且若隱若現的特性渲染氣氛,但 在「迷霧驚魂(Mist)」中,久久不散的「霧」除了作為傳遞恐怖的媒介外,又多了些細膩的特殊寓意─「人際間因誤解而猜忌」。 有形濃霧與有形的怪物直接給予鎮民與觀眾感官視覺上的戰慄與驚恐,慌亂中的鎮民們又因信念、信仰而彼此猜忌、責怪,這是導演巧妙釋放的無形濃霧,此外隨著死亡的陰影逐步逼近,鎮民們的恐懼將內心無形的怪物餵養的更壯碩,最終主角們沒被不明的怪物吞噬,卻紛紛慘死在名為絕望的怪物足下。 最後男主角等人開車離去時,隔著霧與困守在超市的鎮民相望,徹底將這種人際間疏離猜忌表現到極至; 決定駕車離去的主角們與其說是勇氣使然,更毋寧是因信念不同而遭驅趕 ─ 苟且偷安與冒險求生,其目的都是追求一絲活下去的希望,然而恐懼卻讓人性自私爭鬥的一面表露無遺 。 上述這段已經接近電影尾聲,但令Joyce讚嘆的是導演處理人的神情之細膩,請網友一定要仔細看「離開」這個橋段,導演特地用慢鏡頭配上 悲壯 噁心配樂處理,正是要讓觀眾看清楚每一個飾演鎮民的演員臉上表露的迷惘、後悔、悲傷、恐懼...但就是沒有一個人臉上

《美髮師的夢想》推倒身體歧視的牆

女性影展官網上的劇情簡介: 凱蒂有一個龐大到超乎一般人想像的身體。她的巨大體型讓她丟了飯碗,遭受歧視。吃,是她的紓壓良方。儘管挫折不斷,凱蒂誓言要成為柏林首屈一指的髮型設計師。夢想讓她的臉上時常掛著樂觀的笑容。為了完成夢想,她答應協助人蛇集團以賺取佣金,在運輸非法移民時卻出了差錯,但她也因此歪打正著遇見了愛情,實現了夢想。影片的輕盈與歡樂的質地,正好與凱蒂巨大的身體與隨之而來的壓力形成強烈對比。 只看簡介,《美髮師的夢想》很容易被解讀成一個好心腸的胖女人備受歧視,卻努力圓美髮師夢想的勵志故事,然而為何好心腸或樂觀這類正面特質放在肥胖者身上時,往往產生過於放大的修飾效果?多數電影與觀眾都習慣以天助自助者的矯情套路來掩飾對醜鄙的憎惡。 故《美髮師的夢想》前二十分鐘誇張地使用特寫鏡頭,看著幾乎佔據整個螢光幕的龐大軀體,脂肪顫動的方式截然不同於過往螢光幕上熟悉的優美肢體律動,德利多莉思(Doris Dörrie)處心積慮用厭惡療法壓迫觀眾暫且放下有色眼鏡。