E.J. BLOG

Archive for January, 2012

[Notes] How to embed Disqus into Blogger

leave a comment

Image Credit

因為受人之托,所以這幾天就利用空閒的時間在研究 Blogger 的 Layout Data Tags,而這次主要的問題就是要如何把 Disqus 嵌入在 Blogger theme 裡面,不過因為整個過程發生了一些問題,因此特別做一個記錄。

*我 Blogger 上的主題是:Carmen

一開始當然是先去 Disqus 設定好 Blogger 的相關資訊,然後根據官方的教學,我可以利用它們設計好的一個按鈕來掛載 Disqus(圖如下)

這邊的設計我覺得非常有趣,因為 Blogger 允計開發者以小組件(Widget)的方式快速分享、掛載,而 Disqus 掛載的東西就是一段會直接插入範本(Template)的標記(雖然標記又分 Layouts Widget TagsLayouts Data Tags 兩種,不過彼此都會互相使用到,前者主要是可以和 Widget 做互動、邏輯判斷、以及操縱迴圈,而後者則是可以取得各式各樣你可能會用到的「資料」,例如 Comments / Posts … 等)。

OK,接下來就是一連串的惡夢。

當我安裝好 Disqus Widget 後,我發現 Disqus Comment System 並沒有啟用,還是原本的樣子,所以我就開始很困惑,而透過 Chrome 的 Developer Tool 也沒有發現任何從 Disqus 載入的資源,整個就是相當無奈呀 …

而在經過不斷的碰壁之後,發現 Disqus 有寫一份 Help 可供參考,而文件的內容是一串假設,Disqus 會以這些假設為前提來載入 Comment System,如果有假設不符的話,那就可能是造成它無法正確載入的原因。

看著看著,我發現最後一點和我的情況好像有點衝突,它是這樣寫的:

There is a div with id comments. This is the div that the gadget will use include the Disqus comment embed. Blogger uses this div for its own native comment display. The gadget clears Blogger’s native comments and replaces it with Disqus’s comments …

中文版大意:

有一個 div 的 id 為 ‘comments’,而當 Disqus 掛載 widget 的時候,這個 div 會被用來載入 Disqus 的留言系統。而原本 Blogger 的留言系統也是採用這個 div ,所以當你掛載 Disqus widget 之後,我們會清掉 Blogger 原生的留言系統並取代成 Disqus 的留言系統。

Jesus,就在我爬過了整個 Carmen.xml 之後,我發現問題就真的發生在這個 div 身上,因為 Carmen 在它的 xml 裡面寫了這麼一段 code :

問題就是出在這個 Template 做了一個很奇怪的設計,它的 #comments DOM 出現的時機竟然是在該篇文章的 Comment 不為零的時候!!所以如果這一篇文章沒有人留言,就不會有 #comments 的出現,又因為沒有 #comments,所以 Disqus 無法載入它們的 Comment System!

What the fuck ???

所以只好直接 Hack Carmen.xml,去 「Blogger >> 設定 >> 文章和留言 >> 留言 >> 留言位置 >> 隱藏」把原生的 Comment System 關掉,然後再另外插入一段 div:


<div class='comments' id='comments'>

如此一來,它可以延續 .class 的樣式,而且又能夠讓 disqus 載入 Comment System,接下來就是要調整如何秀出 Comment Count 。

很簡單,就短短的一行:


<a class='comment-link' expr:href='data:post.url + &quot;#disqus_thread&quot;'/>

但是這一行我搞了好久。

一開始當然也是先參考 Disqus 官方的 Example,之後可以發現 Disqus 會去爬行 Anchor tags,然後找出以「#disqus_thread」結尾的 Anchor 做替換,換成你在 Disqus 設定的 Comment Counts(可以在 Disqus 設定欲呈現的樣式及文字)。

這樣很 OK,離成功不遠了,但,麻煩的是在 Layouts Data Tags …

因為我們知道 Disqus 是利用當下的 URL 當做 Identifier 來判斷要載入相對應的留言串,但是我們要怎麼把當下 Post 的 URL 當做 href 的值塞進 Anchor Tag ?

這邊就要參考 Blogger 的 Layouts Widget TagsLayouts Data Tags 說明。

正如先前我寫的那一段 Code,我們可以利用「expr:href」的方式在 href 中塞值,別小看這個「expr:__HTML_ATTRIBUTE__」,因為官方沒有任何文件有解釋這個語法,我一開始就是因為不知道如何把 Post URL 與 #disqus_thread 這兩個字串串接起來而 Error 很久。

而這個「expr:」全名應該是 Expression,你可以在裡面寫入相關的表達式,以剛剛的 Code 為例,我就可以在經由 expr: 表達的 Attribute 中操縱 Layouts Data Tags,透過 data:post.url 取得該 Post 的 URL,然後再利用「+」串接 #disqus_thread 這個字串以得到最終結果。

