Blogger Offically Continue reading

我試著修改自訂範本以實作官方的繼續閱讀功能，希望一切順利

版面 Script 更新‧Ⅷ

看了看紀錄，距離上次修改部落格的核心，已經是好幾年前了。一直放話說要重寫不過似乎都沒有動手過，Blogger這幾年強化了不少，值得提的就屬「繼續閱讀」功能了，這功能當初推出的時候官方提供的樣板都還沒全部支援咧，現在應該都已經支援了吧。

可惜這個功能我已經利用官方以前的hack:隱藏部分文章的方式來達成了，萬一我現在追尋官方的架構，那舊的文章要一篇篇改動。我太懶了所以暫時還是維持原狀好了。如果可以維持舊的繼續使用隱藏法；新的使用官方提供的功能的話，那就更好了，我還要研究看看。

總之我先把部落格使用到的JavaScript檔案給更新一下好了：jQuery從1.2.6也升級到了1.4.2，有一些語法變了 (最大的變動就是屬性前面不用再加 @，ex: div[@id='test'] → div[id='test'])。JavaScript設計師最愛用的工具 JSLint 也是越變越嚴格了 (這玩意兒竟可以一直保持更新到現在，真厲害)，之前寫的東西已經有些過不去了，經過幾番修改後才又符合了 JSLint 的規範。印象比較深刻的是正規表達式 (RegExp) 的 "." 不精確的問題，這真是切重要點啊，反正我就是要任意文字所以就用了 .，但通常你可能只需要 \S (除了換行等特殊符號以外的字元) 之類的。

最後將程式碼用 Google 釋出的 Closure Compiler Service 壓縮。以前很多人喜歡用 Dean 的 Packer 來壓縮，雖然壓出來的檔案確實很小，但執行解壓的程式碼所需的時間反而拖長，現在已經沒什麼人在用的樣子。以前也有很多像是 JSMin, YUI Compressor 之類的......總之，經過壓縮之後縮小了37%以上。光這些十幾KB的程式檔一個月就能吃掉30MB的流量，縮小一點除了減少流量以外，瀏覽器端的讀取速度也會快一點，總之是有正向幫助的。

網誌位置改回 scribetw.blogspot.com

感謝 RT 告知。是的，我原本使用的 FreeDNS 網域被原擁有人收回了，這也是沒辦法的事，只不過事情過了總要有對應措施。為了不讓人迷惑，我決定改回原來的 scribetw.blogspot.com 網址，以後如果還會改，那就是改到我的獨立網域上面去了吧 －－ 但那也可能是好幾年後的事情。

最近期中考，Pixmicat! 和一些事情暫且擱著。不過預告一下，我打算 Renew 一下這個版面。因為我覺得載入動作好像有點慢，可以的話我希望下一次能以簡潔和實用為主，速度為主。一些多餘的功能可能會移除 (ex: Trip Counting)，細節還要再看看。

題外，近期買了不少 CD，像 One more time, One more chance、箱庭ノート、JOINT 等等。十一月馬上又有 GREAT ACTIVITY, Pure 等，真是好音樂盡出，小朋友出走啊。能有如此結果，方便的 CLUB JAPAN 的功勞不小XD

最後……Wating for 11/16 - Need for Speed: ProStreet！

版面 Script 更新‧Ⅶ

今次終於加入了雙 Sidebar XD
這東西呢，叫做延伸側邊列，不過你別擔心，搜尋引擎一樣爬的到，所以不必煩惱這樣交互連結就沒用之類的。

另外跟使用者比較沒關係的大概就是我把文章及各 Widget 的快速編輯功能給加上去了，往後我只要登入 Blogger，不必再到後台直接可以修改文章或版面，可說是十分便利。不過這些功能在新版的 Blogger 預設都是有的，只不過我這是自製樣板所以一開始沒有，現在才加上去。

最後拿 Safari 測試版面 JavaScript 並改了一些小錯誤後，應該是沒什麼問題了。基本瀏覽無礙。

版面 Script 更新‧Ⅵ

先來說一句，我終於大體上地把舊有的 Scribe's N.E.W. Studio://MSN Spaces (廢墟) 的有用文章搬移完成，有一些玩笑、雜談一類的我想還是讓它繼續留在那邊慢慢殞落吧，可惜了。

再來是此 Blog 的 Blogger Layout 程式碼再更新，因應 Web 2.0 的時代來臨，沒有一個東西會是穩定版的，本網誌也是。前前後後我總共修改了數十次，不過有紀錄的大概只有六次 (從標題得知的)。從一開始的 Blogger 預設樣版開始改起，到一時興起把 Pixmicat! 討論串樣板拿來用，最後到新的自訂化版本，這些紀錄在在顯示 Google Blogger 的高度自訂性。而隨著 Blogger 新版的完成 (Layout 版面配置)，自訂性又躍升至另一種境界，不蓋你。

