一連都整左幾日時間，不過其實整來都係自 high 多，沒有什麼商業價值。

之前其實都有整過幾次，但係每次都覺得好複雜同埋做唔到自己想要的東西，所以之後都係搬左去其他唔同既地方。

不過每次搬定之前，都會來到 Blogger 呢度做中轉站，可能因為唔洗錢的關係掛。

印像中係咁:

Blogger > PHP (Codeigniter) > Blogger > PHP (Laravel) > Blogger > Node (Koa) + React > Blogger (現在)

始終維護少一樣野就已經真係差好遠，人大左無咩時間。同埋認真研究左 Blogger 之後，發覺其實設計得好好，有好多你想要的東西其實都已經可以用現成的 `tag` 去完成到。

如果日後有時間再詳細寫一篇有關 Blogger template 的 customization guide 分享下今次的經驗。

現在就記錄返少少有關 Blogger template 的主要要素。

### Data Tags

就是用來提取資料的標籤，全部都係由 `data:` 開始。例如:

```html
<!-- 用來提取 view.isError 這個變數 -->
<data:view.isError />

<!-- 用來提取 blog.url 這個變數 -->
<data:blog.url />
```

問 : 但係有咁多唔同變數，邊度可以睇到呢啲 Dcoumentation 呢?

答 : 可以去呢度睇到 https://support.google.com/blogger/answer/47270

但係有點一定要注意，就係如果你想要拎到 `data:posts` 既內容的話，你就一定要係 `b:widget type='Blog'` 入面先可以提取得到，如果唔係就只會拎到吉的 variable 或者會有可能出現 Error。

```html
<!-- 定義一個 widget, 而個 type='Blog' -->
<b:widget id='Blog1' locked='true' title='文章' type='Blog' visible='true'>

	<!-- 每一個定義的 widget, 都一定會有個 includable id='main' 作為 widget 的進入點 -->
	<b:includable id='main' var='this'>

		<!-- 去到呢度已經可以用到 data:posts 呢個變數, 呢度係要 loop 下佢, loop 出來個 variable 叫做 post -->
		<b:loop var='post' values='data:posts'>
                      	
			<!-- 要係呢度先可以拎到 post.title 出來用 -->
			<data:post.title />
		</b:loop>
    </b:includable>
</b:widget>
```

大致上就係咁，只要砌啱晒呢個 Structure 就咩 widget 都係可以用呢個方法提取到資料。

### Workflow Tags

就是用來控制流程的標籤，全部都係由 `b:` 開始。例如:

```html
<!-- 用來提取 view.isError 這個變數 -->
<b:if />

<!-- 用來提取 blog.url 這個變數 -->
<b:else />
```

佢地通常係要夾埋 Condition 一齊來決定條路點行。例如:

```html
<!-- 對比一下 data:blog.pageType 的值來決定畫出什麼到畫面 -->
<b:if cond='data:blog.pageType == "index"'>
  
    <span>是 index 類頁面</span>
  
    <b:else />
  
    <span>不是 index 類頁面</span>
</b:if>
```

其實同寫 Program 一樣，只不過係語法有少少唔同。

去呢度可以有更詳細的講解: https://support.google.com/blogger/answer/47270

### 總結

其實 Blogger 好好用，又唔洗錢，無論你係初手 / 中手 / 高手，都一樣好適合使用。

佢係專門用來寫 Blog 的 CMS，而且做得好好。

### 隱藏技能

下面呢條 link 好似幾好玩，可以用來做 Ajax search post，遲啲有時間先研究下。

[https://example.com/feeds/posts/summary?callback=callcall&max-results=50&q=react&start-index=1&alt=json&orderby=updated](/feeds/posts/summary?callback=callcall&max-results=50&q=react&start-index=1&alt=json&orderby=updated)