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