2012年12月1日 星期六

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

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

Wayne Fu 0 A+
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 判斷式說明:
0 0
如這篇文章對你有幫助,歡迎「分享」到 FB、「追蹤」粉絲團、「訂閱」最新文章

沒有留言:

張貼留言注意事項:

◎ 勾選「通知我」可收到後續回覆的mail!
◎ 請在相關文章留言,與文章無關的主題可至「Blogger 社團」提問。
◎ 請避免使用 Safari 瀏覽器,否則無法登入 Google 帳號留言(只能匿名留言)!
◎ 提問若無法提供足夠的資訊供判斷,可能會被無視。建議先參考這篇「Blogger 提問技巧及注意事項」。
◎ CSS 相關問題非免費諮詢,建議使用「Chrome 開發人員工具」尋找答案。
◎ 手機版相關問題請參考「Blogger 行動版範本的特質」→「三、行動版範本不一定能執行網頁版工具」;或參考「Blogger 行動版範本修改技巧 」,或本站 Blogger 行動版標籤相關文章。
◎ 非官方範本問題、或貴站為商業網站,請參考「Blogger 免費諮詢 + 付費諮詢
◎ 若是使用官方 RWD 範本,請參考「Blogger 推出全新自適應 RWD 官方範本及佈景主題」→ 不建議對範本進行修改!
◎ 若留言要輸入語法,"<"、">"這兩個符號請用其他符號代替,否則語法會消失!
◎ 為了過濾垃圾留言,所有留言不會即時發佈,請稍待片刻。
◎ 本站「已關閉自刪留言功能」。

TOP