Blogger 版面配置標籤 (Blogger Layout Tags)

王思元 5:26 下午 Blogger

最近為了將 Blogger 調整改版，研究並嘗試 Blogger 編排，做個筆記紀錄。

概觀

概觀來看的 HTML 大致上都是這樣，HTML 的標準，<html></html> 定義網頁內容；<head></head> 定義網頁標題資訊以及用到的 CSS 以及 Javascript 資源等等，即是「不會顯示」資源定義；<body></body> 定義文字圖片排版表格等等，即是「會顯示」的資源定義。

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html>
<html>
   <head>
         ...
      </head>
      <body>
      ...
   </body>
</html>

加入 Blogger 控制項變成這樣：

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html>
<html>
   <head>
      <b:include data='blog' name='all-head-content'/>
      <title><data:blog.pageTitle/></title>
      ...
      <b:skin>...</b:skin>
      ...
      <b:include data='blog' name='google-analytics'/>
   </head>
   <body>
      ...
      <b:section>
         ...
         <b:widget>
            ...
            <b:includable>
               ...
               <b:include/>
               ...
            </b:includable>
            ...
         </b:widget>
         ...
      </b:section>
      ...
   </body>
</html>

包含數多種控制項目，由上往下看，標籤大致分為數種：

<b:include/>：引用資料標籤，引用的資料可以是 Blogger 所提供，或者是自行使用 <b:includable/> 定義
<b:skin>：Skin 定義，CSS 定義
<b:section/>：章節定義，大概幾種定義 Header、Main、Navigation、或是 Footer 等等
<b:widget/>：小工具定義，一個章節可以定義多個小工具
<b:includable/>：可引用資料定義，可以使用 <b:include/> 來引用該項資料標籤

標籤 b:include

可以再任意地方使用的只有下面這兩個：

<b:include data='blog' name='all-head-content'/>

表示加入 Blogger 預設的 Header

<b:include data='blog' name='google-analytics'/>

表示加入 Blogger 設定中的網站分析程式碼（設定 > 其他 > Analytics (分析) 網站資源 ID）

至於引用自定義的 <b:include/> 標籤，只能在 <b:includable><b:includable/> 中所使用：

<b:include name='name' data='data'/>

name：必須，引用資料的 id，<b:includable id='id'>
data：選擇性，傳入的資料

標籤 b:section

用來標記章節資料，版面配置使用章節定義來協助編輯排版：

<b:section id='id' class='class' maxwidgets='1' showaddelement='yes'>
...
</b:section>

id：必須，唯一識別碼 [a-zA-Z0-9]
class：選擇性，類別，支援 'navbar', 'header', 'main', 'sidebar', or 'footer'
maxwidgets：選擇性，最多放多少小工具 [0-9]，不設定表示無限制，版面配置使用
showaddelement：選擇性，顯示新增小工具按鈕 yes|no，版面配置使用

標籤 b:widget

用來標記小工具內容：

<b:widget id='id' type='type' locked='no' title='title'>
...
</b:widget>

id：必須，唯一識別碼 [a-zA-Z0-9]
type：必須，類型，根據 Blogger 定義有數多種
locked：選擇性，上鎖 yes|no，版面配置是否允許調整位置或是刪除
title：選擇性，小工具標題

標籤 b:includable

定義可以引用資料，只能定義在 <b:widget></b:widget> 中：

<b:includable id='id' var='var'>
...
</b:includable>

id：必須，唯一識別碼 [a-zA-Z0-9]。每一個 <b:widget> 中必須定義一個 <b:includable id='main'></b:includable>，以讓 widget 處理
var：選擇性，<b:include data='data'> 屬性 data 所傳入的參數

範例解析


<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html>
<html xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr'>
<head>
   <title><data:blog.pageTitle/></title>
   <b:skin><![CDATA[]]></b:skin>
</head>
<body>
   <b:section class='main' id='main' showaddelement='no'>
      <b:widget id='Blog1' locked='true' title='網誌文章' type='Blog'>
         <b:includable id='main' var='top'>
            <b:loop values='data:posts' var='post'>
               <b:include name='post' data='post'/>
            </b:loop>
         </b:includable>
         <b:includable id='author'>Siyuan Wang</b:includable>
         <b:includable id='post' var='post'>
            <h1><data:post.title/></h1>
            <div>作者：<b:include name='author'/></div>
            <div>內容：<data:post.body/></div>
         </b:includable>
      </b:widget>
   </b:section>
   <b:section class='sidebar' id='sidebar' preferred='yes'></b:section>
</body>
</html>