ETBlue 外星人吟遊地球: -步驟-新作法！Blogger 動態版型，讓左/右側邊欄消失，以文章區塊填滿側邊欄（使用 b:if 條件式，無 javascript）new method! conditional hide left/right sidebar and expand post width (using b:if tag, no more javascript!) - my Blogger template tweak, using Picture Window

2011年1月25日星期二

-步驟-新作法！Blogger 動態版型，讓左/右側邊欄消失，以文章區塊填滿側邊欄（使用 b:if 條件式，無 javascript）
new method! conditional hide left/right sidebar and expand post width (using b:if tag, no more javascript!) - my Blogger template tweak, using Picture Window

* Hi, if you are looking for an English version of this tutorial, please check the green text in this article (and throw Google Translate away)

續上一篇，之前曾經又寫了一篇「-步驟-Blogger 動態版型，瀏覽文章時讓左/右側邊欄消失，以文章區塊填滿側邊欄」，也是利用 javascript 小工具，動態的修改 css 所實作出來的。

當然，也是不用那麼麻煩。 orz

如果你很不幸的已經按照之前的作法修改樣板的話，請回到那篇文章，按照相反順序復原，然後改而採用本文所描述的方法。因為我的遜咖，給各位讀者帶來麻煩，真是不好意思 ^^b

Last month I wrote a tutorial about "conditional hide left/right sidebar and expand post width - my Blogger template tweak, using Picture Window ." I was wrong. Yesterday I found a much better way doing this, thanks to Blogger Sentral "Apply different layout/styling to static pages ." Please forget my previous article (or reverse those steps if you have already done that) and take the following steps. Sorry for misleading. ^^b

樣板功能：動態版型，在網站內頁，讓左/右側邊欄消失，以文章區塊填滿側邊欄

Template feature: conditional hide left/right sidebar and expand post width.

三欄式的首頁，有左、右側邊欄：

three-column home page:

文章頁面，將左側邊欄隱藏：

hide left sidebar in post page:

固定頁面，將右側邊欄隱藏：

hide right sidebar in static page:

實作的方式，同樣是利用 Blogger 的 b:if 系統標籤。步驟如下：

We are going to use b:if tags, just like previous post.

到 Blogger 後台的 Design > edit HTML 頁面。
go to Design > edit HTML .
按 Ctrl + F 搜尋 <body ，可以找到這段文字：
press Ctrl + F and search for "<body", you can find this:
</head>
<body expr:class='"loading" + data:blog.mobileClass'>
...
在 body expr:class='"loading" + data:blog.mobileClass' 這一行的下面，插入這段文字：（紅字是插入的部份）
insert following text just below <body ... > tag: (insert the red part)

<body expr:class='"loading" + data:blog.mobileClass'>


<b:if cond='data:blog.url != data:blog.homepageUrl'>
<b:if cond='data:blog.pageType != "static_page"'>
<style>
.columns, .fauxcolumn-center-outer {padding-left: 0 !important;}
.fauxcolumn-left-outer, .column-left-outer { display:none !important;}
</style>
</b:if>
</b:if>




<b:if cond='data:blog.pageType == "static_page"'>
<style>
.columns, .fauxcolumn-center-outer {padding-right: 0 !important;}
.column-right-outer, .fauxcolumn-right-outer { display:none !important;}
</style>
</b:if>
儲存樣板，完成！
save your template and it's done.

上面插入的程式碼總共有兩段，第一段的意思是「當目前頁面的網址，不等於部落格首頁的網址，而且，頁面類型也不是固定頁面的話，就把中央直欄的左側，設定成不留空白，同時把左側邊欄設定成不顯示。」

there are two parts in the code. the first part means "if current url do not equal to home page url, and current page type is not static_page, then set left space of the central column to zero, and do not display left sidebar."

第二段的意思是「當目前頁面的頁面類型，是固定頁面的話，就就把中央直欄的右側，設定成不留空白，同時把右側邊欄設定成不顯示。」

the second part means "if current page type is static_page, then set right space of the central column to zero, and do not display right sidebar."

跟之前的作法相比，是不是簡單很多呢？