2012年12月31日

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

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 判斷式說明:

30 則留言:

  1. 相較於痞客邦,Blogger就缺少了文章列表的功能
    用這概念,可以設定在只在首頁顯示文章內文,其他只顯示標題

    同樣的,假設有使用二欄側邊欄,也可以依樣畫葫蘆讓其中一欄在看文章時不顯示,方便增加可視空間

    回覆刪除
  2. <1055541129189230416>(以上內容請勿刪除,從括號之後開始留言)
    謝謝您的意見,滿有建設性的。
    [quote]使用二欄側邊欄,也可以依樣畫葫蘆讓其中一欄在看文章時不顯示,方便增加可視空間[/quote]
    這個的確可以利用判斷式完成,不過方法不如想像中簡單,前人有實作過:「Blogger 動態版型,讓左/右側邊欄消失
    [quote]只在首頁顯示文章內文,其他只顯示標題[/quote]這個idea不錯, 實作上也不複雜.
    [quote]相較於痞客邦,Blogger就缺少了文章列表的功能[/quote]不曉得痞客邦的「文章列表」有沒有對應的blogger小工具名稱?例如blogger的「最新文章」小工具?還是像我導覽列的那個「文章列表」功能?

    回覆刪除
  3. <6935611399063545978>(以上內容請勿刪除,從括號之後開始留言)
    這倒是沒有,Pixnet的文章列表主要是依附在搜尋、分類、文章存檔裡的

    http://admin.pixnet.net/blog/listall
    上面的官方公告就是它主要的樣子,純改樣版看起來是沒辦法,可能還要配合CSS和Javascript吧

    會從Pixnet跳到blogger跳到是因為最近速度太慢。之前雖曾經用過一段時間,也是因為blogger缺乏這方面的功能,所以才選擇一時放棄回去用痞客邦。

    回覆刪除
  4. <3128498321404188151>(以上內容請勿刪除,從括號之後開始留言)
    看了那個網址懂你的意思了,這個功能就是按下blogger的標籤後的畫面,例如按下我側邊欄「文章分類」那裡的標籤,就會列出該標籤的所有文章。

    不過我看Pixnet一個標籤可以顯示很多文章,blogger一頁倒是無法顯示那麼多文章。

    我想如果使用我的「樹狀分類」把文章分類好,一個標籤不會有太多文章,也算是解決這個問題了。

    如果你要切換文章與標題的功能,可以參考我的「切換標題模式與文摘模式

    回覆刪除
  5. <9101153768377027334>(以上內容請勿刪除,從括號之後開始留言)
    剛剛好看到下面留言...我部怎看留言的
    其實在標籤連結可以設定顯示文章數量,"?max-results=[文章數量]"
    題外:似乎有很多參數Blogger沒有直接明講...
    留言頁面超級帥啊!!!這是用JS弄得嗎?
    剛剛發現Google Drive提供JS線上編輯服務

    回覆刪除
  6. <3754521935826437726>(以上內容請勿刪除,從括號之後開始留言)
    [quote]標籤連結可以設定顯示文章數量,"?max-results=[文章數量]"[/quote]
    只能顯示一定的數量喔, 您可以測試我的標籤「有錢人想的和你不一樣

    [quote]留言頁面超級帥啊!!!這是用JS弄得嗎?[/quote]
    是指引言功能嗎?這是我很久以前寫的「Blogger 留言回覆系統」,是js,可惜只能用在舊範本,串聯式留言無法套用...

    [quote]Google Drive提供JS線上編輯服務[/quote]可能要由您告訴我線上編輯的作用了, 因為我都是用 notepad++ 編輯, js 檔用 dropbox 同步, 所以幾乎沒用 google drive~~

    回覆刪除
  7. <3097772381832922583>(以上內容請勿刪除,從括號之後開始留言)
    不過文張顯示數量調足夠便可以了,100?1000?文章應該也沒這麼多吧?
    也有人使用Archive
    範例:http://kuangtc.blogspot.com/p/blog-page_16.html
    http://yantzong.blogspot.com/2006/12/blog-post.html

    回覆刪除
  8. <6935384813895355914>(以上內容請勿刪除,從括號之後開始留言)
    連結的「文章列表+讚統計」功能, 原始版本就是我寫的喔~~^^
    但是速度太慢了,所以後來我寫了載入比較快的版本「文章列表+快速顯示讚統計」,還有「動態載入」版本

    回覆刪除
  9. Wayne大大,你好,想請問一下照片尺寸的問題,有時一篇文章中會同時有直式與橫式的照片,請問要如何設定,能讓直式跟的照片的寬度都一致呢? 不然我都很笨的把每一張相片大小設定好才上傳....

    回覆刪除
  10. <5691905020102074324>(以上內容請勿刪除,從括號之後開始留言)可以在範本 </head> 之前插入以下 CSS 內容:

    <style>
    .post-body img {
    width: ?? px;
    }
    </style>

    ?? 填入你要的寬度即可. 不過要這麼做的話,得確定你都不會插入任何小圖示,否則小圖示的寬度也會被拉到這麼大。

    回覆刪除
  11. <815081587771835728>(以上內容請勿刪除,從括號之後開始留言)
    )報告報告,謝謝Wayne大大的指導,我試成功囉~~只是一開始放在 /head 之前沒反應
    後來改放在/* Posts之下塞進這個CSS語法,就OK了~~謝謝!!

    回覆刪除
  12. <5573833189367679613>(以上內容請勿刪除,從括號之後開始留言)不客氣~你放在 </head> 前的時候,是不是沒有加 <style> 標籤啊?Anyway, OK了就好!

    回覆刪除
  13. Wayne Fu 大大您好:
      想請問一下,在指定頁面顯示的這個功能,有沒有什麼其他方法可以在逛其他頁面時,不要看到隱藏工具的部分框框?

      幾個禮拜下來,找了很多教學,也弄了很久,發現,在進入其他頁面時,原本隱藏工具的位置,多少還是會有一點高度在,也找不太到解決這個框框的教學方法ˊˋ

      雖然側邊欄位的部分,我盡量用面板的顏色去把多出來的框框融入面板裡,但是看起來,其他顯示的工具之間,還是會有距離的不協調感,不知有沒有什麼好方法可以改善這個問題?

      因個人想要把blogger改成有點像網站的感覺,然後,有一個小工具只想要顯示在首頁,但是,進入其他頁面時,還是會看的到那個位置的小框框,只差一步就可以完成想要的面板感覺了,希望大大可以幫個忙>"<

    回覆刪除
  14. <1875280635033346895>(以上內容請勿刪除,從括號之後開始留言)在此附上個人的blogger網址:http://creamsituation.blogspot.tw/ 希望大大能幫個忙>"<

    回覆刪除
  15. <1875280635033346895>(以上內容請勿刪除,從括號之後開始留言)從留言可能不太好回答,看看是否發個文好了~

    回覆刪除
  16. <5752471297237503984>(以上內容請勿刪除,從括號之後開始留言)大大的意思是......可能會發一篇解決方法的教學文!?是嗎?((有點怕理解錯誤((抹臉

    回覆刪除
  17. <4410292672772543020>(以上內容請勿刪除,從括號之後開始留言)有可能,我會再看看怎麼表達比較好~

    回覆刪除
  18. <5515375482987197660>(以上內容請勿刪除,從括號之後開始留言)了解了,麻煩大大了>"<//

    回覆刪除
  19. <7209304339542127123>(以上內容請勿刪除,從括號之後開始留言)現在才發現你的首頁是特別設計過的,竟然可以只顯示標籤連結,請問你是怎麼辦到的啊?

    原本發了新文章回覆你:「Blogger 頁面判斷語法__五個實用範例說明」,但現在發現,你有問題的區塊,只要 "非首頁" 都會出現,因此「一、在特定頁面時,隱藏側邊欄的小工具」的程式碼不適合你的狀況,必須將 A 行程式碼改為 <b:if cond='data:blog.url != data:blog.homepageUrl'> 才能適合你的狀況!

    回覆刪除
  20. <4869023202039844278>(以上內容請勿刪除,從括號之後開始留言)Wayne Fu大大您好,抱歉,過這麼久才來回覆,最近在努力趕圖,一直沒上來看~請多包涵>"<

    大大指的標籤連結,是指:首頁、關於本站、文章列表‧‧‧‧‧‧那排的連結顯示嗎?

    回覆刪除
  21. <4869023202039844278>(以上內容請勿刪除,從括號之後開始留言)剛剛跑去看了一下大大說的那篇文章,我弄成功了!不過我把左邊只在首頁顯示的那四張連結圖所在的區塊,和側邊欄位的語法分開來使用。

    <---大大後來給的這個語法,我修改上去後,會變成,進入其他頁面後,雖然不會顯示不合理的高度,但是,應該要出現的側邊欄位反而出不來~

    後來,我稍稍想了一下,並將兩個欄位的設定分開,將側邊欄位的 A行程式(大大後來給的那串) 的 != 改成了 == 就變成,只有在首頁的時候才會隱藏他們的高度,在進入其他頁面時,還是可以看的到要出現在側邊欄位的小工具。

    很感謝大大幫忙研究出來的方法,很成功,感謝大大>"<//

    回覆刪除
  22. <4869023202039844278>(以上內容請勿刪除,從括號之後開始留言)剛剛發現,打在留言中的語法消失了......囧"~雖然想在留言一次語法,但是,按預覽後,還是沒看到打在裡面的語法~不知道大大看不看得懂我的留言QAQ

    回覆刪除
  23. <8090555010003060565>(以上內容請勿刪除,以下引言請自行刪減) [quote]大大指的標籤連結,是指:首頁、關於本站、文章列表‧‧‧‧‧‧那排的連結顯示嗎?[/quote]
    哈哈,我是指圖示 Diary、Drawings、Adventures,這些標籤在首頁是怎麼做出來的?

    回覆刪除
  24. <8071550936852092293>(以上內容請勿刪除,從括號之後開始留言)我那時應該是沒仔細思考,所以寫相反了,而你也發現把 != 改成 == 就成功了(剛好就是相反的意思),還好你搞定了 :D

    回覆刪除
  25. <3610277889791776537>(以上內容請勿刪除,從括號之後開始留言)意思很好猜~我看得懂 ^^ 因為 Blogger 留言會封鎖語法, 所以要輸入 "<" ">" 這些符號最好改用其他符號代替, 不然就會出現語法消失的情形!

    回覆刪除
  26. <1541147144043047866>(以上內容請勿刪除,以下引言請自行刪減) [quote]哈哈,我是指圖示Diary、Drawings、Adventures,這些標籤在首頁是怎麼做出來的?[/quote]

    我先把圖片都製作好後~上傳到空間~再用文字小工具~在裡面輸入圖片語法和要進入的頁面網址語法((文字小工具也可以輸入網頁用語法))

    因為不想要在首頁就直接顯示網誌內容~所以~我到後台~將"網誌文章"的這裡面多加"不要在首頁顯示"的語法

    也就是大大的 Blogger 七種頁面形態判斷語法詳解 這篇文章裡的語法設定之一,這樣,首頁就不會看到了。

    回覆刪除
  27. <8298105931987849859>(以上內容請勿刪除,從括號之後開始留言)好棒的 idea! 這要列入我的待辦事項了,首頁也想來改造成你的樣式~

    回覆刪除
  28. <5286367651153197896>(以上內容請勿刪除,從括號之後開始留言)很高興有人喜歡我的改版樣式,也很期待大大的版型大改造www

    回覆刪除
  29. WFU大大您好:

    您在文章中提到可以首頁與文章使用不同背景
    那如果我想要不同文章使用不同背景請問有辦法辦到嗎?

    回覆刪除
    回覆
    1. http://www.wfublog.com/2013/12/7-blogger-pagetype.html →「二、各種索引頁面」→「1. 首頁」,把首頁的字串改用文章網址,可達到你的需求。如修改有問題的話,請到該篇留言提問。

      刪除

張貼留言注意事項:

◎ 勾選「通知我」可收到後續回覆的mail!
提問請附網址、詳細描述狀況,如提供的資訊不足,則無法回覆。
◎ 請在相關文章留言,與文章無關的主題請至「Blogger 中文論壇」。
◎ 若詢問 CSS 、非官方範本問題、或貴站為商業網站 ,請參考「本站諮詢頁面」→「1. 諮詢服務」
◎ 若留言要輸入語法,"<"、">"這兩個符號請用其他符號代替,否則語法會消失!
◎ 若發現留言不見了,通常是因為 "複製貼上" 的內容常被系統判定為垃圾留言,請不用擔心,我會定期將留言恢復。
◎ 本站「已關閉自刪留言功能」。