圖解：Blogger 新樣板系統的 html 頁面結構 Blogger new template html structure illustration

-- 2010-12-31 更新：增加第 4 頁描述 includable 的細節 --
-- 2011-01-11 更新：增加第 9 , 10 , 11 頁描述程式碼擺放位置的規則 --

-- 2011-01-23 更新：修改第 11 頁的錯誤，系統標籤可以放在 section 之外 --

Blogger 系統的新式樣板，已經推出一陣子了。由於，Blogger 的舊樣板有許多內建功能無法使用，像是在文章的尾巴加入意見調查工具、分享按鈕，或是我現在最頭大的「繼續閱讀」功能。原本，只要寫文章時插入 jump break 就可以了，但是我的網誌，插入 jump break 後沒有「繼續閱讀」的連結可以按... 總之，不知道是因為她原本就不支援，還是被我自訂亂改才不能用，我想，這是一個徵兆，暗示我該朝著新的 template 前進了 XD

新的 template 雖然有許多漂亮的現成樣板，不過，還是不太符合我的需求。

1.我希望 header 的圖片，可以在首頁時用大圖，內頁時用小圖，這不過份吧？在一般的網站很常見吧？

2.還有，希望在瀏覽網誌文章的時候，只顯示右側的 sidebar，然後在右 sidebar 裡面放一些標籤雲、最新文章、最新回應等，跟「內容」有關的東西。讀者想看內容的時候，就讓她專心的看內容，這很合理吧？

3.然後希望在瀏覽 page 的時候，只顯示左側 sidebar，裡面是一些 page 清單、關於我、以及跟我有關的外部連結等，跟「作者我」有關的東西，右側的 sidebar 則隱藏或變成小圖示。讀者想了解我的時候，就讓她專心了解我，這也很合理吧？

4.還有在首頁的時候，左右的 sidebar 都同時顯示，中間的文章內容則變成摘要，且字變小。因為首頁是一整個網站的 snapshot，讓人家快速瞄一眼就可以看光光，這個要求不過份吧？

於是，就在這些合理的自我要求下，只好開始努力的研究 Blogger 的 template。

Blogger 可謂我的 CSS 啟蒙導師，剛開始，在那落落長的樣板 html 中，只能挑少許看得懂的部份去更動，後來，當然是越來越得心應手，不過也僅限於 html 跟 CSS ，至於那些<b:section>裡面的東西，看起來還是很恐怖。

不過，喔呵呵，現在的我，已經不是以前的我了！自從今年初開始碰程式設計以後，面對任何的外星文字都感到信心倍增！而且不知道什麼時候（我想就是更新樣板系統以後），Google Blogger 的官方說明文件變得這麼完整了，幾乎要什麼設定都有詳細的說明。於是，就一邊看著文件，一邊用自己慣用的圖解方式做起筆記。

以下的圖解，都是用 OpenOffice.org (或許現在應該改用 LibreOffice 啦) Draw 製作的，圖片裡，把許多官方說明文件的內容翻譯上去，想知道更多的話可以查閱圖片下方的 reference 網址。為了方便搜尋，在文章的最下面，把圖片中的文字剪貼上來。

嗯，雖然看起來不怎麼樣，前前後後花了十六個小時才做完的唷 XD

圖片1

Blogger 的 HTML 構造 Head / Body / Macro

• head
• 網頁資訊 meta
• 網頁標題 title
• 版型 skin & template-skin
• 變數設定 variables
• 樣式表 CSS

• body
• F - body-fauxcolumns
• OCBI - body-fauxcolumn
• OCBI - content
• OCBI - header
• SWI - header
• OCBI - tabs
• SWI -  crosscol
• OCBI - main
• F - fauxcolumns
• OCBI - fauxcolumn-center
• OCBI - fauxcolumn-left
• OCBI - fauxcolumn-right
• OI - column-center
• SWI - main
• OI - column-left
• M > SWI - macro
• OI - column-right
• M > SWI - macro
• OCBI - footer
• M > SWI - macro

• macro for includable

• M - macro
• SWI - sidebar-left
• SWI - sidebar-right
• SWI - footer

圖片2, 3, 4

Blogger 的 SWI 構造 Section / Widget / Includable

