:::

Blogger範本之網頁類型(pageType)應用

6月 22, 2011 , 12 Comments Edit Post

image

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 == &quot;item&quot;'>
這段文字會出現在item網頁類型。
</b:if>
<b:if cond='data:blog.pageType == &quot;index&quot;'>
這段文字會出現在index網頁類型。
</b:if>

其中「&quot;」是指「雙引號"」的脫逸化後的字串,同等於雙引號。只是在Blogger範本處理過程中,會自動將雙引號換成&quot;。大家在使用的時候請不要覺得奇怪喔。

區隔index中的首頁與其他網頁

預設的網頁類型雖然有四種,但是index類型包含了首頁、搜尋與列表,這樣的混雜令人難以使用。

舉例來說,我會希望我的Blogger首頁顯示文章內文摘要、而搜尋跟標籤(label)列表只要顯示標題就好。就像下表左右兩張圖的區別一樣。但是光用網頁類型卻無法區隔這兩者的差別。

image image

首頁

搜尋、標籤列表

其實,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 == &quot;index&quot;'>
    <b:if cond='data:blog.url == data:blog.homepageUrl'>
        這是首頁。
        <b:else/>
        這是搜尋或標籤列表。
    </b:if>
</b:if>

於是這樣子,我們就能夠分辨清楚首頁與搜尋、標籤列表這兩種類型的網頁了。

重新歸類網頁類型

除了原本的四種網頁類型之外,上述的方法又可區分出首頁與搜尋、標籤列表這兩種類型。但對我來說,實際上我只把Blogger的網頁類型區分成四種:首頁、列表、文章、靜態網頁。以下一一敘述其情境、需求,以及Blogger範本語法的用法。

首頁

image

首頁,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>
列表

image

列表是使用搜尋功能、瀏覽標籤以及網頁存檔的時候顯示的文章列表。雖然Blogger把首頁跟搜尋、標籤列表混在一起當做index網頁類型,但實際上,我們使用搜尋、標籤跟網頁存檔的時候,通常會因為單一頁面顯示太多篇文章,導致網頁讀取速度太慢。而此時使用者專注於搜尋,導覽列裡一些小工具也不需要顯示或執行,以免拖慢網頁速度。

我以前常常覺得Blogger內建的搜尋速度實在是太慢,這是因為搜尋頁面中會顯示的文章太多,加上圖片讀取、JavaScript執行的時間,就算是Google Chrome開起來也常常覺得會有即將當機的感覺。以前我能力不足,只會用JavaScript勉強修正,但現在知道怎麼利用Blogger範本之後,這個問題就迎刃而解了!

在Blogger範本中,要使用列表的條件標籤語法如下:

<b:if cond='data:blog.pageType == &quot;index&quot;'>
    <b:if cond='data:blog.url != data:blog.homepageUrl'>
        這是列表(搜尋、標籤)。
    </b:if>
</b:if>
<b:if cond='data:blog.pageType == &quot;archive&quot;'>
    這是列表(封存)。
</b:if>
文章

image

文章就是Blog單篇文章的全文。

  • 舉例網址:
    文章全文 http://pulipuli.blogspot.com/2011/06/oped.html
  • 文章數量:一篇
  • 文章內文:全部顯示
  • 導覽列預設狀態:隱藏
  • 小工具:列出全部的小工具,但延遲載入。
  • 網頁類型:item

我個人不喜歡閱讀文章時,旁邊還有一串導覽列,造成文章閱讀起來容易分心、還佔了版面的位置。所以我希望能在文章類型的頁面中隱藏導覽列,讓使用者能專心閱讀。

Blogger範本中可以直接用blog.pageType來偵測文章的網頁類型,語法如下:

<b:if cond='data:blog.pageType == &quot;item&quot;'>
    這是文章。
</b:if>
靜態網頁

靜態網頁通常是放一些長期顯示的訊息,例如詳細的「關於我」介紹、「與我聯絡」的細節。我目前並沒有使用靜態網頁,因為我覺得隨著時間一次又一次建立的網頁典藏比較有趣。因此,下面只是我推測靜態網頁可能的情境與需求而已:

  • 文章數量:一篇
  • 文章內文:全部顯示
  • 導覽列預設狀態:顯示
  • 小工具:列出全部的小工具。
  • 網頁類型:static_page

