2010年12月25日 星期六

-步驟-Blogger 動態版型,瀏覽文章時讓左/右側邊欄消失,以文章區塊填滿側邊欄
conditional hide left/right sidebar and expand post width - my Blogger template tweak, using Picture Window

-- 2011.01.25 更新:請不要採用本文,改用更簡便的方式達成同樣的功能,參考這篇新發表的文章「-步驟-新作法!Blogger 動態版型,讓左/右側邊欄消失,以文章區塊填滿側邊欄(使用 b:if 條件式,無 javascript)」。
--

Blogger 預設的樣板版型,預設的情況下,不管瀏覽哪一頁,layout 都是一模一樣,當然,絕大多數的 blog 系統,也都是這樣子的。

不過,對於習慣自己用 Adobe Dreamweaver 從零開始打造 HTML 網站的人來說,一個網站的首頁跟內頁,有不同的表達重點,因此,也會有不同的 layout ,是很天經地義的事情。這種時候,用 Blogger 的樣板,難免會有點不能適應(或者說不太滿足)。

以我自己來說,我希望我的網誌樣板擁有的功能,除了之前提到的 -步驟-部落格改版之背景圖片,首頁使用大圖,內頁使用小圖並放大文字 之外,還能夠具備這些特徵:



  1. 三欄式的樣板中,左側邊欄放一些「關於作者」跟「關於本站」的小工具,像是站台統計、google friend connect、訂閱按鈕、作者介紹與相關連結等。右側邊欄則放一些跟「文章內容」有關的小工具,像是熱門文章、分類標籤、最新回應、著作權聲明等。
  2. 瀏覽首頁跟 pages 固定頁面的時候,只顯示左側邊欄。瀏覽文章內容、文章索引的時候,只顯示右側邊欄。首頁的時候,則是全部都顯示。

其中,第一項功能,只要在 page elements 頁面中,拖曳小工具的框框,就可以完成。但是,第二項功能,卻複雜的多,原本想到的實作方式有三種:

  • 用一個 b:if 條件式,把側邊欄的東西包起來,一網打盡。

    研究結果:由於,Blogger 系統的條件式,只能放在小工具內部,不能直接放在外部的 html 標籤中,如果要這樣做,就必須把左側邊欄的小工具統統收集到一個「父」小工具內,但是,Blogger 系統的小工具又不支援嵌套功能,總而言之,言而總之,就是不可行的意思。
     
  • 用一段 javascript ,把側邊欄的 div 標籤整個設定為不顯示。

    考量:這樣做的話,等於是要對使用者的瀏覽器做兩件事情,先是把側邊欄的全部的資料,統統都丟給人家,然後在大約半秒鐘到一秒鐘(視網路速度跟電腦性能而定)以後,再讓這些剛顯示出來的資料消失不見。這樣子,在視覺上,好像會有一種看到鬼的感覺,而且,有點浪費地球資源,對網路不順的人來說也蠻不體貼的。
     
  • 用一堆 b:if 條件式,把側邊欄的每一個小工具,都設定條件式隱藏。

    考量:可以確實的減少浪費頻寬的行為,缺點是要一個一個設定小工具很麻煩。

最後,我選擇使用第三種方法,也就是 Blogger 系統的 b:if 條件式,來隱藏側邊欄的內容,再用 javascript 小工具,把文章區塊的寬度變大,以便填滿側邊欄消失後的空白區域。結果像這樣:

