Image Credit

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

＊我 Blogger 上的主題是：Carmen

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

這邊的設計我覺得非常有趣，因為 Blogger 允計開發者以小組件（Widget）的方式快速分享、掛載，而 Disqus 掛載的東西就是一段會直接插入範本（Template）的標記（雖然標記又分 Layouts Widget Tags 及 Layouts 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 Tags 及 Layouts 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: 中表示字串的話，要用 " 把它包住（因為已經被 expr: 的「’」 包住一層了，裡面就要跳脫「’」），不然的話會造成 parser 混淆，產生一堆 Error 呀！

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

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

這篇用來整理一下與 F2E 相關的 tool，以供日後參考用（持續更新）：

Javscript | CSS Compressor（壓縮器）

• YUI compressor

• 好用的 YUI compressor ，支援 JS | CSS 的壓縮，使用說明、載點

Obfuscator（混淆器）

• jjencode

• 可自訂混淆用變數且極度複雜，使用說明+載點

• aaencode

• 和上者類似，不過是以表情符號來做混淆，使用說明+載點

Test（測試）

• Qunit

• Javascript 單元測試的 Framework，適用於 jQuery plugin，使用說明、載點

最近學校的Compiler開始教怎麼寫Lex&Yacc了，因為以前就很喜歡Regular Expression，所以以前對於RE的練習幫我對於RE的設計打了很深的基底，因此在寫lexical analyzer的時候就覺得還蠻得心應手的XD。



下面這個是拿來被分析的檔案，



而下面這個是分析該檔案用的Lex檔，



而這個是分析後的結果，



它會把基本的Identifier和Variable…等東西都判斷出來，依自訂的格式把內容印出，當中還包括了”{}”的階層關係，以及行數，不過還沒做到錯誤處理就是了，因為錯誤處理不是目前要處理的XD~


詳細的Lex規則可以參考這邊和這邊，而我的Code有附上一些註解了，應該講的很詳細了XD。


δ 補充一下有人問的Lex Cstyle註解的寫法：「“/*”([^*]|[*]+[^*/])*[*]*”*/” {printf(“got it”);}」

這裡面的Coding Standards講到很多以前看到還蠻重要的東西，

像是下面這個做法可以避免”==”寫成”=”所產生的BUG，算是還蠻好用的。


if('abc' == $var) ...


另外還有一個也還重要的就是

Self-explanatory flag values for function arguments

這幾個點大家可以看一下，其他的就比較偏個人的習慣了。

Source

