思元的開發筆記

關於 web service, unity, blogger 等軟體工程筆記

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

王思元 5:26 下午 Blogger Edit icon 沒有留言
Blogger Layout Tags

最近為了將 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>
  • Line 5: 網頁標題
  • Line 6: Skin 宣告，Blogger 要求必須有一個 Skin
  • Line 9: section main 宣告
  • Line 10: widget 宣告，類型 Blog，處理 BlogPost 顯示
  • Line 11: includable main，每一個 widget 必須存在，小工具程序處理進入點 (entry point)
  • Line 12: loop，窮舉 data:posts 陣列裡的每份 blog post 資料
  • Line 13: include post，將 post 資料丟給 includable post 處理（行為像似呼叫函數）
  • Line 16: includable author，作者資料定義
  • Line 17: includable post，var post，處理每一個 blog post 的資料顯示
  • Line 18: 印出 blog post 標題
  • Line 19: 印出 作者資訊
  • Line 18: 印出 blog post 內容
  • Line 24: section sitebar 章節宣告，在這範例中必須存在，不然 section main 不會顯示

參考資料 Reference

沒有留言: