變動 blogger 模版

最近把我 blogger 的模版做了蠻大的變動，變得更單純(調)更難看了 :) 不過我還是比較喜歡這種延伸整個版面的方式，反正醜都醜了，也弄不出什麼好看的版面，就這樣單單純純的也不錯，不過顏色還是挺難看的。

雖然 blogger 是各個 BSP 系統中讓人有最大自由度的一個，不過他提供的模版系統說實在的也難用得可以了，用 XML 來寫程式真是痛苦。blogger 還有幾個讓人抱怨的地方，首先 blogger 對 xhtml 的支援真是讓人不知該說什麼，他的模版輸出的一些連結都無法通過 W3C Validation Service，而且還有一個自做聰明無法去除的 Navigation bar，也一樣過不了驗證，雖然不致於影響顯示，不過對我這個龜毛人來說就是看得不爽。而因為他的模版是 XML，所以寫在模版的連結要把 & 寫成 & ，否則產生出來的 url 驗證會不過。

再來就是他的 Widget 真是難用，這個也是一來是因為 XML 模版的問題，二來很多資料必需在特定的 Widget 中才能取得，而他 Widget 的內容卻不全放在模版中，而是還有另一個存放的地方，當然這些做法可能是因為他要讓一般使用者方便用拖放的方式修改版面，不過還真是難看。

還有一個真的很討厭的功能，就是 blogger 預設會有很多類 Ajax 的功能，例如換頁和他的 Archive 都用了 Ajax 的功能，而且我覺得做得真難用，最糟的就是都去不掉。後來只好在 body 的開頭加上

<script type='text/javascript'>
_WidgetManager._Init=function(){};
_WidgetManager._SetPageActionUrl=function(){};
_WidgetManager._SetDataContext=function(){};
_WidgetManager._SetSystemMarkup=function(){};
_WidgetManager._RegisterWidget=function(){};
</script>

把 Ajax 相關的功能全部蓋掉。但這樣預設的 Archive 就不能用了，所以再用 YUI 的 TreeView 把 Archive 的功能做出來，清爽效果又好，:)

<link href='http://yui.yahooapis.com/2.2.2/build/treeview/assets/tree.css' rel='stylesheet' type='text/css'/>
<script src='http://yui.yahooapis.com/2.2.2/build/yahoo/yahoo-min.js' type='text/javascript'/>
<script src='http://yui.yahooapis.com/2.2.2/build/event/event-min.js' type='text/javascript'/>
<script src='http://yui.yahooapis.com/2.2.2/build/treeview/treeview-min.js' type='text/javascript'/>

<b:widget id='BlogArchive1' locked='false' title='Archive' type='BlogArchive'>
<b:includable id='toggle' var='interval'/>
<b:includable id='interval' var='intervalData'/>
<b:includable id='menu' var='data'/>
<b:includable id='flat' var='data'/>
<b:includable id='posts' var='posts'/>
<b:includable id='main'>
<div class='header'><data:title/></div>
<div class='content' id='blogarchive-content'/>
<script type='text/javascript'>
 var archivetree = new YAHOO.widget.TreeView("blogarchive-content");
 var archiveroot = archivetree.getRoot();
 var yexp = true;
 var mexp = true;
 <b:loop values='data:data' var='i'>
   var y = new YAHOO.widget.TextNode("<data:i.name/> (<data:i.post-count/>)", archiveroot, yexp);
   yexp = false;
   <b:loop values='data:i.data' var='j'>
     var m = new YAHOO.widget.TextNode("<data:j.name/> (<data:j.post-count/>)", y, mexp);
     mexp = false;
     <b:loop values='data:j.posts' var='k'>
       new YAHOO.widget.TextNode({label:"<data:k.title/>", href:"<data:k.url/>" }, m, false);
     </b:loop>
   </b:loop>
 </b:loop>
 archivetree.draw();
</script>
</b:includable>
</b:widget>

另一個變動是，換回 syntaxhighlighter ，雖然它最近出了 1.5 版，不過在 blogger 上還是有問題 (因為這是 blogger 的問題 XD, 解法就看這裡囉)，而且 code 裡也還有 bug ....