Blogger範本之網頁類型(pageType)應用
Blogger範本之網頁類型(pageType)應用
Blogger的範本是以Blogger特殊的範本語法跟HTML語法混合撰寫而成,在Blogger版面配置中有相關說明。常常會有人用「Blogger Hack」來形容修改範本的行為,而我自己把玩Blogger範本也有一段時間,偶爾也會跟大家分享一些Blogger的程式碼。
這篇要跟大家介紹的是Blogger範本程式中最常用到的「網頁類型」(page type),以及如何偵測不同的網頁類型來對版面進行微調。
網頁類型之index、archive、item
「網頁類型」是Blogger在不同情境下的狀態參數,名稱是blog.pageType,可以利用以下語法來顯示網頁類型:
<data:blog.pageType/>
在Blogger的資料標記說明中,網頁類型有「index」(包含首頁、搜尋、標籤label列表)、「archive」(每年、每月封存的文章列表)、「item」(文章全文,Google翻譯做項目)、「static_page」(靜態網頁)等四種。
實際上在使用網頁類型時,會搭配Blogger範本語法中的條件標記<b:if></b:if>跟<b:else/>來使用。舉例來說,我想要在item類型中的顯示一段話,在index類型中顯示另外一段話的話,可以插入以下語法:
<b:if cond='data:blog.pageType == "item"'> 這段文字會出現在item網頁類型。 </b:if> <b:if cond='data:blog.pageType == "index"'> 這段文字會出現在index網頁類型。 </b:if>
其中「"」是指「雙引號"」的脫逸化後的字串,同等於雙引號。只是在Blogger範本處理過程中,會自動將雙引號換成"。大家在使用的時候請不要覺得奇怪喔。
區隔index中的首頁與其他網頁
預設的網頁類型雖然有四種,但是index類型包含了首頁、搜尋與列表,這樣的混雜令人難以使用。
舉例來說,我會希望我的Blogger首頁顯示文章內文摘要、而搜尋跟標籤(label)列表只要顯示標題就好。就像下表左右兩張圖的區別一樣。但是光用網頁類型卻無法區隔這兩者的差別。
其實,Blogger範本中還有另一種資料標記可以用來區隔是否是首頁,那就是「blog.homepageUrl」(Blog首頁的網址)跟「blog.url」(現在網頁網址)。blog.homepageUrl在各種類型的網頁中都是固定的參數,表示你的Blog首頁網址,例如「http://pulipuli.blogspot.com/」;blog.url則會隨著你現在瀏覽的網頁有所不同,例如「http://pulipuli.blogspot.com/search/label/Second%20Life」。
聰明的你應該發現到了,只有當頁面是首頁的時候,blog.url才會等於blog.homepageUrl。因此我們可以利用條件標記來判斷這是否是首頁,例如:
<b:if cond='data:blog.url == data:blog.homepageUrl'> 這是首頁。 <b:else/> 這不是首頁,可能是搜尋、標籤列表,或是文章全文、封存列表。 </b:if>
如果再加上網頁類型的判斷,就可以將範圍縮小到只區隔首頁跟搜尋、標籤列表這兩種類型。語法如下:
<b:if cond='data:blog.pageType == "index"'> <b:if cond='data:blog.url == data:blog.homepageUrl'> 這是首頁。 <b:else/> 這是搜尋或標籤列表。 </b:if> </b:if>
於是這樣子,我們就能夠分辨清楚首頁與搜尋、標籤列表這兩種類型的網頁了。
重新歸類網頁類型
除了原本的四種網頁類型之外,上述的方法又可區分出首頁與搜尋、標籤列表這兩種類型。但對我來說,實際上我只把Blogger的網頁類型區分成四種:首頁、列表、文章、靜態網頁。以下一一敘述其情境、需求,以及Blogger範本語法的用法。
首頁
首頁,Blog一進來就會看到的網頁,是整個Blog的門面。
- 舉例網址:http://pulipuli.blogspot.com/
- 文章數量:我會在首頁擺放五篇左右的最新文章
- 文章內文(post content):僅顯示文章的摘要內文(用Blogger的繼續閱讀功能,或是以JavaScript來實作)。
- 導覽列(sidebar)預設狀態:顯示
- 小工具(widget):列出所有的小工具,供使用者取用完整的功能。
- 網頁類型(page type):index
首頁被歸類在網頁類型的「index」中,但透過blog.url跟blog.homepageUrl來判斷,就能實作判斷首頁的語法。Blogger範本判斷首頁的語法如下:(如果只要知道首頁的話,就不需要blog.pageType的判斷)
<b:if cond='data:blog.url == data:blog.homepageUrl'> 這是首頁。 </b:if>
列表
列表是使用搜尋功能、瀏覽標籤以及網頁存檔的時候顯示的文章列表。雖然Blogger把首頁跟搜尋、標籤列表混在一起當做index網頁類型,但實際上,我們使用搜尋、標籤跟網頁存檔的時候,通常會因為單一頁面顯示太多篇文章,導致網頁讀取速度太慢。而此時使用者專注於搜尋,導覽列裡一些小工具也不需要顯示或執行,以免拖慢網頁速度。
- 舉例網址:
搜尋 http://pulipuli.blogspot.com/search?q=jquery
標籤 http://pulipuli.blogspot.com/search/label/%E6%97%A5%E8%A8%98
存檔 http://pulipuli.blogspot.com/search?updated-min=2011-01-01T00%3A00%3A00%2B08%3A00&updated-max=2012-01-01T00%3A00%3A00%2B08%3A00&max-results=50 - 文章數量:視不同情境而定,通常文章數量都很多
- 文章內文:為了加快讀取速度,我設定為不顯示文章內文
- 導覽列預設狀態:顯示
- 小工具:僅列出導覽用的小工具。
- 網頁類型:
搜尋、標籤 index
存檔 archive
我以前常常覺得Blogger內建的搜尋速度實在是太慢,這是因為搜尋頁面中會顯示的文章太多,加上圖片讀取、JavaScript執行的時間,就算是Google Chrome開起來也常常覺得會有即將當機的感覺。以前我能力不足,只會用JavaScript勉強修正,但現在知道怎麼利用Blogger範本之後,這個問題就迎刃而解了!
在Blogger範本中,要使用列表的條件標籤語法如下:
<b:if cond='data:blog.pageType == "index"'> <b:if cond='data:blog.url != data:blog.homepageUrl'> 這是列表(搜尋、標籤)。 </b:if> </b:if> <b:if cond='data:blog.pageType == "archive"'> 這是列表(封存)。 </b:if>
文章
文章就是Blog單篇文章的全文。
- 舉例網址:
文章全文 http://pulipuli.blogspot.com/2011/06/oped.html - 文章數量:一篇
- 文章內文:全部顯示
- 導覽列預設狀態:隱藏
- 小工具:列出全部的小工具,但延遲載入。
- 網頁類型:item
我個人不喜歡閱讀文章時,旁邊還有一串導覽列,造成文章閱讀起來容易分心、還佔了版面的位置。所以我希望能在文章類型的頁面中隱藏導覽列,讓使用者能專心閱讀。
Blogger範本中可以直接用blog.pageType來偵測文章的網頁類型,語法如下:
<b:if cond='data:blog.pageType == "item"'> 這是文章。 </b:if>
靜態網頁
靜態網頁通常是放一些長期顯示的訊息,例如詳細的「關於我」介紹、「與我聯絡」的細節。我目前並沒有使用靜態網頁,因為我覺得隨著時間一次又一次建立的網頁典藏比較有趣。因此,下面只是我推測靜態網頁可能的情境與需求而已:
- 文章數量:一篇
- 文章內文:全部顯示
- 導覽列預設狀態:顯示
- 小工具:列出全部的小工具。
- 網頁類型:static_page
Blogger範本中也可以直接用blog.pageType來偵測靜態網頁的網頁類型,語法如下:
<b:if cond='data:blog.pageType == "static_page"'> 這是靜態網頁。 </b:if>
網頁類型改變顯示內容的應用
上述的四種情境,在文章內文、導覽列預設狀態跟小工具的顯示上皆有不同的需求。那麼要如何針對不同的網頁類型,改變成該類型的顯示內容呢?答案是依照網頁類型載入不同的CSS樣式檔與JavaScript腳本檔。
全網站與類型專用的檔案
實務上,我會建立一個應用於全網站的blogger.css樣式檔以及blogger.js腳本檔,然後再依照不同網頁型態建立各自型態使用的檔案。不同網頁型態的檔案名稱字尾有所不同,我的作法是:
- 首頁:-index
- 列表:-list
- 文章:-item
- 靜態網頁:-static-page
例如文章就會有專屬的blogger-item.css樣式檔跟blogger-item.js腳本檔。
全網站的檔案跟專屬的檔案有什麼差別呢?我以「布丁布丁吃什麼?」blog右邊的導覽列為例。在blogger.css中定義主要內文與導覽列寬度的CSS語法如下:
div#main-wrapper div#main { width: 66%; } div#sidebar-wrapper { width: 30%; }
因此全網站預設導覽列會在主要內容右邊,佔據大概30%的寬度。其中,兩者相加沒有100%的原因是避免擠壓到邊線排版。
而在文章網頁類型中,我希望導覽列能隱藏,而主要內文的寬度能最大化。因此在blogger-item.css中定義主要內文與導覽列寬度的CSS語法如下:
div#sidebar-wrapper { display:none !important; width: 0% !important; } div#content-wrapper div#main { width: 97% !important; }
如此一來,當載入blogger-item.css的時候,CSS語法的「!important」就會強制覆寫blogger.css的定義,讓主要內文的寬度擴展到97%,並將導覽列隱藏起來。
至於JavaScript腳本檔的方面,雖然我沒有特別說明,不過對於常常在玩JavaScript的人來說,看到這邊應該就能夠舉一反三了吧。
載入檔案語法
建立好各自的檔案之後,在Blogger範本中,可以在<head></head>之間載入全網站的樣式檔與腳本檔,並加入判斷式載入各種不同網頁類型專屬的樣式檔與腳本檔。假設你的所有檔案都上傳到了http://yourhost/,並且可以直接取用,那麼範本的語法如下:
<!-- 載入全網站的樣式檔與腳本檔 --> <script src='http://yourhost/blogger.js' type='text/javascript'/> <link href='http://yourhost/blogger.css' rel='stylesheet' type='text/css'/> <b:if cond='data:blog.pageType == "index"'> <b:if cond='data:blog.url == data:blog.homepageUrl'> <!-- 載入首頁的樣式檔與腳本檔 --> <script src='http://yourhost/blogger-index.js' type='text/javascript'/> <link href='http://yourhost/blogger-index.css' rel='stylesheet' type='text/css'/> <b:else/> <!-- 載入列表的樣式檔與腳本檔 --> <script src='http://yourhost/blogger-list.js' type='text/javascript'/> <link href='http://yourhost/blogger-list.css' rel='stylesheet' type='text/css'/> </b:if> </b:if> <b:if cond='data:blog.pageType == "archive"'> <!-- 載入列表的樣式檔與腳本檔 --> <script src='http://yourhost/blogger-list.js' type='text/javascript'/> <link href='http://yourhost/blogger-list.css' rel='stylesheet' type='text/css'/> </b:if> <b:if cond='data:blog.pageType == "item"'> <!-- 載入文章的樣式檔與腳本檔 --> <script src='http://yourhost/blogger-item.js' type='text/javascript'/> <link href='http://yourhost/blogger-item.css' rel='stylesheet' type='text/css'/> </b:if> <b:if cond='data:blog.pageType == "static_page"'> <!-- 載入靜態網頁的樣式檔與腳本檔 --> <script src='http://yourhost/blogger-static-page.js' type='text/javascript'/> <link href='http://yourhost/blogger-static-page.css' rel='stylesheet' type='text/css'/> </b:if>
實際上可能不會應用到這麼多種類型的檔案,像我自己沒有使用靜態網頁,所以並沒有判斷static_page。
不要直接修改Blogger範本的理由
有了條件標記之後,其實也能夠直接針對Blogger範本內文進行變更。例如,在某些類型中不輸出導覽列的標記內容。
在大部分情況中,我並不建議這樣做。一來是管理上比較不方便。網頁的樣式與腳本都經過全網站與各別類型的檔案分開管理,這樣子可以明確地知道在什麼情境下會有什麼樣的效果。
二來,由於Blogger範本的條件標記不支援多重條件,因此當條件變多的時候,就得重複撰寫條件的內容。例如我將搜尋、標籤列表與存檔網頁都視為列表類型,但實際上他們的條件判斷都不一樣,因此內容都必須重複撰寫。上面的檔案引用語法中blogger-list.css跟blogger-list.js寫了兩次,就是這個意思。
不過,如果是判斷文章內文是否顯示的時候,我會建議你直接寫在Blogger範本中。
各種類型中的文章內文顯示
預設的Blogger範本中,顯示文章內文的語法通常會這樣表示:
<div class='post-body entry-content'> <data:post.body/> </div>
其中,post.body會包含文章全部的內文。像我Blog每篇往往動輒二、三千字,一個列表網頁展示個十篇文章左右的數量,文章內文就會大到難以下載。
因此我建議只有在首頁、文章跟靜態網頁這三種網頁類型的時候才顯示文章內文。語法如下:
<div class='post-body entry-content'> <b:if cond='data:blog.url == data:blog.homepageUrl'> <data:post.body/> </b:if> <b:if cond='data:blog.pageType == "item"'> <data:post.body/> </b:if> <b:if cond='data:blog.pageType == "static_page"'> <data:post.body/> </b:if> </div>
在上面各種網頁類型需求中,我對首頁的需求是想要文章內文只顯示摘要。如果你有用Blogger預設的語法來插入繼續閱讀的摘要點,那麼這樣子就足以讓他在首頁時只顯示摘要。如果你跟我一樣,不習慣每次寫文章都還要手動設定摘要點,那麼你可以用我之前寫的JavaScript自動摘要程式看看。
結語
經過這一串的研究與改造之後,希望「布丁布丁吃什麼?」blog能帶給大家更好的瀏覽體驗。不過與其說是對大家好,不如說是對我自己的需求來改善。因為我常常需要回頭找blog寫過的東西,但是以前沒有針對網頁類型判斷的時候,過大的網頁內文量總是會讓網頁讀到快當掉,令我非常難過。現在讀取速度應該是比較好了吧?不知道大家的看法如何呢?
歡迎一起討論Blogger Hack的技巧吧!
(more...)
Comments