• section
Blogger 的頁面元素區段 (section) :在系統後台的「頁面元素」這一頁,用淺灰色的 * 虛線 * 框起來的東西,每一個框框,就是一個 section 。每個 section 身上都會設定一些屬性:
1. 一個獨一無二的識別身份(id, identifier)這是一定要有的。實際瀏覽時它會變成<div>的id
   
2. 類別(class)，不做設定也可以。class在妳更換樣板時，可以幫助Blogger系統用最恰當的方式把內容轉換過去，常見的class有'navbar' 'header' 'main' 'sidebar' 'footer'等，也可以自己命名
3. 在「頁面元素」裡面顯示「新增小工具」的連結(showaddelement)，預設值是'yes'，不做設定也可以
4. 最多可以放幾個小工具(maxwidgets)，不做設定的話，小工具數目就不會有上限的限制。它有趣的地方在於，要是section內的widget數量到達上限，這個section的虛線框框，就會被隱藏起來，只會顯示widget的實線框框。這個設計是為了節省螢幕畫面的空間
5. 內容物增加時，要往哪個方向變大(growth)，預設值是'vertical'，不做設定也可以
• widget
Blogger的小工具(widget)：在系統後台的「頁面元素」這一頁，用淺灰色的*實線*框起來的東西，每一個框框，就是一個widget。每個widget身上都會設定一些屬性：
1. 一個獨一無二的widget識別身份(id, identifier)這是一定要有的，實際瀏覽時它會變成<div>的id。小工具的id一旦建立了就不能修改，除非把widget砍掉，再重新加入一次
   
2. 小工具的稱謂(title)，如果不做設定，就會採用預設的稱謂，像是'List1'之類的
3. 小工具的類型(type)，type一定要是Blogger內建的13種types的其中一種。這個屬性是一定要有的
4. 鎖定位置(locked)，如果設定了'yes'，那麼再「頁面元素」中，就不能用拖曳的方式把這個widget更換位置。Locked的預設值是'no'，不做設定也可以
5. 在哪些類型的頁面中顯示(pageType)，可以設定成'all' 'archive' 'main' 'item'，預設值是'all'。不管pageType設定為何，在「頁面元素」畫面中，這些widgets都會秀出外框來
• includable
Blogger小工具內的模組(includable)：includable有兩個屬性，一是必要的、獨一無二的id，二是可以不做設定的變數(var, variable)。 每個widget中，至少要有一個id是'main'的includable模組，用來顯示widget的內容。其實，大部分狀況下，也只需要這一百零一個'main'就夠了
• includable
第二個includable，也必須設定id屬性。'main'以外的includable，內容並不會自動顯示出來，不過，可以在'main'裡面，用include語法指向此includable的id，如此，它就會在'main'中顯示

--
ETBlue's Blogger Notes at http://etblue.blogspot.com
Reference:
http://www.google.com/support/blogger/bin/answer.py?hl=en&answer=46888
http://www.google.com/support/blogger/bin/answer.py?hl=en&answer=46995
--

圖片5 (圖中標註的頁面是 page 4)

Blogger的OCBI構造Outer / Cap / Fauxborder / Inner

• O - outer外圍：用來設定外部的距離(margin)以及寬度(width)。必要的時候，也可以拿來設定背景(background)
• C - cap-top頂部的蓋子：用來設定頂部的邊框
• cap-top-left頂蓋的左邊：用來設定頂部左邊的轉角
• cap-top-right頂蓋的右邊：用來設定頂部右邊的轉角
• B - Fauxborder-left左方的'偽'邊框：用透明背景的圖片來設定左邊的框線
• fauxborder-right右方的'偽'邊框：用透明背景的圖片來設定右邊的框線
• I - inner內層：用來設定內部的間距(padding)，以及放入真正的內容。必要的時候，也可以拿來設定背景(background)
• SWI - Section / Widget / Includable，放真正的內容
• cap-bottom底部的蓋子：用來設定底部的邊框
• cap-bottom-left底蓋的左邊：用來設定底部左邊的轉角
• cap-bottom-right底蓋的右邊：用來設定底部右邊的轉角

--
ETBlue's Blogger Notes at http://etblue.blogspot.com
Reference: https://groups.google.com/group/blogger-template-design/web/html-structure?pli=1
--