0000-007F Basic Latin 基本拉丁字母
0080-00FF Latin-1 Supplement 拉丁字母補充-1
0100-017F Latin Extended-A 拉丁字母擴充-A
0180-024F Latin Extended-B 拉丁字母擴充-B
0250-02AF IPA Extensions 國際音標擴充
02B0-02FF Spacing Modifier Letters 進格修飾字元
0300-036F Combining Diacritical Marks 組合音標附加符號
0370-03FF Greek and Coptic 希臘字母
0400-04FF Cyrillic 西里爾字母
0500-052F Cyrillic Supplement 西里爾字母補充
0530-058F Armenian 亞美尼亞文
0590-05FF Hebrew 希伯來文
0600-06FF Arabic 基本阿拉伯文
0700-074F Syriac 敘利亞文
0750-077F Arabic Supplement 阿拉伯文補充
0780-07BF Thaana 塔納文
07C0-07FF N’Ko
0900-097F Devanagari 天城體梵文字母
0980-09FF Bengali 孟加拉文
0A00-0A7F Gurmukhi 古爾穆基文
0A80-0AFF Gujarati 古吉拉特文
0B00-0B7F Oriya 奧里亞文
0B80-0BFF Tamil 泰米爾文
0C00-0C7F Telugu 泰盧固文
0C80-0CFF Kannada 卡納達文
0D00-0D7F Malayalam 馬拉亞拉姆文
0D80-0DFF Sinhala 僧伽羅文
0E00-0E7F Thai 泰文
0E80-0EFF Lao 老撾文；寮國文
0F00-0FFF Tibetan 藏文
1000-109F Myanmar 緬甸文
10A0-10FF Georgian 格魯吉亞文
1100-11FF Hangul Jamo 諺文字母
1200-137F Ethiopic 埃塞俄比亞文
1380-139F Ethiopic Supplement 埃塞俄比亞文補充
13A0-13FF Cherokee 切羅基文
1400-167F Unified Canadian Aboriginal Syllabics 加拿大土著統一音節文字
1680-169F Ogham 歐甘文
16A0-16FF Runic 北歐古文
1700-171F Tagalog 他加祿文
1720-173F Hanunoo 哈努諾文
1740-175F Buhid 布希德文
1760-177F Tagbanwa 塔格巴努亞文
1780-17FF Khmer 高棉文
1800-18AF Mongolian 蒙古文
1900-194F Limbu 林布文
1950-197F Tai Le 傣哪文；德宏傣文
1980-19DF New Tai Lue 新傣仂文
19E0-19FF Khmer Symbols 高棉符號
1A00-1A1F Buginese 布吉文
1B00-1B7F Balinese 巴厘文
1D00-1D7F Phonetic Extensions 音標擴充
1D80-1DBF Phonetic Extensions Supplement 音標擴充補充
1DC0-1DFF Combining Diacritical Marks Supplement 組合音標附加符號
1E00-1EFF Latin Extended Additional 拉丁字母擴充附加
1F00-1FFF Greek Extended 希臘文擴充
2000-206F General Punctuation 一般標點符號
2070-209F Superscripts and Subscripts 下標及上標
20A0-20CF Currency Symbols 貨幣符號
20D0-20FF Combining Diacritical Marks for Symbols 符號用組合附加符號
2100-214F Letterlike Symbols 似字母符號
2150-218F Number Forms 數字形式
2190-21FF Arrows 箭頭符號
2200-22FF Mathematical Operators 數學運算符號
2300-23FF Miscellaneous Technical 混合專門符號
2400-243F Control Pictures 控制圖像
2440-245F Optical Character Recognition 光學字元識別
2460-24FF Enclosed Alphanumerics 括號字母數字
2500-257F Box Drawing 製表符
2580-259F Block Elements 區塊元件
25A0-25FF Geometric Shapes 幾何形狀
2600-26FF Miscellaneous Symbols 混合什錦符號
2700-27BF Dingbats 什錦符號
27C0-27EF Miscellaneous Mathematical Symbols-A 混合數學符號-A
27F0-27FF Supplemental Arrows-A 補充性箭頭符號-A
2800-28FF Braille Patterns 盲文；盲人點字
2900-297F Supplemental Arrows-B 補充性箭頭符號-B
2980-29FF Miscellaneous Mathematical Symbols-B 混合數學符號-B
2A00-2AFF Supplemental Mathematical Operators 補充性數學運算符號
2B00-2BFF Miscellaneous Symbols and Arrows 混合什錦符號和箭頭符號
2C00-2C5F Glagolitic 格拉戈爾字母
2C60-2C7F Latin Extended-C 拉丁字母擴充-C
2C80-2CFF Coptic 科普特文
2D00-2D2F Georgian Supplement 格魯吉亞文補充
2D30-2D7F Tifinagh 提非納格字母
2D80-2DDF Ethiopic Extended 埃塞俄比亞文擴充
2E00-2E7F Supplemental Punctuation 補充性標點符號
2E80-2EFF CJK Radicals Supplement 中日韓部首補充
2F00-2FDF Kangxi Radicals 康熙部首
2FF0-2FFF Ideographic Description Characters 漢字結構描述字符
3000-303F CJK Symbols and Punctuation 中日韓符號和標點
3040-309F Hiragana 平假名
30A0-30FF Katakana 片假名
3100-312F Bopomofo 注音符號
3130-318F Hangul Compatibility Jamo 諺文相容字母
3190-319F Kanbun 漢文標註號
31A0-31BF Bopomofo Extended 注音符號擴充
31C0-31EF CJK Strokes 中日韓筆畫部件
31F0-31FF Katakana Phonetic Extensions 片假名音標擴充
3200-32FF Enclosed CJK Letters and Months 中日韓括號字母及月份
3300-33FF CJK Compatibility 中日韓相容字元
3400-4DBF CJK Unified Ideographs Extension A 中日韓統一表意文字擴充A
4DC0-4DFF Yijing Hexagram Symbols 易經六十四卦象
4E00-9FFF CJK Unified Ideographs 中日韓統一表意文字
A000-A48F Yi Syllables 彝文音節
A490-A4CF Yi Radicals 彝文字母
A700-A71F Modifier Tone Letters 聲調符號
A720-A7FF Latin Extended-D 拉丁字母擴充-D
A800-A82F Syloti Nagri
A840-A87F Phags-pa 八思巴字母
AC00-D7AF Hangul Syllables 諺文音節
D800-DB7F High Surrogates 高半代用區
DB80-DBFF High Private Use Surrogates 高半專用代用區
DC00-DFFF Low Surrogates 低半代用區
E000-F8FF Private Use Area 專用區
F900-FAFF CJK Compatibility Ideographs 中日韓相容表意文字
FB00-FB4F Alphabetic Presentation Forms 字母變體顯現形式
FB50-FDFF Arabic Presentation Forms-A 阿拉伯文變體顯現形式-A
FE00-FE0F Variation Selectors 字型變換選取器
FE10-FE1F Vertical Forms 豎式標點
FE20-FE2F Combining Half Marks 組合半形標示
FE30-FE4F CJK Compatibility Forms 中日韓相容形式
FE50-FE6F Small Form Variants 小寫變體
FE70-FEFF Arabic Presentation Forms-B 阿拉伯文變體顯現形式-B
FF00-FFEF Halfwidth and Fullwidth Forms 半形及全形字符
FFF0-FFFF Specials 特殊區域
10000-1007F Linear B Syllabary 線形文字B音節文字
10080-100FF Linear B Ideograms 線形文字B表意文字
10100-1013F Aegean Numbers 愛琴數字
10140-1018F Ancient Greek Numbers 古希臘數字
10300-1032F Old Italic 古意大利文
10330-1034F Gothic 哥特文
10380-1039F Ugaritic 烏加里特楔形文字
103A0-103DF Old Persian 古波斯文
10400-1044F Deseret 猶他大學音標
10450-1047F Shavian 肅伯納字母
10480-104AF Osmanya
10800-1083F Cypriot Syllabary 塞浦路斯音節文字
10900-1091F Phoenician 腓尼基字母
10A00-10A5F Kharoshthi 佉盧字母
12000-123FF Cuneiform 楔形文字
12400-1247F Cuneiform Numbers and Punctuation 楔形文字數字及標點
1D000-1D0FF Byzantine Musical Symbols 東正教音樂符號
1D100-1D1FF Musical Symbols 音樂符號
1D200-1D24F Ancient Greek Musical Notation 古希臘音樂譜記號
1D300-1D35F Tai Xuan Jing Symbols 太玄經符號
1D360-1D37F Counting Rod Numerals 算籌記數式
1D400-1D7FF Mathematical Alphanumeric Symbols 數學用字母數字符號
20000-2A6DF CJK Unified Ideographs Extension B 中日韓統一表意文字擴充B
2F800-2FA1F CJK Compatibility Ideographs Supplement 中日韓相容表意文字補充
E0000-E007F Tags 語言編碼標籤
E0100-E01EF Variation Selectors Supplement 字型變換選取器補充
FFF80-FFFFF Supplementary Private Use Area-A 補充專用區-A
10FF80-10FFFF Supplementary Private Use Area-B 補充專用區-B

超實用的翻譯，這就知道哪些字是被放在哪區unicode內了

>>Fron : http://203.72.56.12/mt/Wu/2006/10/unicode.html
>>original version: http://www.unicode.org/Public/5.0.0/ucd/Blocks.txt