2006-11-07

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 自己說明文件的分類:

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

參考文章:
Beta Template 版面改造

回應: 6

NightSpirit 提到...

引述文章的同時若能提及作者

我會非常之感激 :)

網站管理員 提到...

您好!我不小心勾選到一個東西之後變這樣 http://royaljack2007.googlepages.com/tmp_Capture-1.jpg

也沒辦法自訂樣本,非常困擾,…麻煩!跪拜…

Abin 提到...

To 網站管理員:
您的狀況除了砍掉重練外,我想也沒其他辦法,如果有備份樣板可能還有機會。

Taiwan Muwaku Rugby Football Club 提到...

Blogspot 的左右邊 邊框太大 如何把版面擴大 以充實整個畫面銀幕

Abin 提到...

To Muwaku:
如果嫌邊框太大,要透過 CSS 手動調整樣板原始碼。如果不會動手改 code,建議直接去搜尋 Blogger Template,看看有沒有符合你需求、現成可以套用的樣板比較快,我自己用的樣板也是改來的。

紐西蘭101健康人 提到...

謝謝! 很詳細的解說

張貼留言

歡迎留言或發表意見,不過要理性不做人身攻擊。匿名的朋友得到回應的速度會比較慢喔~
發問相關的禮貌和規矩請先參考這篇文章,不當留言、和本文無關的回應可能會被直接刪除無視喔!