【html】Blogger版型，樣式改版【xml】

開版圖是最近幫芒果做校慶酒會而被打槍的背景之一(炸)。芒果：太可怕了這個!!!。blogger改版，在上一篇figure寫一寫突然就順便把整個版型都改了 yay

。這次的花時間的點在於研究blogger 標籤，這也算是一種腳本吧 aha

有簡易的函式宣告，if判斷式，loop迴圈判定，只是用xml的格式填寫還蠻酷炫。blogger腳本的邏輯大概是以下這樣：

語法範例


<b:section class='header' id='header'>
 <b:widget id='Header1' locked='true' title='TrntH (標頭)' type='Header'>
  <b:includable id='foo'>
   do something blahblah
  </b:includable>
  <b:includable id='main'>
   <h1 class='title'><a expr:href='data:blog.homepageUrl'><data:title/></a></h1>
   <p class='description'><data:description/></p>
   <include name="foo" />
  </b:includable></b:widget>
  <b:loop values='setOfData' var='i'>
   blabla
  </b:loop>
  <b:if cond='data:post.isDateStart'>
   blabla
  <b:else />
   blabla
  </b:if>
 <b:widget>
</b:section>

架構

b:section: widget的父親，作為 blogger後台圖形介面的拖曳區塊，用於放置小工具等可任意移動的元素。; 實際執行之後換變成 div標籤， id是必須 attribute
b:widget: widget 官方翻譯成小工具，小工具們必須是 b:section的兒子，孫子也不行，可以在網頁元素面板中以滑鼠拖曳的方式移動小工具的位置。; widget類似物件，各個獨立的 widget有完整的功能，也擁有自己特殊的變數成員; 實際執行之後換變成 div標籤， id是必須 attribute
b:includable & b:include: 類似 function函式，可以在 widget任意處撰寫 b:includeable，之後在同個 widget內用 b:include呼叫; id 是必須 attribute。若有個includbale ，id為foo，則呼叫方式為：<b:include name="foo" />; 一個 widget內必須要有一個 id為main的 incluable
data: 實際讀取 widget成員的方法：<data:widget成員/>
b:loop: 迴圈運算屬性 values放置容器， var表示迭代的變數，通常是 i; 實際讀取的方法例如這樣：<data:i.title />
b:if & b:else: 判斷式，若屬性 cond的值為 true 則執行 b:else的兄輩；否則執行 b:else 之弟輩; b:else 不一定需要存在; 屬性 cond 內可放置條件判斷元，例如 == ， > ， <

整體文件是用 xml 撰寫，所以必須遵守 xml 規則例如標籤一定要有結尾標籤，或是屬性一定要用 "" 包住之類；裡面的html也必須遵守xhtml規則。這兩天把這個搞懂也花了不少時間，結果來說除了 css 之外，整個 blog 都掌握了連html也 yay

，搞起來還蠻開心的。芒果的酒會底圖...死

版型、 css 設計

那css版型設計目標，是朝著只有 200px 寬的解析度也可以觀看的方向設計，前日用過智慧型手機，毛先生的 ipod 也提醒了我要注意手機上網的用戶，雖然台灣還不是很流行就是，可以去變一台智慧型手機或是平板電腦最好 yay

。也打算實做為了純文字瀏覽器使用者為考量，改變了導覽列的位置在最下層（唉）雖然本來就沒有導覽列，又發現 google 提供的站內搜尋很好用，將他提至頁首，盡量保持頁首 banner 低資訊量，方便純文字瀏覽器或行動裝置使用者觀看。 css 裡也完全沒有圖片連結 yay

我一直很討厭側邊攔這種東西，側邊攔的原意是跟文章有附加解釋，延伸參考等得意義；然而一般 blog 大多在側邊攔放一些貼紙，網誌背景音樂等東西，不過個人網誌本來就是這樣。也就是這次的改版目標朝著實用前進的這個 blog ，至少對我自己實用。主要文章在右邊，左邊則是這個 post 相關的標籤，標題，轉貼，評分等項目，原本打算把留言也放在文章左邊的，但是礙於 blooger 本身的限制無法。至於原本的側邊攔，功能項目例如標籤，網誌存檔這些放在第一列，最不需要的例如貼紙放在整份文件的末端，個人介紹之類的也不需要讓觀者每次進到一個文章就看到一次，所以也擺後面，大概是這種感覺去配置先後順序的。
最後辱罵一下 blogger 標籤腳本的說明文件，我主機身處台灣請不要每次換頁都變成簡體中文 fuu

；另外這說明文件似乎也已經有些年紀了，像是 google 搜尋小工具就沒說明文件，不知道他有什麼屬性可以取用，另外套用 blogger 內建的版型研究時發現，出現了很多說明文件沒有的標籤 fuu

，這說明文件多久沒更新了 fuu

不給力阿這個。

TRNTH

搜尋此網誌