圖片 6, 7, 8 (圖中標註的頁面是 page 5~7)

Blogger的Content構造Header / Tabs / Main / Footer

• content
• FOCBI - content-fauxcolumns：fauxcolumn可以設定整個content的全高度的背景，有自己的OCBI結構。content的fauxcolumn似乎沒什麼用到，因為全頁的背景，通常已經設定在HTML body的fauxcolumn裡面了，比方說，Blogger 內建的Simple樣板的漸層背景，或者Watermark樣板的背景。
• OCBI - content常規的OCBI
• OCBI - header 部落格標頭
• SWI - Blogger樣板系統的header區段：預設狀態下，header區段裡面只能有一個小工具(widget)，也就是header widget。想要改掉這個限制的話，可以進一步修改html範本。
• OCBI - tabs橫向標籤：在這個OCBI裡面，html的 <ul>(意思是unordered list) 所包裹的 <li>(意思是list)項目，都會以橫向分頁標籤的外觀呈現。
  
  • SWI - Blogger樣板系統的crosscol (意思是cross-column跨欄的)區段：最常見的用法，是拿來放靜態頁面(Pages) widget，或是文章標籤(Labels) widget，要放橫幅廣告也可。
• OCBI - main網誌內容：裡面有三個直欄，為了利於SEO (search engine optimization)，中間直欄的程式碼放在最前面
  
• fauxcolumns：是為了實作出全高度的背景而設計的。在這裡的fauxcolumn-xxx-outer設定background的話，不管這個直欄的內容物上下高度是多少，它的background都會是全高度的，不會跟著內容物減少而跟著往上縮水。
• OCBI - fauxcolumn-center中間的'偽'直欄
• OCBI - fauxcolumn-left位於左邊的'偽'直欄
• OCBI - fauxcolumn-right位於右邊的'偽'直欄
• OI - column-center
• SWI - main區段：主要用來放Blog widget，也就是網誌文章
• OI - column-left
• M > SWI - 利用macro產生0-4個左方側邊欄區段
• OI - column-right
• M > SWI - 利用macro產生0-4個右方側邊欄區段
• OCBI - footer 部落格頁尾
  
• M > SWI - 利用macro產生0-4個頁尾區段
• SWI - footer-3區段：主要用來放樣板設計者的資訊，也就是Attribution widget。預設是鎖死不能更動的，不過可以透過修改HTML來修改或移除它。

main裡面的側邊欄和頁尾，也就是column-left、column-right、footer，它們用macro來產生SWI區段，而這個所謂的macro，就寫在樣板程式碼的最～最最下面的地方。

• M - 巨集(macro)：針對側邊欄，也就是那些提到'sections'模組的地方，根據邊欄裡面所設定的sections數目，做以下的動作
• num = 0 什麼都不做
• num = 1 產生1個全寬度的section
• num = 2 產生上section跟下section
• num = 3 產生上section跟一欄的table跟下section
• num = 4 產生上section跟二欄的table跟下section
• SWI - sidebar-left-1區段（假設左側邊欄設定為1個section的話）
• SWI - sidebar-right-1區段（假設右側邊欄設定為1個section的話）
• SWI - footer-1區段（假設頁尾欄設定為1個section的話）

--
ETBlue's Blogger Notes at http://etblue.blogspot.com
Reference:
https://groups.google.com/group/blogger-template-design/web/html-structure?pli=1
https://groups.google.com/group/blogger-template-design/web/column-backgrounds
--

圖片 9, 10, 11 (圖中標註的頁面是 page 2~4)

Blogger樣板程式碼 / 資料庫內容 / 系統標籤 的規定位置

section 以上的程式碼，會隨著樣板一起更換。

widget 小工具，以及小工具內的 includable 模組，存在網誌資料庫中，即使更換樣板，內容物也會完整的保留。

Blogger 的系統標籤，如 data: 、 b:if 、 b:else ，只能放在 1. widget 小工具的 includable 模組之中， 2. section 之外的 html 原始碼中，否則不會產生作用，也不會通過 Blogger 樣板編輯器的自動檢查。

--
ETBlue's Blogger Notes at http://etblue.blogspot.com
--