2007-02-16

讓側邊列 (Sidebar) 的元件只在首頁顯示/不顯示

Blogger 頁面旁邊的 Sidebar 可以加掛很多模組,但是只要塞入一個元件 (Element),在任何頁面就都一定會出現。如果在某些條件下,特定元件可以選擇顯示或不顯示,一方面畫面也可以更清爽,少讀了某些元件網頁顯示也會更快更有效率。方法很簡單,只要在元件原始碼的外面加入 if 的條件判斷句,「當在什麼頁面的時候」,才會顯示元件的內容,就可以達到這個目的了。下面整理修改的範例,還有幾個常見的判斷條件。

首先,打開範本 (Template) 的完整 HTML 編修模式 (要展開 Widget),找 <b:widget ...> 開頭 </b:widget> 結尾的區段,這樣一個區段就代表一個元件,這個元件的 id, title 和 type 有助於瞭解到底是那個元件。舉個例子,像下面這段:

<b:widget id='Profile1' locked='false' title='AUTHOR PROFILE' type='Profile'>
  <b:includable id='main'>
     <b:if cond='data:title != ""'>
     ............. (程式內文略過不表)
  </b:includable>
</b:widget>

就是一個顯示作者個人資料 (Profile) 的元件,如果我希望到了內頁,也就是單篇文章完整顯示的頁面時,不要顯示這個個人資料的元件,我只要在元件的區段內塞入一個 if 的條件判斷句,就可以輕易地顯示或隱藏元件了。例如:

<b:widget id='Profile1' locked='false' title='AUTHOR PROFILE' type='Profile'>
  <b:includable id='main'>
  <b:if cond='data:blog.pageType != "item"'>
     <b:if cond='data:title != ""'>
     ............. (程式內文略過不表)
  </b:if>
  </b:includable>
</b:widget>