最近看到好友希月稍微提到 BSP (Blog Service Provider, 網誌服務提供者) 的事，我當然知道每個人的需求不一樣，所以多多少少會有想要客製化 (Customize) 的念頭。不過呢非常多 BSP 是非常封閉的，舉微軟的 Windows Live Spaces 來說吧，雖然我知道他在我使用期間不斷的改進，也多了不少方便功能，但大體而言整個框架是固定的你不能去修改他。這其實是很多 BSP 的通病，沒辦法的。除了少數較強的可能有自訂 CSS 或有限度的修改部分 HTML 吧。

講這麼多全部都是為了襯托 Blogger 的自訂性。雖然它預設功能是最少的，看起來也不怎麼樣，沒 Traceback 沒 Tags (直至新版才有) 沒 BlogRoll 沒整合相簿 (已有 Picasa 網路相簿) 等就讓很多人連選都不選。不過這些功能全部可以「自己做」，對了，就連所謂的「一覽功能」當然也能自己做，只要你懂他的 GML 語法。

喔，不過現在也許不必懂囉。因為有阿土伯的 Blogger-Ext 簡易擴充方案，只需植入 JavaScript 標記就能動態改變你的頁面增加新功能，你說這神不神奇？當然，進階一點的使用者還是努力學習 GML 以能自己創作出更多功能喔，網路上也有不少熱心人釋出作好的模板一類的。
---
我離題離大了XD OK，今次更動點：

• 標籤連結顏色更動為綠色
• 按月整理的庫存頁面，其顯示模式改成一覽模式

嗯，第一項改改 CSS 就好，這不是難事。第二項才真正是 Blogger 自訂性下的產物，利用 GML 提供的積木我可以堆成這個樣子。

<br /> <b:includable id='archivelist' var='post'><!-- 印出 Archive 頁面列表 --><br /> <b:if cond='data:post.dateHeader'><data:post.dateHeader />:</b:if><br /> <b:if cond='data:post.title'><br /> <div style="padding-left: 2em;"><br /> <a expr:href='data:post.url'><data:post.title /> (<data:post.numComments />)</a><br /> <b:if cond='data:post.labels'><span class="blogger-labels"><b:loop values='data:post.labels' var='label'><a expr:href='data:label.url'><data:label.name /></a><b:if cond='data:label.isLast != "true"'>, </b:if></b:loop></span></b:if><br /> </div><br /> </b:if><br /> </b:includable><br />

這是關鍵性的 includable 組件，只需使用它就可以印出一覽列表的樣子。當然這得讓 main includable 來叫用，像這樣：

<br /> <b:if cond='data:blog.pageType == "archive"'><!-- 庫存列表模式 --><br /> <b:loop values='data:posts' var='post'><b:include name='archivelist' data='post' /></b:loop><br /> </b:if><br />

版面 Script 更新‧Ⅴ

最近才發現 Blogger 有 GData 可以玩，而且還隱藏很多秘密。

像是搜尋功能、瀏覽舊文章、訂閱 RSS / Atom 等等可以看到都有專屬的方式 (例如 /search?q=Text, /feeds/posts/default?alt=rss)，Google Code 上也只有寫說 Blogger 的確有 Data API 可以用，不過那看起來比較像是 XML-RPC，我現在要講的是應用越來越廣的 GData 輸出 JSON / JSON in script。

其實從訂閱文章就可以發現 Blogger 已經有提供一點東西了，例如 /feeds/posts/default 為 Atom 格式，加上 alt=rss 就變成 RSS 格式。如果網址改成 /feeds/comments/default 就變成近期所有回應的 Atom，是不是很方便啊 (還可以偶然發現 max-results 屬性控制輸出數量)。再進一步找找資料，可以發現它提供了 alt=json/json-in-script 方式，這會回傳一個 JSON 物件。後者更進一步提供了 callback 屬性設定可以直接把物件丟給指定方法處理。

如果觀看 GData 的說明，可以發現它很有條理，如此一來我們便可以傳送一些要求給 Google，而傳回來的東西我們再利用工具來分析取出想要的。在 Blogger 上我們就能作更多事情，例如剛才的 /feeds/comments/default 如果改成 /feeds/comments/default?max-results=5&alt=json 這不就是最近5個回應的 JSON 嗎？或者你可以用 /feeds/comments/default?max-results=5&alt=json-in-script&callback=showLatestComments ，利用 showLatestComments() 來接受並處理 JSON。這樣可發揮的空間更大！

其中有一個是我目前拿來用的： /feeds/posts/default/-/(類別名稱)?alt=json-in-script&callback=XXX，這可以用來搜尋同類別標籤的其他文章，說穿了就是其他類似文章的設計。只需要隨機抓取資料並排版印出即可。當然隨機重複和可能抓到自己的問題都要先解決。其他應用可以參考各項提供的參數想出其他更有趣的東西。

以下為程式碼擷取，注意這本來是一個物件，我將其關鍵程式碼取出，故標示方式略有差異，實際上也不能直接套用在您的部落格。純供技術展示，挑戰這樣。如果想要使用的，建議您可以利用估狗尋找其他已代為完成可直接使用的程式碼。

