【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 不給力阿這個。

留言