2010年12月28日 星期二

-步驟-Blogger 調整文章外掛的顯示時機,讓 LinkWithin 相關文章小工具只在單篇文章中顯示
conditional hide LinkWithin widget - my Blogger template tweak, using Picture Window

Blogger 系統中,並沒有內建「相關文章」功能。相關文章對於作者跟讀者來說,都大有好處,一方面,幫助讀者在看完有興趣的文章後,意猶未盡之餘,不用花力氣去尋找,就能快速便利的跳到下一篇他所感興趣的主題。而對於作者來說,不管是幾年前寫的遠古舊文,都有機會被挖出來曬太陽,不會埋沒在時間的灰燼之中。

相關文章是如此的重要,所以即使沒有內建,也有一堆外掛可以用,我採用的是很受歡迎的 LinkWithin (會知道有這外掛,是因為常常收看 電腦玩物雨狗 部落格的關係... 哈)。LinkWithin 的外觀非常漂亮,就像小型的廣告看板似的,幫我們的舊文章打廣告。

不過,圖文並茂的 LinkWithin ,難免會佔掉不少螢幕空間,我希望它在讀者需要「快速掃過頁面」時,不要出現,只有在靜下心來看文章時才出現。



樣板功能:讓 LinkWithin 外掛工具只在單篇文章中顯示


文章列表 index 中隱藏相關文章外掛 LinkWithin


LinkWithin 的隱藏功能,是利用先前提過的 Blogger Tags 中的 b:if 標籤 來達成。

  1. 首先要安裝 LinkWithin ,到 LinkWithin 的網站取得屬於你自己的相關文章小工具,依照說明將它拖曳到「網誌文章」小工具的下面。

    安裝並不需要註冊任何帳號,只要單純的填好網誌資料、取得程式碼就好,設計的非常的貼心。如果對安裝步驟不熟悉,可以參考這篇重灌狂人的教學:
    LinkWithin 用縮圖顯示部落格「相關文章」
     
  2. 安裝完成後,先在 page elements 的畫面中,針對 LinkWithin 小工具,按下 Edit 編輯,把它的 title 暫時設定為 keroro ,以方便在程式碼中搜尋。
     
  3. 設定好後,切到 edit html 的畫面,把 Expand Widget Templates 勾選起來,然後 Ctrl + F 搜尋 keroro,會找到像這樣的文字:

    <b:widget id='HTML1' locked='false' title='keroro' type='HTML'>
    <b:includable id='main'>
    ... ... ...
     
  4. 插入這段文字,變成這樣:(紅色部份是插入的字)

    <b:widget id='HTML1' locked='false' title='keroro' type='HTML'>
    <b:includable id='main'>
    <b:if cond='data:blog.pageType == "item"'>
    <b:include name='content'/>
    </b:if>
    </b:includable>
    <b:includable id='main'>
    ... ... ...
      
  5. 然後修改這裡:

    <b:widget id='HTML1' locked='false' title='keroro' type='HTML'>
    <b:includable id='main'>
    <b:if cond='data:blog.pageType == "item"'>
    <b:include name='content'/>
    </b:if>
    </b:includable>
    <b:includable id='content'>
    ... ... ...
     
  6. 存檔後,就完成了「這個小工具在屬於 index 索引類型的頁面,也就是會秀出多篇文章的頁面中,不會顯示」的功能。

我們所插入的程式碼中,有一段條件式寫著「data:blog.pageType == "item"」,意思就是「當這一頁的頁面類型,屬於 item 單項類型的時候,顯示後面這個外掛」。

這個 item 頁面類型,指的是網誌中的「單篇文章」頁面。Blogger 系統中的 pageType 共有四種,官方的說明文件,對於 pageType 的定義並沒有詳細解說,也讓我困擾了好一陣子,於是研究之後,寫了這篇文章跟各位同好分享:
圖解:利用網址分辨 Blogger 沒有告訴你的 pageType 定義

至於步驟 5 中,把原本寫著 id='main' 的文字,改成了 id='content' ,如果讀者有逛到其他篇同樣有使用條件式的文章的話,就會常常看到類似的步驟。

這麼做的原因是,就如同先前在這篇文章「圖解:Blogger 新樣板系統的 html 頁面結構 」中的第三張圖所描述的,一個 widget 裡面,只能有一個 main includable,也只會顯示這個 main includable。第二個以後的 includable,要在 main 裡面,使用 include 語法,將第二個 includable 的內容抓進 main 裡面。

為了讓條件式的結構變得簡潔,我們在 widget 中加入條件式的時候,並不是直接去疊加在原本的 main includable 的內容之上,而是把要加入的條件式,單獨寫成一個新的 main includable,其中包含了指向 'content' includable 的語法。然後,原本的 main 則改名為 content,這也就是步驟 5 的用意所在。

以上,自己動手改 Blogger 成功的經驗,是不是很有成就感呢?

2 則留言:

  1. 謝謝您提供分享,幫助很大~~^^
    另外提供一招:把<b:includable id='main'>...</b:if>之間插入

    <b:if cond='data:blog.pageType == "item"'>
    <data:content/>
    </b:if>

    這樣比較直覺一點 :P

    回覆刪除