Blogger範本中也可以直接用blog.pageType來偵測靜態網頁的網頁類型,語法如下:

<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
    這是靜態網頁。
</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 == &quot;index&quot;'>
    <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 == &quot;archive&quot;'>
    <!-- 載入列表的樣式檔與腳本檔 -->
    <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 == &quot;item&quot;'>
    <!-- 載入文章的樣式檔與腳本檔 -->
    <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 == &quot;static_page&quot;'>
    <!-- 載入靜態網頁的樣式檔與腳本檔 -->
    <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 == &quot;item&quot;'>
        <data:post.body/>
    </b:if>
    <b:if cond='data:blog.pageType == &quot;static_page&quot;'>
        <data:post.body/>
    </b:if>
</div>

在上面各種網頁類型需求中,我對首頁的需求是想要文章內文只顯示摘要。如果你有用Blogger預設的語法來插入繼續閱讀的摘要點,那麼這樣子就足以讓他在首頁時只顯示摘要。如果你跟我一樣,不習慣每次寫文章都還要手動設定摘要點,那麼你可以用我之前寫的JavaScript自動摘要程式看看。


結語

經過這一串的研究與改造之後,希望「布丁布丁吃什麼?」blog能帶給大家更好的瀏覽體驗。不過與其說是對大家好,不如說是對我自己的需求來改善。因為我常常需要回頭找blog寫過的東西,但是以前沒有針對網頁類型判斷的時候,過大的網頁內文量總是會讓網頁讀到快當掉,令我非常難過。現在讀取速度應該是比較好了吧?不知道大家的看法如何呢?

歡迎一起討論Blogger Hack的技巧吧!

總共12 則留言, (我要發問)

  1. 請問大大
    有沒有辦法修改標頭(header)的超連結,目前預設都是回到blogspot的網誌頁面,我想要修改超連結的網址或是讓超連結失效不知是否有辦法達到?

    回覆刪除
  2. To gibsonsg61re:

    把範本中以下程式碼:

    <a expr:href='data:blog.homepageUrl'><data:title/></a>

    去掉a標籤之後:

    <data:title/>

    就可以取消標頭的超連結了

    回覆刪除
  3. 不好意思我想請教一下^^
    想請問有沒有辦法將首頁變更為某篇指定標籤文章or網頁呢?

    回覆刪除
  4. To 7樓匿名,

    預設首頁的輸入資料會是最新日期排序下來

    要改的話,我想應該只能從程式碼,使用JavaScript去load某個page或label來做剖析吧。
    例如像是插入最新文章列表:http://pulipuli.blogspot.tw/2009/04/bloggerjquery.html

    我最近也剛好想要大改blog首頁,我不想要首頁進來看到的是一篇一篇文章,想要做得比較像是個人的網頁這樣

    回覆刪除
  5. 沒錯就是想像個人網頁那樣o_O
    目前是使用隱藏最底下的首頁較新較舊文章&顯示一篇文章來達成XD
    期待您研究成功XD

    回覆刪除
  6. To 9樓匿名,

    好的,等我研究出一些結果……
    這個Blog的首頁就會大改了XD

    回覆刪除
  7. 請問若要指定某一頁當首頁要如何做呢
    Blogger預設首頁是以文章列表
    但我想製作一個網頁指定預設是首頁
    謝謝

    回覆刪除
    回覆
    1. To Polin:

      有兩個做法,一個比較難,另一個比較簡單。

      a. 困難做法:條件判斷

      <div class='post-body entry-content'>
          <b:if cond='data:blog.url == data:blog.homepageUrl'>
              <!-- 這邊寫上首頁才能夠顯示的網頁 -->
          </b:if>
          <b:else/>
              <!-- 這邊寫上正常運作的網頁內容 -->
          </b:if>
      </div>

      這是最徹底的方法。但如果你看不懂Blogger範本組成方式的話,那我不建議這樣做。

      b. 簡單做法:跳轉

      <b:if cond='data:blog.url == data:blog.homepageUrl'>
          <meta http-equiv="refresh" content="0;url=<你指定要跳轉的網址>" />
      </b:if>

      這段程式碼請插入在</head>之前即可。
      這樣子的話,只要來到首頁的時候,都會被強制跳轉到你所指定的網址。
      這樣方法對SEO不太好,搜尋引擎會覺得奇怪。但是設定簡單,所以推薦你使用。

      刪除

留言工具: