Template 的基本內容和結構

Blogger Beta 可以改造的彈性真的好大，越碰越覺得無法自拔～哈哈！不過每次看到新增額外功能總要去改樣版文件 (Template)，不管是版面配置、CSS 還是 Javascript，都有點心虛：因為只會 Find -> Replace -> Save -> Apply 這些步驟，對樣版文件的內容和架構完全沒有概念，如果我想動版面風格而換了一套 Template，不是之前做的變動都要重來一次嗎？偏偏，我對這些預設基礎的版型都不是很滿意，遲早也要去動，不如在 Blog 功能補齊之前，先動手研究 Blogger Beta 的樣版文件。

一開始是偷懶，想先去找喜歡的樣版來修改，不過 Google 了半天沒有半個堪用的，好吧！自己改！眼高手低的下場就是不知道從何改起～不過認真一會敗讀文章後，終於對 Blogger 基礎樣版文件有一點點瞭解了，至少，要改也知道從哪動手。

所有版面物件都以區塊來定義，整個頁面最外層定義的名稱 (ID) 叫 outer-wrapper，像是整個 Blog 的 container。在 outer 裡面從上到下分成三大塊，分別是 header-wrapper, content-wrapper 和 footer-wrapper。顧名思義，這三塊就是分別用來放最上方的標題列(頁首)、內文以及頁尾。其中表現內文的那一塊 content-wrapper 裡面又分了兩個區塊，ID 分別是 main-wrapper 和 sidebar-wrapper，就是用來顯示 Blog 文章和旁邊 sidebar 的。到這裡，整個 Blogger Beta 的樣版區塊大致的配置就瞭解了。下面是階層關係：

- outer-wrapper
    - header-wrappe
    - content-wrapper
        - main-wrapper
        - sidebar-wrapper
    - footer-wrapper

以上只是版面區塊的定義名稱，搭配 CSS 的 style 設定和標準的 HTML，再用 <div> 標籤實作以上區塊，大致的版型就出來了，不過 Blogger 真正的重頭戲：Page Element 還沒出現哩！在此之前，要先知道控制 Page Element 的專屬語法：

<b:section class="'sidebar'" id="'sidebar1'" preferred="'yes'">

其中兩個重要的參數：class 是這個 section 的類別，會在 CSS 裡定義，id 則是這個 section 識別用的名字。上面提到 content-wrapper 裡面又分了兩個物件：main-wrapper 和 sidebar-wrapper，實作的結構用巢狀結構表示如下：

<div id='content-wrapper'>
  <div id='main-wrapper'>
    <b:section class='main' id='main' showaddelement='no'>
      <b:widget id='Blog1' locked='true' title='blog 文章' type='Blog'/>
    </b:section>
  </div>
  <div id='sidebar-wrapper'>
    <b:section class='sidebar' id='sidebar' preferred='yes'>
      <b:widget id='Profile1' locked='false' title='AUTHOR PROFILE' type='Profile'/>
      <b:widget id='Label1' locked='false' title='ARTICLE LABELS' type='Label'/>
      <b:widget id='BlogArchive1' locked='false' title='ARCHIVED POSTS' type='BlogArchive'/>
    </b:section>
  </div>
</div> <!-- end content-wrapper -->

看得出關連嗎？<div>用來分割出版面的區塊物件，而 Page Element 區塊則是用 <b:section> 標籤讓系統認得，至於每個 Element 的實際內容和功能定義，就是在 <b:widget> 裡面。以上面的例子解釋，在 Sidebar 裡有三個 Elements，分別是個人資料(Profile)、分類標籤(Label)和封存的舊文章(BlogArchive)。這些概念瞭解以後，再去看看自己的 Template，即使要改至少也知道要改那個地方了吧～

由此可知，Template 裡面非標準 CSS、自己定義 & HTML的標籤就都是 Blogger Beta 的專屬標籤，像上面範例出現用來分割區間的 <b:section> 和表示特定 page element 的 <b:widge> 就是，除此之外還有像是判斷條件用的 <b:if>, <b:else>、迴圈 <b:loop> 等等，詳細用法這邊就不提了，我整理一下 Blogger 自己說明文件的分類：

• 版面配置的網頁元素標記 (Page Elements Tags for Layouts): <b:section>, <b:widget>
• 版面配置的小裝置標記 (Widget Tags for Layouts): <b:includable>, <data>, <b:loop>, <b:if>, <b:else>
• 版面配置資料標記 (Layouts Data Tags): Globally Available Data, Page Header, Blog Posts, Blog Archives, Profile, Text/HTML/JavaScript, Feed, Picture, Labels, List, Link List, Logo

最後一項 Layouts Data Tag 也是上面範例中，可以拿來做 class 類別的 layout 物件列表，以上標籤的詳細用法請詳讀官方文件囉～

參考文章：
Beta Template 版面改造