[教學]Blogger 頁面判斷式(PageType)的各種應用

Blogger 跟其他部落格比較起來，比較不友善的地方就是一些工具說明得自己想辦法啃官方說明文件；而本文的主題「Blogger 頁面判斷式」，配合不同的頁面型態(PageType)參數，就能在不同頁面時展現不同的版面效果，只是就算啃了「官方說明文件」對其應用也可能是一知半解。在某方面說起來，Blogger 能否瞭解得深入，真的得靠有沒有前輩分享學習心得，大家才能延伸出更好的應用。

本篇文章部分內容一開始分享在「Blogger中文社群」的這個討論串：https://plus.google.com/108990319112241335296/posts/YEv1v5Nwcnt，經由討論後讓內容完整了一些。閱讀本文前需要一點 HTML、CSS、Javascript 的概念，且本文主要講的是各種應用及概念，因此建議先閱讀這一篇「淺談 Blogger 的判斷式以及 PageType 的應用」，來瞭解各種頁面(PageType)的基本定義。另外布丁大也有一篇「Blogger範本之網頁類型(pageType)應用」 內容比較細一些，同樣可以先參考一下。


一、基本使用法

1. 定義：為了方便閱讀，先簡單列出網頁類型(pageType)的定義─

index：首頁、標籤、搜尋頁面
archive：歷史文章列表
item：文章頁面
static_page：靜態頁面(網址含 "/p/" 的頁面)


2. 讓特定內容在 "文章頁面" 才出現：任何內容例如HTML、CSS、Javascript、Blogger語法，都可塞在判斷句之間。就像文章下方通常會有「張貼者」、「分享按鈕」等等資訊，或是很多人會裝「LinkWithin」；如果想讓這些資訊在 "文章頁面" 才出現，其他頁面不出現(主要是首頁)，那麼用法如下──

<b:if cond='data:blog.pageType == "item"'>
這個區間為「張貼者」、「分享按鈕」、「LinkWithin」等等的程式碼
</b:if>
LinkWithin 使用這個方法安裝的話，必須填入安裝程式碼，取得方法為在「LinkWithin」首頁 → 「Platform」選擇 「Others」，填入必要資訊後可取得安裝程式碼，填入以上區間即可。


3. 讓小工具內容在 "文章頁面" 才出現：LinkWithin 最常見是使用安裝小工具的方式，也就是在其首頁「Platform」選擇 「Blogger」的方式安裝。「LinkWithin」的小工具也是屬於「HTML/Javascript」小工具的一種，其利用頁面判斷式、只在文章頁面才出現的方法如下：

後台範本 → 編輯 HTML → 搜尋小工具標題(找出這個小工具的區塊) → 往下幾行找到字串 <data:content/> → 在這個字串的前後加上以下程式碼──

<b:if cond='data:blog.pageType == "item"'>
<data:content/>
</b:if>

4. 讓小工具內容在 "首頁" 才出現：假設使用一個「HTML/Javascript」小工具當作簡單的首頁公佈欄，在首頁才顯示內容、其他頁面不顯示內容，那麼可以這麼做──

後台 → 版面配置 → 新增小工具 → 選擇「HTML/JavaScript」→ 填入標題、及公佈欄內容 → 儲存

接著 → 後台範本 → 編輯 HTML → 搜尋小工具標題(找出這個小工具的區塊) → 往下幾行找到字串 <data:content/> → 在這個字串的前後加上以下程式碼──

<b:if cond='data:blog.pageType == "index"'>
<data:content/>
</b:if>
以上就是簡單的首頁公佈欄概念。如果想用美觀一點、功能多一點的首頁公佈欄，可參考這一篇「Blogger 首頁公佈欄實作」。



二、進階用法

比較進階的用法是在不同頁面使用不同的 HTML、CSS、Javascript。這裡用 CSS 來舉例，就像本站的效果，在文章頁面時，每篇文章開頭通常有一張示意圖，寬度大約為 420 px、置中擺放；但這樣的設置擺在首頁時，圖片尺寸顯得太大，所以非文章頁面時我將圖片設定為 210px，並且圖片靠左，讓文字在右側繞圖。在範本裡我是這麼設定的：

<b:if cond='data:blog.pageType == "item"'> // 文章頁面時
<style>
.title-img {
display: block; // 改為區塊顯示
text-align: center; // 置中
width: 420px; // 圖片寬度
}
</style>
<b:else/> // 其他頁面時
<style>
.title-img {
float: left; // 浮動靠左
margin: 0px 15px 10px 0px; // 設定右邊、下面的邊界值，以防文字離圖太近
width: 210px; // 圖片寬度
}
</style>
</b:if>
以上的程式碼可放在範本中 </head> 的前一行。

而使用方法為，將文章裡的第一張圖片(示意圖) <img.../>，前後加上紅字與綠字的語法──

<span class="title-img"><img src="圖片網址"/></span>
如此這張文章示意圖在不同頁面，就會有不同的顯示效果了。


三、特殊用法──混合其他語法

Blogger 的語法有個神奇的地方，就是他不屬於任何語法，他可以跟任何語法混用。

1. 例如 javascript 如果要動態執行 HTML，通常得使用 document.write，就像下面──

<script>
document.write("<h1>這是首頁</h1>");
其他js程式碼
</script>

但以下例子的寫法雖然一樣可以執行，卻是沒有必要的──

<script>
document.write("<b:if cond='data:blog.pageType == \"index\"'>");
document.write("<h1>這是首頁</h1>");
其他js程式碼
document.write("</b:if>");
</script>

可以直接改成以下用法──

<script>
<b:if cond='data:blog.pageType == "index"'>
document.write("<h1>這是首頁</h1>");
其他js程式碼
</b:if>
</script>
這樣是不是簡單易懂多了啊？


2. 同樣的，CSS 也可以這麼用，在「二、進階用法」的例子中，假設沒有其他 CSS 設定，只有圖片尺寸要隨不同頁面更改，那麼就可以用以下的寫法：

<style>
.title-img {
<b:if cond='data:blog.pageType == "item"'> // 文章頁面時
width: 420px;
<b:else/> // 其他頁面時
width: 210px;
</b:if>
}
</style>
這樣是不是少了很多程式碼啊？


四、小結

本文的某些舉例不一定實用，例如公佈欄，是為了舉例而想出的範例，重點為解釋這些語法如何使用，希望能拋磚引玉，讓大家想出更好的應用方式。

更多 Blogger 判斷式說明：