只要塞入兩行,像是上面範例的紅色那兩行判斷句就行了。(缺點:如果和我一樣元件樣式有外框處理的話,即使試圖把元件藏起來,外框的上緣和下緣的部分還是不能完全消失)。而那行判斷 (if cond='data:blog.pageType != "item") 的意思是:如果現在所在的頁面不是"內頁"的話,才會顯示該元件 (Profile)。只要把 != 改成 ==,判斷句就變成"只有在內頁的時候才會顯示該元件"了。這類判斷所在頁面的判斷句有幾種,整理如下:

<b:if cond='data:blog.pageType != "item"'>           (如果現在不在內頁的話)
<b:if cond='data:blog.pageType != "archive"'>        (如果現在不在 Archive 存檔頁面的話)
<b:if cond='data:blog.pageType != "index"'>          (如果現在不在 Label 標籤分類頁面的話)
<b:if cond='data:blog.url != data:blog.homepageUrl'> (如果現在不在首頁的話)

有了以上的幾種判斷句,我想不只可以控制 Sidebar 上的元件在哪種頁面顯示,任何範本裡的功能或操作也可以搭配上述條件使用,越玩真是越覺得,Blogger 你實在是太有彈性了啊!

參考文章:
如何讓某些元件只在首頁/內頁顯示
Blogger Help: Layouts Data Tags

回應: 21

dekko 提到...

對不起 可以請問一下
像這種條件判斷句可以用在css格式中嗎?
譬如說我想要在首頁的時候sidebar佔25% main wrapper佔75%
而在點進去看文章時只有main wrapper 沒有sidebar
雖然我有嘗試把你敎的那些句子打進去 但似乎沒什麼效果 還是在css中有不同的判斷句語法呢? 謝謝~

Abin 提到...

判斷式只能用在 Blogger 的樣版原始碼或 Javascript 裡面,不能用在 CSS 格式中。
但你說的需求,可以藉由樣版判斷不同條件時,套用不同的 CSS 達成。我舉個例子,樣版判斷條件句「當在首頁的時候,id=main wrapper 套用 classA 的樣式,不在首頁則套用 classB 的 CSS」,同樣的,sidebar 也可以比照修改。
因為 main wrapper 的樣式是定義在 id 裡面,這是唯一的,你應該另外拉兩個 class CSS 來指定比例,用我原文的方式來切換 Class,類似這樣:
<b:if cond='data:blog.homepageUrl != data:blog.url'>
<div id='main-wrapper' calss='A'>
...
</div>
<b:else/>
<div id='main-wrapper' calss='B'>
...
</div>
</b:if>
可是,"..." 的部分也許一模一樣,而且涵蓋了你樣版大部分的程式碼,這可是個大工程!(因為 Blogger 的樣本檢查,要求判斷式裡面的標籤一定要有開始和結束,你包的是整個 main wrapper 和 sidebar 的,那就整個 div 都要放入判斷式裡)

dekko 提到...

看起來似乎有點麻煩...我以後再試試好了
謝謝你~

芯瑀小棧 提到...

您好~我想要將文章內插入廣告, 但是要設定首頁不顯示, 但插入程式碼後, 變成整個main都消失了~
<b:if cond='data:blog.pageType !== "item"'>
<div sytle='float:right'>
<table align='right'><tbody><tr><td>
插入廣告程式碼
</td></tr></tbody></table>
</div>
</b:if>
<p><data:post.body/></p>
要怎樣才能克服這個問題呢?

Abin 提到...

To lifemirror, 我覺得是你的廣告程式碼有問題,如果程式碼裡有定義變數名稱、有用到像是 div, table, iframe 或 span 之類的標籤,又有定義他的 style,就可能影響你原來的版面。
你可以試試看是不是沒有廣告程式碼就正常,如果是,你就被迫一定要手動去調整,如果不是,可能是版面程式碼其他的地方有問題,要先釐清問題的關鍵。

匿名 提到...

貴站的文章真不錯!我也用了不少東西。
請問有沒有只讓文章區動,而側邊欄不會動,
有如一般網頁的框架。

Abin 提到...

To 賊又賊:

如果是你提到類似 frame/iframe 的架構,blogger 是不能這樣做的(不可能)。
用 frame 設計側邊的模組就沒辦法重讀更新(像是新文章模組,不能動態 refresh)、很多像是計數器、整個版面的 Javascript 宣告作用都可能錯亂故障,不但與 blogger 的起意相違背,frame 也是目前不被建議使用的標籤語法之一。
至於有沒有辦法用非 frame 的架構做出類似 frame 的效果,當然可以,不過整個模板要重新設計,算是大工程。

ShyuWei 提到...

這個真的很方便 讓版面乾淨不少 謝謝囉

ETBlue 提到...

To Abin:

太棒啦!終於找到pageType的名稱設定了!還有,原來可以用!=和==呀!終於可以照自己的意思控制了!太好了~~XDDD

好文,大推~~~ ^o^

題外話...會寫程式真好~好羨慕呀 +_+

from ET

匿名 提到...

如果我只要某些特定的內文頁面才要隱藏sidebar要怎麼做呢?!程式好難阿><

阿斌 提到...

這個功能真的很棒!!謝謝!
解決了版面有時會過長的困擾!

匿名 提到...

話說index好像不是只有管到標簽的部份耶
因為我本來想讓某元件只出現在首頁和內頁
想說那就排除index這個條件就好了吧
結果存檔一看~該元件首頁上不出來見人就算了
更詭異的是~它連在內頁的時候也整個躲起來@@

最後只好同樣的語法repeat兩次
只是一個條件等於首頁網址,一個條件等於item

Little Miss Sun 提到...

請問~有辦法做到
只有作者登入時才看得到
其他人都看不到嗎
我想隱藏的是計算日期的java語法...
謝謝^^

Abin 提到...

To Little Miss Sun:
抱歉,目前 Blogger 裡的樣板原始碼並沒有提供「作者登入判斷」的語法,所以沒辦法做類似的判斷。

MKnight 提到...

冒昧提醒:
b:if cond='data:blog.pageType != "index"'
並不是「不在 Label 標籤分類頁面」的意思喔。
「index」是主頁,不包括item與archive頁,
但包括首頁與「/search」頁,其中「/search」頁包括Label頁。

我想寫一個 b:if cond='data:blog.pageType == "index"'
但想在其中把「/search?q=」移除掉,可是不知如何指定這種搜尋頁,
所以在 Google 時路過了這裡,打擾了。
(目前仍不知如何指定「/search?q=」頁,以為可以用萬用字元:
b:if cond='data:blog.url == "http://xxx.blogspot.com/search?q="+*'
結果是異想天開……)

亦小風 提到...

作者已經移除這則留言。

亦小風 提到...

看到這篇文章真的是太棒了!
那要如何定義才能讓:在「獨立頁面」移除。(後台/文章/編輯網頁/所製作的頁面)

再請問一下,如何移除「Comment」呢?我找到語法,可是我怎麼試都去不掉。
http://atlasweng.blogspot.com/p/blog-page.html
像我這頁,雖然下方不能發佈意見,可是還是出現框框,要怎麼處理呢?感謝。

月的拉拉拉 提到...

推上面的留言

我也想知道如何在Blogger獨立頁面(獨立網頁)中移除?

Ted 提到...

To Abin:

在Blog Posts上方插入一個HTML/JavaScript,當作是置頂文章。想要讓首頁只顯示該置頂文章,其他post只在內頁出現,判斷句語法如下,結果無用。請問Blog Posts這個widget是否不適用這樣的語法?謝謝。



............. (內文語法略過)

老塞 提到...

要將判斷句用在「獨立網頁」,將判斷句關鍵字換為「static_page」即可。

http://www.tweakmyblogger.com/2010/11/about-conditional-tags.html

Serria 提到...

To Abin:

請問怎麼樣讓某個小裝置在特定標籤頁面顯示?還有在這個特定標籤的文章頁面也保持顯示,然後在其他頁面則保時關閉?

張貼留言

歡迎留言或發表意見,不過要理性不做人身攻擊。匿名的朋友得到回應的速度會比較慢喔~
發問相關的禮貌和規矩請先參考這篇文章,不當留言、和本文無關的回應可能會被直接刪除無視喔!