Blogger 使用標籤模式瀏覽側邊欄小工具

之前使用手機瀏覽他人的部落格時發現的設計，將側邊欄小工具 (Widget)，例如熱門文章 (Popular posts)、網誌存檔 (Blog archive) 以及關於我 (About me) 等等，使用標籤 (Tabs) 整合在同一個區塊，點選標籤來切換顯示對應的小工具內容，而不是將小工具垂直往頁尾排列，造成頁面瀏覽需要滑很久才能到頁尾。

覺得這設計實在是相當棒，自己也想要來套用到部落格，經過一些嘗試總算是完成這樣的功能，這篇文章紀錄從不知道怎麼開始，到最後獨立完成的過程。

怎麼開始

當初在架設這一個部落格時，是採用基於 Bootstrap 這套 CSS/ HTML 框架來排板的樣板 (Template)，因此想要做標籤模式，第一個就是想到 Bootstrap 有沒有提供範例，很幸運的，Boostrap 有完整範例，另外也在 W3School 看到相關的教學。

從範例中可以了解需要兩個部分，第一部分是顯示標籤，其中 data-toggle 為 bootstrap script 所需要的資料標示，href 連結則是該標籤對應哪一個 #id 的內容控制區塊：

<ul class="nav nav-tabs">
   <li class="active"><a data-toggle="tab" href="#tab1">目前標籤</a></li>
   <li><a data-toggle="tab" href="#tab2">標籤二</a></li>
   <li><a data-toggle="tab" href="#tab3">標籤三</a></li>
</ul>

另一部分是用來放置內容，其中 id 應該會與標籤連結 href=’#id’ 對應，而 CSS 樣式表套用的 class，fade 表示是否切換時套用淡入淡出的效果，fade.in 表示目前目前淡入，完全不透明狀態。tab-pane 表示為標籤的內容控制區塊，預設消失不佔空間 (display: none)。tab-pane > active 則標示目前的標籤內容控制區塊顯示 (display: block)：

<div class="tab-content">
   <div id="tab1" class="tab-pane fade in active">
      <h3>目前標籤</h3>
      <p>Some content in current tab.</p>
   </div>

   <div id="tab2" class="tab-pane fade">
      <h3>標籤二</h3>
      <p>Some content in tab2.</p>
   </div>

   <div id="tab3" class="tab-pane fade">
      <h3>標籤三</h3>
      <p>Some content in tab3.</p>
   </div>
</div>

如何套用

大致上了解 Tab 怎麼使用後，接下來要分析原有部落格的樣板，把側邊來小工具的原始碼調整，將上節的標籤原始碼安插進去。

使用之前寫的 Blogger 版面配置標籤所介紹的方式，很快的找到側邊欄小工具的原始碼：

<b:section class='sidebar' id='sidebar' preferred='yes'>
   <b:widget id='PopularPosts1' locked='false' title='熱門文章' type='PopularPosts' mobile='no'>
      ...省略內容
   </b:widget>

   <b:widget id='BlogArchive1' locked='false' title='網誌存檔' type='BlogArchive' mobile='yes'>
      ...省略內容
   </b:widget>
</b:section>

由 Blogger 文件中了解到，我們是沒有辦法在 <b:widget></b:widget> 外層加入 <div>，來包夾建立標籤顯示區塊，因此得把這兩個放在同一個章節 (section) 的小工具 (widget)，分拆成兩個章節來放置，並且放入標籤內容控制：

<div class="tab-content">

<div id="tab1" class="tab-pane fade in active">
   <b:section class='sidebar' id='sidebar' preferred='yes'>
      <b:widget id='PopularPosts1' locked='false' title='熱門文章' type='PopularPosts' mobile='no'>
         ...省略內容
      </b:widget>
   </b:section>
</div>
      
<div id="tab2" class="tab-pane fade">
   <b:section class='sidebar' id='sidebar' preferred='yes'>
      <b:widget id='BlogArchive1' locked='false' title='網誌存檔' type='BlogArchive' mobile='yes'>
         ...省略內容
      </b:widget>
   </b:section>
</div>

</div>

然後再加入顯示標籤：

<ul class='nav nav-tabs'>
   <li class='active'><a data-toggle='tab' href='#tab1'>熱門文章</a></li>
   <li><a data-toggle='tab' href='#tab2'>網誌存檔</a></li>
</ul>

<div class="tab-content">
   ...省略上一段的程式碼
</div>

響應式網頁設計 (Responsive Web Design)

差不多已經將標籤模式給建置完成，但是在螢幕解析度寬度 (screen width) 比較大的裝置上，例如平板或是桌上型電腦上，側邊欄實質上有很大的空間可以放置小工具，而不需要特別使用標籤模式。

因此得再加工一些設定，使得在螢幕解析度寬度小於 768 px，手機 (Mobile) 的瀏覽模式下，才啟用套用標籤的排板設定，否則按照一般的垂直排板方式。

使用 Media Queries，這項 CSS3 之後支援的功能，告知瀏覽器在指定螢幕寬度下，怎麼去套用 CSS：

<style>
@media (min-width: 768px) {
   .sidebox > .nav {
      display: none !important;
   }

   .sidebox > .tab-content > .tab-pane {
      display: block !important;
      opacity: 1 !important;
   }
}

@media (max-width: 767px) {
   .sidebar h2 {
      display: none !important;
   }
}
</style>

• Line2：當螢幕最小寬度為 768px 以上時，非手機模式
• Line3-4：標籤列整個消失，不顯示不佔排版空間
• Line7-9：標籤控制區塊強迫顯示，佔據排板空間，且不透明
• Line13：當螢幕最大寬度為 767px 以下時，手機模式
• Line14-15：側邊欄小工具的標頭 <h2> 隱藏不顯示不佔排版空間

結果令人滿意。

完整程式碼

<div class='sidebox'>
   <style>
      @media (min-width: 768px) {
         .sidebox > .nav {
            display: none !important;
         }
         
         .sidebox > .tab-content > .tab-pane {
            display: block !important;
            opacity: 1 !important;
         }
      }
      
      @media (max-width: 767px) {
         .sidebar h2 {
            display: none !important;
         }
      }
   </style>
   
   <ul class='nav nav-tabs'>
      <li class='active'><a data-toggle='tab' href='#tab1'>熱門文章</a></li>
      <li><a data-toggle='tab' href='#tab2'>網誌存檔</a></li>
   </ul>
   
   <div class='tab-content'>
      <div id='tab1' class='tab-pane fade in active'>
         <b:section class='sidebar' preferred='yes' id='sidebar1'>
           <b:widget id='PopularPosts1' locked='false' title='熱門文章' type='PopularPosts' mobile='yes'>
        ... 省略小工具程式碼
     </b:widget>
        </b:section>
      </div>
   
      <div id='side-blog-archive' class='tab-pane fade'>
         <b:section class='sidebar' preferred='yes' id='sidebar2'>
            <b:widget id='BlogArchive1' locked='false' title='網誌存檔' type='BlogArchive' mobile='yes'>
               ... 省略小工具程式碼
            </b:widget>
         </b:section>
      </div>
   </div>
</div>