不過這邊有一個要注意的,就是如果你要在 expr: 中表示字串的話,要用 &quot; 把它包住(因為已經被 expr: 的「’」 包住一層了,裡面就要跳脫「’」),不然的話會造成 parser 混淆,產生一堆 Error 呀!

以上就是這次為了 Disqus 所玩的 Hacking,如果要說心得的話,就是 Blogger 真的很屌,一個 Template xml 就可以搞定整個主題的樣式,然後搭配 Layouts Widget Tags 及 Layouts Data Tags 就能完成你所有想要做到的事情,雖然所有的東西都要塞到一個 xml 裡面會讓人看的有點難過(真的很髒),不過它也把原本在 WordPress 很不容易做到的事情簡化了許多,讓我覺得 Blogger 真的很用心在做這個事業。

加油!期待 Blogger 有更多令人驚艷的東西 :]

Written by EragonJ

January 5th, 2012 at 8:23 pm

[Book Review] 1坪的奇蹟 – Miracles

leave a comment

Image Credit: 1,2,3,4

在誠品閒逛的那一個下午,我被封面上老奶奶真誠的微笑吸引而拿起了這本書,等到我再次把它放回去的時候,已經是兩個小時後的事情了。

還記得書上的簡介是這樣子寫的:

為什麼只有一坪,卻年收入三億日幣營業額?
為什麼只賣兩種產品,卻四十年客人每天大排長龍?
其實方法只有一個!一生只做好一個專業!

什麼樣的夢幻產品,放在赤道上也不會變質?
什麼樣的店家,讓客人自動自發自組粉絲團,還自訂排隊規則?
什麼樣的味道,讓人念念不忘,至死之前都想再嚐一口?

從來沒有145公分的女性在煉製的鍋子場,她是第一位,也是唯一的一位。
年輕時候立志成為一個攝影師,跑新聞拍照,根本不想繼承家業。
但命運在她身上做了決定性的改變,經歷戰後、泡沫經濟,她接下一坪的夢想。

每天只熬煮三鍋紅豆,只堅持出品150條夢幻羊羹;
她發現紅豆泥要變成一張紙厚度,達到紫色光芒的最高境界,就像攝影暗房最後出現的顯影,為了等待令人驚奇神聖的一刻,她研究再研究,反覆練習又練習,流汗流淚像在跑百米賽。

她更發現要把產品完成,得到客人的心,不是只專注在製作流程上,她還要出去吹吹風,散散步,騎腳踏車,她要感受大自然,她要張開全身五感,才能創造獨一無二的夢幻逸品。

父親對她說,對待客戶和產品都不能低俗,更不能背叛顧客的口味。
祖母對她說,現在慢一點也沒關係,只要記得前進就好。一輩子做好一件事,什麼事都可以!

1坪的奇蹟,不是因為創造了傲人營業額,不是因為每天有人大排長龍。
1坪的奇蹟,是她記得祖母的話,決不半途而廢,讓自己有遺憾。
1坪的奇蹟,她提煉無限感謝的心,成就充滿影響力的一生。

其中最令我感到好奇的,就是「一生只做好一個專業」這句話,什麼是指一生只做好一個專業?難道是完完全全把精神和時間都投注在一個領域上面,心無旁鶩的為之付出並放棄其他潛在的興趣嗎?

而當我看完這本書後,先前的疑問也得到了驗証,對作者篤子來說,她想傳達的,就是日本人那種「務實且追求極致的精神」。

這本書有別於平常那些勵志的書籍或是一些創業者成功的故事,它既不強調那些華而不實的數字,也不會只提出一些大家都知道的勵志文句,取而代之的,是她自己的故事,那不斷追求極致之味的過程。

因為這本書有很多有趣的人生故事,我覺得要自己去閱讀才會有所體悟,所以在這,我想要特別點出三個書中影響我很大的看法:

1. 雇用特教生

作者有提到一個故事,就是曾經在某一天,有一位特教老師來到了店門口,詢問她有沒有可能可以提供一些機會給這些特教生,讓她們能夠自力自強靠著自己的能力生活、工作。而在一來一往的聊天之中,作者篤子深深的被這位老師的熱情所感動,所以就提供了一個工作機會給特教生ー安美。

也因為這件事情,作者發現其實特教生雖然有一些天生上的障礙,但是他們的工作表現並不會輸給一般人,他們只是需要更多的照顧,以及最重要的一個關鍵,那就是「讚美」。也因為她的執著,她堅持不向政府領取相關的特教補助(日本政府會為那些提供工作機會給特教生的工作環境有所減免及補助),反而還比照一般人的薪資來支薪給這些特教生。她總是認為,如果她領了那個補助,那她對特教生的看法就會因此有所改變,甚至可能有「我已經為他們做了很多了,最後怎樣就不關我的事情了」之類的想法。