在首頁時,三欄全部顯示(並且使用大張的部落格背景圖片,實作方法請見這篇 -步驟-部落格改版之背景圖片,首頁使用大圖,內頁使用小圖並放大文字

在文章頁面,隱藏左側邊欄,並且用文章區塊填滿

在固定頁面,隱藏右側邊欄,並且用文章區塊填滿

樣板功能:在首頁之外的頁面,隱藏左/右側邊欄,並且用文章區塊填滿


  1. 首先,為了等一下修改樣板的工作,預先準備一下,到 Blogger 後台的 design 的 page elements 頁面中,把左側邊欄的小工具,按「編輯」,在小工具的 title 中加入一串怪怪文字,每個小工具都要加,比方說 keroro1 ,keroro2 ,keroro3 ... 等。
     
  2. 切換到 edit html 的頁面,將 Expand Widget Templates 打勾,展開樣板中的小工具程式碼,然後按 Ctrl + F 搜尋 keroro,會找到類似這樣的東西:

    <b:section-contents id='sidebar-left-1'>
    <b:widget id='Profile1' locked='false' title='About Me keroro1' type='Profile'>
    <b:includable id='main'>
        <b:if cond='data:title != ""'>
          <h2><data:title/>
     
  3. 在 <b:includable id='main'> 的前一行,插入這段條件式的程式碼:(紅色字為插入的部份)

    <b:section-contents id='sidebar-left-1'>
    <b:widget id='Profile1' locked='false' title='About Me keroro1' type='Profile'>

    <b:includable id='main'>
    <b:if cond='data:blog.url == data:blog.homepageUrl'>
    <b:include name='content'/>
    </b:if>

    <b:if cond='data:blog.pageType == "static_page"'>
    <b:include name='content'/>
    </b:if></b:includable>

    <b:includable id='main'>
        <b:if cond='data:title != ""'>
          <h2><data:title/>

    第一段紅字的意思是「當目前的網址等於部落格首頁時,顯示小工具的內容」。第二段的意思則是「當目前頁面的類型屬於 static_page 也就是固定頁面的時候,顯示小工具的內容」。

    兩個加起來,就是「在首頁跟固定頁面才會顯示,其他的地方都不會顯示」的意思。
     
  4. 接著,把原本的 main 外掛的識別身份,改成 content,然後記得把剛才暫時加入的 keroro 刪掉,變成這樣:(紅字是修改的部份)

    <b:section-contents id='sidebar-left-1'>
    <b:widget id='Profile1' locked='false' title='About Me keroro1' type='Profile'>

    <b:includable id='main'>
    <b:if cond='data:blog.url == data:blog.homepageUrl'>
    <b:include name='content'/>
    </b:if>

    <b:if cond='data:blog.pageType == "static_page"'>
    <b:include name='content'/>
    </b:if>
    </b:includable>

    <b:includable id='content'>
        <b:if cond='data:title != ""'>
          <h2><data:title/>
      
  5. 到這邊,第一個小工具的條件式隱藏,就處理完成了。

    接下來重複步驟 2 到步驟 4 ,把左側邊欄的其他小工具也做同樣的設定。

    完成後,在首頁跟固定頁面之外的地方,左側邊欄會消失,留下一塊空空如也的區域,當然不能浪費這個空間啦,所以接著要實作出「當左側邊欄消失時,用文章區塊填滿測邊欄所留下的空白區域」。
     
  6. 回到 Blogger 後台的 Design 的 Page Elements 頁面,在頁尾 footer 的區段,按「新增小工具」,然後選擇 html / javascript 小工具。
     
  7. 小工具的 title 一樣先設定一串怪怪文字,例如 giroro ,內容則貼上這段程式碼:

    <script type="text/javascript">
    $(".columns").css("padding-left","0");
    $(".column-left-outer").css("width","0");
    </script>

    這段 javascript 的意思是,讓 css 的類別 class 屬於 columns 的 html 元素,左側的內距設定為 0 。同時,類別是 column-left-outer 的元素,寬度也跟著歸零。

    在 Blogger 預設的樣板中,中間的直欄的 css 類別,就是設定為 columns,而這個 .columns 的框框,原本寬度就是 100%,也就是會佔滿整個版面百分之百的寬度。所以,左右側邊欄的位置,其實是藉著將 .columns 的左、右內距加寬,而讓出位置來。現在,既然左側邊欄的內容都藏起來了,當然也沒有必要繼續為它們留下空位,於是,就大大方方的把左邊的內距 padding-left 設定為 0 ,讓文章內容可以佔據更多的空間。

    而 .column-left-outer 則是原本裝著左側邊欄小工具的容器,既然已經沒有東西要放在裡面,容器的寬度也可以歸零了(不然有時後會跑出一些靈異的效果來)。
     
  8. 切到 edit html ,勾選 Expand Widget Templates ,Ctrl + F 搜尋 giroro,找到類似像這樣的一段文字:

    <b:widget id='HTML3' locked='false' title='giroro' type='HTML'>
    <b:includable id='main'>
      <!-- only display title if it's non-empty -->
      <b:if cond='data:title != ""'>
    ... ... ...
     
  9. 在 <b:includable id='main'>的前一行,插入這些紅色的字:

    <b:widget id='HTML3' locked='false' title='giroro' type='HTML'>
    <b:includable id='main'>
    <b:if cond='data:blog.url != data:blog.homepageUrl'>
    <b:if cond='data:blog.pageType != "static_page"'>
    <b:include name='content'/>
    </b:if>
    </b:if>
    </b:includable>
    <b:includable id='main'>
      <!-- only display title if it's non-empty -->
      <b:if cond='data:title != ""'>
    ... ... ...

    注意到了嗎?這邊的條件式,跟前面的讓左側邊欄顯示的條件式「恰恰相反」,同樣的 if 句子, ==  等於 卻換成了 != 不等於。也就是說,左側邊欄「沒有顯示」的時候,這個小工具「才會」啟動,用 javascript 將中間直欄的版面區塊往左擴張。
     
  10. 將暫時取名的 giroro 刪除,原本的 main 外掛改名:

    <b:widget id='HTML3' locked='false' title='giroro' type='HTML'>
    <b:includable id='main'>
    <b:if cond='data:blog.url != data:blog.homepageUrl'>
    <b:if cond='data:blog.pageType != "static_page"'>
    <b:include name='content'/>
    </b:if>
    </b:if>
    </b:includable>
    <b:includable id='content'>
      <!-- only display title if it's non-empty -->
      <b:if cond='data:title != ""'>
    ... ... ...
      
  11. 到這裡,「左側邊欄在內頁隱藏、並且文章的版面擴張」的功能,就差不多完成了,但是,讓版面擴張的 javascript 還不會起作用,因為這是使用 jQuery 懶人框架所撰寫的 javascript,程式碼中的 $ 錢記號,就是 jQuery 的縮寫。所以,最後就來加上 jQuery 的框架功能。
     
  12. 在 page elements 的頁尾 footer 區段,再次按下新增小工具,也是選 html / javascript ,內容貼上:

    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>

    注意這個 jQuery 小工具,一定要放在其他有使用到 jQuery 的 javascript 小工具的「上面」,才會發生作用。
     
  13. 到這邊,左側邊欄的部份就大功告成了!
     
  14. 右側邊欄的部份,我是設定成「在固定頁面,隱藏右側邊欄,並且將文章區域向右擴大」,實作的方式跟左側邊欄一樣,請針對右側邊欄,進行步驟 1 到步驟 10 的操作。其中,有幾個不一樣的小地方:

    • 步驟 3 插入的文字,改成:

      <b:includable id='main'>
      <b:if cond='data:blog.pageType != "static_page"'>
      <b:include name='content'/>
      </b:if>
      </b:includable>
       
    • 步驟 7 的程式碼,則改成:

      <script type="text/javascript">
      $(".columns").css("padding-right","0");
      $(".column-right-outer").css("width","0");
      </script>
       
    • 步驟 9 插入的文字,改成:

      <b:includable id='main'>
      <b:if cond='data:blog.pageType != "static_page"'>
      <b:include name='content'/>
      </b:if>
      </b:includable>
       
    最後記得 javascript 一樣要放在 jQuery 的下方。
     
  15. 就這樣,雖然辛苦,但是總算也完成囉!有沒有覺得從 Blogger 的 template 中學到許多東西呢? ^_^