<br /> /* 觸發顯示同標籤其他文章 */<br /> <br /> triggerMoreArticles : function(labels) {<br /> var rLabel = labels[Math.floor(Math.random() * labels.length)]; // Random Choose<br /> var maxResults = 25;<br /> var GDataFeed = document.createElement('SCRIPT');<br /> GDataFeed.src = '/feeds/posts/summary/-/' + rLabel + '?alt=json-in-script&callback=Tthread.showMoreArticles&max-results=' + maxResults;<br /> document.getElementById('MoreArticles').appendChild(GDataFeed);<br /> },<br /> <br /> /* 顯示同標籤其他文章 */<br /> <br /> showMoreArticles : function(JSON) {<br /> var arrayEntry = JSON.feed.entry, arrayChoose = [];<br /> var rID, moreArti = document.getElementById('MoreArticles');<br /> var tmpTxt = '', tmpHref = '', thisHref = location.href.replace( / \.html.* / , '.html');<br /> var displayCount = 5; // 最多顯示個數<br /> var _maxResults = arrayEntry.length; // 實際可顯示筆數<br /> <br /> if (_maxResults == = 0 || _maxResults == = 1) {<br /> return; // 0 : 條件有誤, 1 : 只有自己<br /> }<br /> <br /> for (var i = 0; i < _maxResults; arrayChoose[i] = i++); // 填滿 Array [0 .. _maxResults - 1] (function(a, i) { for (var t, r, p = 0; p < i - 1; r = parseInt(Math.random() * (i - p)) + p, t = a[p], a[p++] = a[r], a[r] = t); })(arrayChoose, _maxResults); // Fisher-Yates Shuffle Algorithm if (_maxResults < displayCount) { displayCount = _maxResults; // 數量不足 } tmpTxt += '<div class="reply" id="rMoreArti"><input type="checkbox" name="MoreArti" value="delete" /> <span class="name">其他相關文章</span> [系統自動產生] <div class="quote"><ul>'; for (var j = 0; j < _maxResults; j++) { rID = arrayChoose[j]; // 直接取就是亂數 if ((tmpHref = arrayEntry[rID].link[0].href) == thisHref) { continue; // 取到本文 } tmpTxt += '<li>' + arrayEntry[rID].title.$t.link(tmpHref) + '</li>'; if (--displayCount <= 0) { break; // 已取滿 } } tmpTxt += '</ul></div></div>'; moreArti.innerHTML += tmpTxt; } // 呼叫法 Tthread.triggerMoreArticles(["Blogger", "JavaScript"]); 05/03: 改了一下隨機取出文章的方法，先生成順序的 Array 再利用 Fisher-Yates Shuffle 演算法打散， 接著依序取就不會取到重複的，就不需要再判斷有的沒的，這方法不錯，較有效率。 05/04: 突然想幫 Blogger 圖檔連結使用 ThickBox 來顯示，應該較美觀。不過試了幾遍發現 Blogger 十分機車。擋直連不說 (它的唯一可用參照頁是它產生的那個頁面...連網誌本身都不行)，連用 iframe 引用都會強迫覆蓋視窗。 雖然有利用 PHP 偽造 Referer 的方式要求，不過那樣會增加使用 PHP 伺服器的負擔及流量，想想只好用原始方式，頁面載入後逐一檢查連結是否連圖，是的話更改開啟目標為新視窗。 用估狗找了一下也沒人有具體解決方法，看來目前真的是無解啦。但假使成功了，thickbox.css 會改動預設的 padding 和 margin，也是會讓我十分不爽啊。維持現況吧。

裝好的 Fedora Core 被我搞爛了

我之前有利用 MS Virtual PC 2004 (已升級為 2007) 安裝 Fedora Core 5，也在其上架了伺服器以當測試環境，順便練習自己操作 Unix 系統的功力。不過最近發現 Kernel 升級到 2.6.18 以後的版本，一開機就卡在硬碟掛載 (看起來是)，不過用 2.6.15 開機就沒什麼問題。同樣地，我想另外安裝新的 Fedora Core 6 虛擬系統，進入安裝介面按下 Enter 或鍵入 linux text 開始解壓 Kernel 執行後，便卡在檢查的地方 (我記得是檢查 AT 鍵盤和掛載某個檔案系統)。查一下 Kernel 是 2.6.18。而拿舊的 FC5 DVD (2.6.14 吧) 就不會卡，實在有夠奇怪。本來以為是 VPC 2007 本身的模擬問題，誰知道拿了 InnoTek VirtualBox 模擬，卻也是相同的結果？ (不過 VirtualBox 效率很高，有空再介紹) 找遍 Google 似乎沒有類似的資料，只好自認倒楣收場，繼續玩 FC5 搭配舊核心。

至於搞爛又是怎麼一回事呢？由於虛擬硬碟竟然吃了 6GB 有餘，一般來說 Windows 要吃這麼多也是其他程式的影響，同理我覺得這應該是用不到的套件造成的，於是開了 yumex 把不用的套件解除安裝，誰之到重新開機後漂亮的 GDM 登入不見了，取而代之的是醜到不行的 XDM，而且輸入帳號密碼還不能進入桌面環境？(GNOME 確定裝了) 真是匪夷所思，好在 Ctrl + Alt + F1 和 SSH 遠端登入還可以用，而 http://192.168.1.5 的 lighttpd 也正常，算是不幸中的大幸。不過少了桌面感覺好像少了什麼，操作也不很方便。



另外遇過一個較為奇怪的問題是開啟 Virtual PC 2007 / VirtualBox 模擬時，有時候虛擬電腦的速度會像開了加速器一樣提升十倍有的速度，連開機都變快了 XD 問題是這樣一來輸入密碼登入只要按一下鍵盤就會跑出連續的字母 (ex: ZZZZZZZZZZZZZZZZZZ) ，叫我如何登入？用 SSH 也沒用，因為連線逾時時間也變短了，如果密碼沒在 0.5 秒內輸入完成，恭喜你連結又中斷了 囧
---
題外，版面改用 pHistory (搭配其他 Blog 元件改稱 Thistory) 作 AJAX 的頁面歷史模擬，但是要以 #res;12345678790 就能做出動作還是有點難度 (抓取回應網址沒給，只給編號沒用)，所以還是著重在按下回應後，其上一頁有用這樣就夠了。另外發現先前的配置對 xxx.html 連過來看的會有問題，也一併修正。

版面 Script 更新‧Ⅳ

我得承認本網誌幾乎跟 ACG 沒有關係了 XD
雖然我很想寫點什麼，不過你知道的，嗯，寫點技術文章似乎比較爽，
而且遊戲我也玩不多、動畫、漫畫、小說也看不多，音樂是有在聽不過也很少量。
所以呢...哈哈 (裝傻)

不多說，最近發現 Google Pages 載入速度慢的跟什麼一樣，本來想說連日本比較遠，
把原本放 Cool 的一些東西丟到 Google Pages 上以加快速度 (美國 + 即時 Gzip 壓縮傳輸)
結果沒想到光 Ping 就慢很多，尤其現在版面可說是中量使用 JavaScript (哪天會變成大量呢？)
光基本載入的函式庫就有主函式庫、Trip生成函式庫 (DES編碼)和 XMLHttpRequest 函式庫。
最近又加上 dp.SyntaxHighlighter，這樣就算了。它還需要其他 Brush檔案 (ex: shBrushPhp.js)
萬一需要標亮的程式語言繁多，就不得不每個都載入。
假如版面剛好只用一兩個時，那又怎麼辦？每次都全部載入豈不耗時又耗頻寬？

於是首要之務先輕量化 Trip生成函式庫，原始檔案從日本網站弄下來的，
把它改成能通過 JSLint 檢測，再以 JSMin 壓縮，果然小多了。

再者修改 dp.SyntaxHighlighter，我打算讓它以動態需求載入的方式來運作。
首先會先查看各個 <textarea> 是否為目標，然後再取出其 class 值來判斷需要載入類型。
節錄自 mainscript.js：
<br />for(var i = 0, tl = tareas.length; i < tl; i++){ // 逐一搜尋欄位<br /> if(tareas[i].getAttribute('name')=='code'){<br /> for(var a in alias){ // 逐一搜尋程式類別<br /> if((','+alias[a].join(',')).indexOf(','+tareas[i].className) != -1){ // 找到<br /> dpSensor.LibLoaded.push(a); // 推入載入名單<br /> delete alias[a]; // 刪除別名資料庫<br /> break;<br /> }<br /> }<br /> }<br />}<br />

以 e.getAttribute('name') 或是 e.name 來判斷是否為需要自動標亮的欄位，
而以 e.className 來取得 class 設定 (如 php, c++, js)。
這邊有一個怪處，單純用 e.getAttribute('class') 看來似乎可以達成，事實上 IE 會失敗。
IE有自己的一套 e.getAttribute('className')。這個地方讓我除錯除了好幾小時找不出原因。
這邊使用 W3C DOM 節點都有的 className 屬性直接取來判斷，是各個瀏覽器都支援的手段。
取出屬性後我拿去和建立好的別名資料庫陣列作比對，例如 alias['Cpp'] = ['cpp', 'c', 'c++']，
如果我取出 c++ 一值，那我就知道得去載入 Cpp 這個刷子 (shBrushCpp.js)，而後續就不必再載入，
所以刪除這個別名資料庫 (用 delete 關鍵字)

後續的動態載入需要利用 DOM 的 document.createElement 方法，
動態建立 script 標籤並載入我們需要的函式，程式碼一樣節錄如下：
<br />if((libcount = dpSensor.LibLoaded.length) === 0) return; // 未使用直接跳出<br />else{ dpSensor.LibLoaded.unshift('Core'); } // dp.SyntaxHighlighter Core (shCore.js)<br />for(var j = 0; j < libcount + 1; j++){ // 動態載入<br /> var sc = document.createElement('SCRIPT');<br /> sc.type = 'text/javascript';<br /> sc.src = 'http://osaka.cool.ne.jp/scribe2u/dp/sh'+(j > 0 ? 'Brush' : '')+dpSensor.LibLoaded[j]+'.js';<br /> document.getElementsByTagName('HEAD')[0].appendChild(sc);<br />}<br />dpSensor.Interval = setInterval(executeSyntaxHighlighter, 200); // 設定 Interval<br />

產生了一個 sc 物件後，設定好相關參數，就把它附加到 <HEAD> 標籤之下，
這個是 DOM 的節點觀念，可以多利用 Mozilla Firefox 的 DOM 觀察器 來看看。
最後一個 Interval 又是怎麼一回事？因為我不知道這些標籤產生之後，是否已經讀取完畢，
只好設定一個計時器定期查看載入狀況，等全部都準備好再執行標亮步驟。

<br />/* 當外部函式庫確定全部載入完成，執行標亮 */<br />function executeSyntaxHighlighter(){<br /> for(var i = 1, ll = dpSensor.LibLoaded.length; i < ll; i++){<br /> try{ // 防止 Core 尚未載入前未定義錯誤<br /> if(typeof dp.sh.Brushes[dpSensor.LibLoaded[i]]=='function'){ delete dpSensor.LibLoaded[i]; }<br /> }catch(e){}<br /> }<br /> if(dpSensor.LibLoaded.join('')=='Core'){ // 只剩 Core<br /> clearInterval(dpSensor.Interval);<br /> dp.SyntaxHighlighter.HighlightAll(dpSensor.Name); // dp.SyntaxHighlighter<br /> }<br />}<br />

我使用判斷 dp.sh.Brushes[XXX] 是否為函數的方法來確認，如果 dp.sh.Brushes['Php'] 為函數，
我就知道它必定載入完畢可供我使用了，而當確認載入完畢便將其自載入列表中移除。
這個列表是剛才用來以迴圈逐個載入的，這邊只是再做一次利用，以刪減方式標記哪些已載完。
沒意外的話最後只會剩 Core 一項，這一個是特別的存在 (核心)。
故把陣列串起來之後如果為 'Core' 便表示其他函式庫皆已載入完畢，刪除計時器，執行標亮吧！

至於判斷途中使用 try 的原因是因為你不能保證 shCore.js 會優先載入完畢，
如果他沒有載入完畢，後面的刷子是無法掛載的，便會產生 dp 變數未定義錯誤警告。
於是使用 try 無視錯誤，反正一定會有載入好的一天 (檔案確實在的話)。
當真正載入完成了，其他刷子檔便可以正確掛載，也就能從載入列表中刪除了。
假設所有刷子檔皆已載入完成，唯獨 shCore.js 因為某些因素尚未載入完成 (前提是確實存在)
因為有 try 加持，即使 dp.sh.Brushes[XXX] 確實存在，但因為 dp 未定義錯誤，便不會去執行刪除而略過。

至此完成動態載入的工程。

版面 Script 更新‧Ⅲ

本網誌淨是寫些跟 ACG 八竿子打不著的玩意...
為什麼最近會頻繁的更新呢？因為我閒嘛，放了假沒事幹找事作，把 GML K夠了就手癢做看看，
經過數百次的修改於是成型。

這次又多了什麼新玩意？
可以看到閱讀空間縮小了，其實我當初使用 Pixmicat! 模版時，很大的因素是因為文字區很大，
可以讓我自由擺放文章內容 (因為我有手動換行的習慣)
現在為了要塞進這個 Sidebar，使得閱讀空間少了 175px，看起來小多了 (@ 1024x768)
其實我也覺得上面的東西不太實用，不如拿掉 XD
折衷的做法是作一個 [切換 Sidebar] 功能按鈕，按下去可以切換 Sidebar 出現與否，
兼具 Sidebar 功能和文字瀏覽版面寬度。

另外實用的來了ｷﾀ━━━━━━(ﾟ∀ﾟ)━━━━━━ !!!!!
終於讓本來假假的換頁列能夠正式作動啦！多虧新的 GML 提供許多參數和判斷式，
使得換頁列又復活了，為了忠實呈現，保留按鈕形式。

我想近期應該會這樣改下去吧。

比程式語言還難的 Blogger Layout GML

竟然有這麼高深的樣版語言，我想只要會了這個，其他樣版語言就跟小蝦米一樣了吧XD
這個樣版語言就是脫離 Beta 的 Blogger 採用的新版面配置語言。
而 GML (Google Markup Language !?) 是 Google 自己寫在定義上面的字眼，所以這裡這麼稱呼它。
(xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr')
同理，舊有的傳統範本這裡稱之為 Template。

跟傳統 Template 不同的 GML，首先第一印象是極度的模組化，可自訂性大增，
甚至排版只要拖拉放就可以了，對於新進的使用者來說吸引力大增。
降低了修改門檻，但是真的是這樣嗎？
如果你鼓起勇氣，到範本→修改HTML，並勾選「展開小裝置範本」，看你還敢不敢這樣說XD

OK，我們知道這個 GML 實在是非～常複雜，不過不可懷疑的是它加強了不少東西，
比方說引入了判斷式和 Loop 迴圈語法，這使得資料可以自由處理，每一筆資料有可能是陣列，
而你只取有需要的來輸出即可，這在之前的 Template 是做不到的。
(但是我覺得 Template 也可以引入這些標籤，只不過這樣 GML 做出來幹嘛？)

首先我們需要了解 GML 的模組特性，以下說明：

1. 所有標記的屬性請用單引號 ' 包住，如果不屬於 GML 的標記 (例如 span) 當然可以用雙引號
2. 各種標記的屬性如果要插入資料，請用 expr: 敘述，底下會說明 (這邊很容易錯！)
3. 適當的空白 (或者說必須的空白) 要加上 (一樣很容易錯)

‧b:skin 字型和顏色 CSS (說明)

這是首先會碰到的第一個區塊設定。
主要就是設定 CSS 樣式表而已，只不過不是用 <style> 包裹而是用 <b:skin>。
當然後續解讀之後一樣會是 <style>。

與傳統樣式表不同的地方是 b:skin 支援變數設定，可以在前面先定義幾個變數 (如顏色、字型)
再在 CSS 內套入此變數，而且 Blogger 有後台可以方便的修改這些設定，很不錯。
我覺得它不支援數字屬性有點可惜，這樣還得手動更改。

先看範例：

<b:skin><![CDATA[
/* 色彩定義
<Variable name="bgColor" description="背景顏色" type="color" default="#cccccc">
<Variable name="txtColor" description="文字顏色" type="color" default="#000000">
*/

body { background: $bgColor; color: $txtColor; }
]]></b:skin>

其中<![CDATA[ ]]> 括號可加可不加，但我的建議是加，因為 CSS 符號很多，有可能違反了 XML 而不自覺。
另外變數設定標籤需要包在註解 /* */ 內，因為到時候解析時它是會印出來的。
如果不讓它在註解裡則會使 CSS 解析失敗。

<Variable>有幾個屬性 (全部必要)：

• name: 變數名稱 (爾後 CSS 可以以 $變數名稱 來取得值)
• description: 此變數的說明。會出現在後台「字型與顏色」設定方便辨別
• type: 變數類別。目前只有 color 和 font (顏色 / 字型)
• default: 預設值。修改不滿意隨時可以回覆成範本預設值。

切記 Variable 的屬性性質要用雙引號！ (好像在打架，一下雙一下單的) 使用單引號馬上報錯給你看。

另外<Variable ...>不需要加 / 使成為 <Variable ... />，
因為 Blogger 會把設定屬性加在 / 後面變成 <Variable ... / value="..."> 會很奇怪。

而剛才稍微提過，設定好的變數要套在 CSS 只需要類似 PHP 的變數般填入即可。
範例很清楚，請自行參看。

‧b:section 網頁元素 (說明)

這個網頁元素是一個區塊，用以放上其他小裝置 (Widget) 的劃分位置。
利用這個選擇區你可以先定好左右兩欄式設計或三欄式設計，藉以先訂出版面基本的配置。

範例：

<b:section id='contents' class='color-red' showaddelement='yes'>
</b:section>

被解析之後會成為一個 <div> 區塊，其中 id 屬性是必須且唯一的，class 屬性隨意。

• id: (必要) 獨一無二的名稱，限使用字母和數字和一些符號
• class: 指定套用 CSS 樣式。如果使用特定關鍵字 (navbar, header, main, sidebar和footer) 可以讓 GML 辨別其適當處理方式
• maxwidgets: 此網頁元素區塊所能放置的小裝置 (Widget) 個數
• showaddelement: 是否可以在其上再新增一個新的網頁元素，預設 yes (yes, no)
• growth: (選用) 可以是 horizontal 或 vertical，vertical 為預設值。此屬性可判別此區段中的小裝置是並排還是堆疊。

‧b:widget 小裝置 (說明1, 2)

這個小裝置就是模組化的核心，簡單來說就類似桌面美化的各種組件，
可以在網頁元素區塊加入各種小裝置以達成其功能。
記住 b:widget 內不能使用 <!-- --> 註解標記，會回報 #comment 錯誤。

範例：

<b:widget type='Header' id='Header1' locked='true' title='Blog Title (Header)'>
</b:widget>

被解析之後一樣會成為一個 <div> 區塊。其中 id 屬性是必須且唯一的，type 屬性說明此小裝置的用途。

• id: (必要) 獨一無二的名稱，限使用字母和數字和一些符號
• type: (必要) 說明此小裝置的用途，至於是哪些請參考說明1
• locked: 是否鎖定無法搬移或刪除，預設 no (yes, no)
• title: 說明此小裝置的文字，例如 網誌本體 一類的
• pageType: 設定此小裝置在何種頁面下顯示 (all、archive、main 或item)

‧b:includable 可納入項目 (說明)

正常來說你的小裝置只有設定其基本屬性，至於他如何運作你還沒有寫，
這時候就要使用多個小型的可納入項目 (或換個說法：副程式) 來分析資料排版等等。

一個小裝置至少得有一個 <b:includable id='main'></b:includable>。
叫用其他可納入項目的做法是使用 <b:include name='Subincludable' data='i' />。
可納入項目內可以使用 <!-- --> 註解標記，也建議使用以分辨各項目用途。

範例：

<b:includable id='main'>
</b:includable>

被解析並不會產生什麼，而是依照此可納入項目內的設計印出東西。

• id: (必要) 獨一無二值，標明可納入項目的名稱，可讓 <b:include> 呼叫用
• var: 傳入變數，想成副程式接收的變數即可

上面僅寫出 main 的做法，如果是比較複雜的例子是這樣的：

<b:includable id='main'>
<!-- 印出所有討論串 -->
<b:loop values='data:posts' var='post'>
<b:include name='thread' data='post' />
</b:loop>
</b:includable>

<b:includable id='thread' var='post'>
<!-- 印出單一討論串 -->
...(略)
<b:include name='comment' data='post' />
</b:includable>

<b:includable id='comment' var='post'>
<!-- 印出討論串所有回應 -->
<b:loop values='data:post.comments' var='comment'>
<div>
<data:comment.body />
</div>
</b:loop>
</b:includable>

範例中有三個可納入項目，有 main (b:widget 自動引入), thread, comment。
當 main 需要用到 thread 時，使用 <b:include name='thread' data='post' /> 呼叫。
其他同理。

‧b:include 納入項目

上面介紹過，這是類似呼叫可納入項目的 Call Function。

範例：

<b:include name='PrintName' data='i' />

• name: (必要) 呼叫之可納入項目的名稱
• data: 傳入變數，想成讓副程式接收的變數即可

上面複雜範例就操作了 posts (本文陣列) 這個變數，利用 b:loop 循序拆解出 post (類似程式語言的 For each)
然後把這個 post 傳給了 thread 去處理。
而 thread 又呼叫 comment，並 b:loop 拆解 post.comments (本文回應陣列) 出 comment。
最後以 comment.body 取出值來。這不就是一個另類的程式語言了嗎？

‧data: 資料 (說明)

這個標記應該淺顯易懂，顧名思義取出特定資料以供排版之用。
注意到資料有其小裝置適用範圍，例如說現在位於 Header 類型的小裝置，就不能使用 Blog 類型的資料。
算是有點嚴苛。

範例：

<data:blog.title />
<div expr:id='"TMP_" + data:post.id'></div>

如果你想知道所有 data: 的詳細列表，說明內有一份，條列分明。

‧b:if 判斷式 / b:loop 迴圈 (說明)

因為屬於決策類的就放在一起說明了。

- b:if

<b:if cond='data:blog.pageType == "item"'>
條件成立
<b:else />
條件不成立
</b:if>

b:if 只有一個屬性 cond，即是 b:if 的判斷式，注意到請用單引號括起來，上面的模組特性有提過。
至於遇到一般文字請用雙引號括住，假如一般文字包含 " 雙引號則請用脫逸字元 \"。
例如 "<div id=\"007\">" 這樣，此特性同樣適用於 expr: ，容後介紹。
操作子的話則類似 Java / C (==, !=, >, < 一類)。

<b:else /> 當然可以省略。

至於模組特性第三項所描述的「適當的空白」，則是每個操作子之間都用空白隔開。
例如上面的 data:blog.pageType == "item" ， == 跟左右都有留空白。
注意這是強制性的空白，在 cond 可能感覺不出來，在 expr: 之中如果在屬性旁邊沒這樣做，
很容易一片空白在那邊而你不知道發生什麼事情。
底下先給個錯誤的範例：

<div expr:id='"Comment_"+data:post.id+"_TEST"'>

乍看之下好像正確嘛，用 + 號把一般文字 "" 跟 data 結合在一起成為新的文字啊？
錯，因為 + 號旁邊沒有適當(必須)的空白，這樣絕對是一片空白。
正確的形式為：

<div expr:id='"Comment_" + data:post.id + "_TEST"'>

- b:loop

<b:loop values='data:post.comments' var='comment'>
ID: <data:comment.id />
</b:loop>

基本上這邊的 loop 不能指定次數，倒覺得有像 for each。
有兩個屬性：

• values: (必要) 某個變數陣列
• var: (必要) 某個變數陣列的其中之一內容

上述的範例中，data:post.comments 是某文章的所有回應陣列。利用 b:loop 逐個拆解出來並用 comment 暫存。
這樣下面便可以用 comment.id 取出各回應的 ID。建議這邊弄不懂去翻翻程式語言有關於 for each 的語法。

‧expr: 表達式 / 敘述 (暫無說明)

這是一個很特別的東西，該說是 GML 的精華吧。
所有網頁元件的屬性如果需要動態改變 / 插入資料 (如<a href="本文章永久連結">)，
不是<a href="<data:post.url />"> (違反 XML)，而是在 href 前面加上 expr: 使成 expr:href。
這樣便成為了一個表達式。可以將資料插入屬性或做改變。
跟 b:if 的 cond 一樣，該注意的單引號包圍、雙引號包一般文字、" -> \" 皆須留意。
最最最重要的則是方才提過的「必要的空白」。

以下為正確範例：

<a expr:href='data:post.url'>XXX</a>
<div expr:id='"Comment_" + data:post.id'></div>
<a href="#" expr:onclick='"javascript:OpenNewWindow(\"" + data:blog.url + "\", null, \"" + data:blog.title + "\");"'>XXX</a>

最後一個範例無比複雜，最易出錯，需多加留意。
尤其是單雙引號加上脫逸字元糾結在一起，很難發現自己出了錯。

---

最後談點結構，基本上 b:section, b:widget, b:includable 是成巢狀排列：

<b:section id='header2' maxwidgets='4' showaddelement='yes'>
<b:widget type='Header' id='Header1' locked='true' title='Blog Title (Header)'>
<b:includable id='main'>
<h1><data:title /></h1>
<hr class="top" />
</b:includable>
</b:widget>
</b:section>

但是一個 Widget 如果沒有設為 locked='true'，是可以自由搬移至任意的 <b:section>
所以說 b:section 的版面配置相當重要，需要搭配 CSS 來排版。以 id 和 class 屬性套用特定 CSS，
作出三欄式 / 兩欄式變化，當然 Header / Footer 也可以如此設計。

而在 <b:section> 之外的東西全部都是固定的，例如說一些表單什麼的就可以放這。
可以放點諸如版權宣告的文字在此，在後台的網頁元素可以看到迷你型的版面配置。

版面 Script 更新‧Ⅱ

慶祝新年及學期結束，還有學期總成績公佈之下，改了預設樣版 CSS，不知感覺如何？
至於原有的「Pixmicat! Default Theme」仍舊存在，可以在瀏覽器功能表切換。

Firefox：檢視→頁面樣式
Opera：檢視→樣式

我們的 IE6 似乎找不到可以切換的地方...IE7 沒有試驗就不得而知了。

至於新的樣式表為什麼要叫 XXX...我只能說一開始不知道要取什麼就打了叉叉叉(表示暫定)
後來也想不出什麼名堂乾脆就叫 XXX 吧。

最後是 Blogger 脫離 beta 的新功能，可以自訂網址，
目前我利用 FreeDNS 服務申請了一組副網域，並以 CNAME 指向 ghs.google.com，
並在後台發布設定更改發布位置。看起來不錯呢w
至於會不會長期用下去不得而知，但肯定的是 http://scribetw.blogspot.com 仍舊存在且通用。
所以有連結至此的就不必改了吧，免得到時候我不玩了還要再改一遍。

無聊之下竟發現不少強者 Blogger 把 Blogspot 平台弄得淋漓盡致，
當然也得依樣畫葫蘆，學他個一招半式 XD
加個花俏的 Rounded Corner 看看，雖然因為配色上所以很不明顯。
注意看最頂和最底土黃色部分，日後有需要再改明顯一點好了。

版面 Script 更新

最近有空，又把這個樣版翻修了一下。
首先是這個應該實裝的繼續閱讀功能，我終於加上去了(之前是有加過但不知怎的拔掉了)
也為他加上動態展開的功能，畢竟本頁採用相當多 JavaScript 的技術，多一項也無妨。

其次是本應修正的，IE瀏覽回應框格時有機會會併成一列的問題，
這個問題早在 Pixmicat! 就有了，因為 IE 沒有 display: table; 屬性，以致於不能支援。
後來發現有 hack 技巧便取巧使用，頁面載入後呼叫事先寫好的 IEdivfix() 來修正。
但是此頁已經是使用 AJAX 動態抓取內容來擺放，所以頁面上的元素會一直存在，
如果每次都用這招，會造成重複修正的現象，造成版面混亂。

解決方案是利用 DOM 的 document.getElementById() 和子 node .getElementsByTagName() 完成。
讀完回應放到特定的 DIV 後，將此 DIV 擁有的子 DIV 作掃描，並對其修正。
這樣就鎖定了修正範圍，不會對頁面其他元件造成破壞。

再者，加上了動態引用標亮的設計，但只限回應。
載入回應內容完成後丟入指定 DIV 容器內，再掃描子 DIV 的特定內容，對其作更改。
使用 RegExp replace 完成此事。
附帶一提使用 XMLHttpRequest (更正為 .innerHTML) 取得的 HTML 內容似乎會經過解析，
原本的 > 變成 &gt;、 <br /> 變成 <br> (Firefox), <BR> (IE, Opera)。
似乎幫我私底下動了手腳，讓我在除錯這方面還煩惱了一些時間。

最後，修改 CSS 使 <blockquote> 顯著不少，這樣閱讀也方便。

Blogger out of beta!

今天上來打網誌發現的，昨天還沒有可見是今天才變的，
看來不久就會整個升級了吧。不過新的樣版語言我還是看不懂，表面看起來是拖拉放，
實際上隱含著更大的功能，可以自行設計模組。

Out of beta...不過目前似乎還是以 www2 主機的方式並行。
反正新的 Blogger 我已經用一段時間了，感覺不錯也很穩。

就這樣吧，恭賀 Blogger ！