也是因為她這樣子的堅持,讓我思考著,如果有一天我也成為了一家企業的領導人,我會不會這樣做?會不會有那樣的胸襟去提供這些機會給這些在社會上更需要幫助的人們?我不知道,但是這個疑問卻也因此在我的心中埋下了種子,也許有朝一日當我有那個能力為這個社會做出奉獻的時候,它會因此悄悄的萌芽吧。

2. 用心去感受生活

在整本書快要結束的時候,作者篤子提到了她從七十歲開始騎腳踏車上班(約幾十分鐘的腳踏車程),為什麼呢?因為她說當她在用心製作羊羹的時候,需要投注許多精神和體力,而唯有健康的身體及保持對這個大自然的感受,才有辦法做出那真正夢幻級的羊羹,那紅豆綻放出紫色光芒的瞬間。

其實不也是這樣嗎?當我們全心全力為自己深愛的領域付出的時候,是不是也忘了身邊週遭的改變?遺忘了那大自然的美好?所以如果真的可以,當程式的 Bug 解不出來,當工作遇到許多困境的時候,請你大膽的放下它們,走出那狹小的辦公室,打開自己沉悶已久的心胸,用心去感受那大自然的美好。也許就是這樣的一個轉念,一切問題就因此迎刃而解了吧。

3. 一生只做好一個專業

這個我自己有很深沉的體會,所以我想從自己的角度來闡述想法。因為自己很喜歡程式這種具有無限可能性的東西,所以總是會想要「做點什麼」,而也是就是因為這樣子的想法,所以很常就去「做了些什麼」。不過當我以一個局外人來審視整個過程,就會發現我只是「為了做而做」,相對的,也因為自己的能力不成氣候,所以做出了一堆不知所云的東西。

有的時候,我覺得我很容易模糊了焦點,重量不重質,也很容易因為外在的誘惑而迷思。相反的,作者篤子就為了好好把羊羹的事業做好,就毅然的把她最喜歡的興趣「攝影」塵封起來,專心做好一個專業。

不過也許是因為我對這個世界的種種事物還充滿著許多好奇,所以還試著在各式各樣的機會當中開發出自己潛在的興趣吧?我真心的期待那花開的一天。

最後,真心的推薦這本書,希望你也能從中得到許多,那些作者篤子試著以她的人生經歷所傳達給我們的理念。

Written by EragonJ

January 4th, 2012 at 2:33 pm

Posted in Book Review

Tagged with ,

[Plan] Plan for 2012

one comment

Image Credit

這幾天剛好放假,所以想要來設定一個年度目標,這樣子才有動力試著去完成,因此特別列了一個清單:

年度目標

  1. ~7/12 完成「當兵 50 本書」的計畫(*註1)
  2. 7/12 – 平安退伍
  3. 更新 Facebook Blocker 至 2.0
  4. 兼幾份工作操死磨練自己
  5. 獨立生活(台北 or 台南)
  6. 去一趟香港或是德洲
  7. 組織一個屬於自己的夢幻團隊(領域不限)
  8. Do something
  9. Change the world(我活著的最終目的)

*註1:

因為當兵的時候真的沒有時間可以動到腦袋,大多數的時候我們這些小兵都是在做一些勞力密集的工作,也是因為如此,讓我自己有了「當兵 50 本書」的想法,結果這個想法意外的得到許多人的支持,我在軍中甚至還組了一個小小的讀書會,平時休息的時候就會和幾個三五好友一起相約在餐廳看書。

以下是我的書單及閱讀狀況,會不定期更新:

恐懼炸彈:完 + 心得
富爸爸與窮爸爸(*):完
最貧窮的哈佛女孩:完 + 心得
勇往直前:我如何拯救星巴克:完 + 心得
商週的賈伯斯特刊:完
真情書:完
賈伯斯傳:
駭客迷宮:完 + 心得
牧羊少年的奇幻之旅(*):
我的天才夢(*):
桂花巷(*):
鄉民都來了:無組織的組織力量:
一口氣讀懂經濟指標:
教育應該不一樣:完
Peopleware–人月神話(*):
Youtube 你的熱情和直覺:完
1坪的奇蹟:完

雖然大部分的目標都很難以用文字說明我的想法,也有可能是因為它們大多是一個籠統的概念,但是只有記錄下來並執行它,才會因此使自己前進。

希望在 2012 年尾世界沒有爆炸之際,我可以完成大部分的目標,加油!

Written by EragonJ

January 3rd, 2012 at 1:55 am

Posted in Plan

Tagged with , ,