2010年12月19日 星期日

圖解: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
--

25 則留言:

  1. 這篇教學真是寫得太棒了!!!
    感謝您的辛苦分享~
    讚!!!

    回覆刪除
  2. 謝謝留言,被稱讚真是開心!哇哈哈 XDD

    回覆刪除
  3. 真是我見過最詳細的說明,謝啦!

    回覆刪除
  4. 謝謝~~~ ^o^
    抓到 bug 的話記得通知我歐 XD

    回覆刪除
  5. 真是詳盡!
    佩服佩服!
    辛苦了!

    謝謝分享!^_^

    回覆刪除
  6. 喔呵呵 ^o^
    又多放了一張圖進去歐!!
    請多多指教 XDDD

    回覆刪除
  7. 佩服佩服!...有的學習了~

    回覆刪除
  8. 哈~謝謝,我也要繼續努力 XD

    回覆刪除
  9. 版主您好:可不可以請問如何將main與side兩欄間距加大?我也是用新版,但是在網路上找了好久都找不到像您這麼清楚的介紹,但..是..,還是不知道該改哪裡?麻煩教教我吧,感激不盡!

    回覆刪除
  10. @ YUAN

    1. 後台 Design → Edit HTML
    2. Ctrl + F 搜尋 .main-inner .column-center-inner
    3. 找到
    .main-inner .column-center-inner {
    padding: 0;
    }
    4. 中間加上兩行,分別代表中間文章跟右側邊欄、左側邊欄的距離
    .main-inner .column-center-inner {
    padding: 0;
    margin-right: ___px;
    margin-left: ___px;
    }
    5. 儲存樣板

    這樣應該就可以了,試試看 XD

    回覆刪除
  11. 啊,那個 __px 請填上你想要的距離,單位是像素 ^^

    回覆刪除
  12. 非常感謝您的回應,好久沒看沒想到您早已回覆,我趕快試試!有問題再請教,謝謝!

    回覆刪除
  13. 作者已經移除這則留言。

    回覆刪除
  14. 真是詳盡的圖解,先收藏起來再說!

    回覆刪除
  15. 真是有心啊!感謝您詳盡的圖解!

    回覆刪除
  16. @Jimmy Yen 我得了不把複雜的東西搞清楚就會死的病 >o<

    回覆刪除
  17. very very amazing!!

    不推對不起自己,這篇我收錄起來了~~「Blogger 知識 (筆記)

    回覆刪除
  18. 太詳細了~謝分享

    回覆刪除
  19. 部落格版主你好:
    想請教blogger現在是不是不能自訂template了?
    因為blogger線在越改圖片越小張,都快不想用它了...
    當我每一次按自定範本時,它就出現如下圖:
    http://i233.photobucket.com/albums/ee295/chi610066/-1-4.jpg
    要我使用它們的範本,這使我完全不知道該如何修改,網上的範本多又漂亮,下是下載了,但是不會用,所以想請教版主這該如何是好....
    希望能獲得版主的回應,謝謝^^

    回覆刪除
    回覆
    1. 天啊是去年的留言 orz 我目前用的後台又跟這篇文章時的「新」樣板系統不同了,我現在都懶得改,直接套官方的 theme,而且即使我想改也沒辦法像之前那樣直接修改原始碼了。

      現在的網頁語法因為 html5 跟 css3 的成熟,許多地方的最佳寫法也會不一樣,我想跟著 Blogger 升級是無可避免的事情... 所以後來我都不太自訂樣板程式碼了,不然每次更新後台就失效,實在懶得跟它搏鬥啊

      刪除
  20. 太讚了,需要細細品味

    回覆刪除
  21. 現在 Blogger 的後台又更新了一次,不曉得樣板結構有沒有變更,不過換到新後台以後好像就看不到原本這些 code 了... = ="

    回覆刪除
  22. 靠,能說什麼呢,只能說太強了,寫的真好,一定要上來留言鼓勵一下。
    等慢慢消化後,再看有什麼問題、前來請教。

    回覆刪除