IT-Rush聯盟休閒生活爆發網: logger 版面配置切割任意欄位的技巧

2019年5月12日星期日

logger 版面配置切割任意欄位的技巧

Blogger 版面配置切割任意欄位的技巧﹍方便安裝小工具

最近進行 WFU BLOG 改版，需要在新版型上切出一些欄位，來安裝小工具。如果使用官方範本，那麼這是很簡單的事，後台就有各種的欄位樣式可以選擇，看要將區塊切成 2 等分或 3 等分都行。

如果熟悉 CSS 的話，自己切版也很容易，而缺點就是切出來的區塊無法安裝小工具，只能將所有程式碼塞在範本中，造成日後管理的麻煩。

那麼本篇就來紀錄如何 Hack 範本，達到以上的需求。

一、官方範本切割欄位
後台主題 → 自訂 → 版面配置，可看到下圖畫面：

這裡可以選擇版面的切割方式，例如選擇紅框處，就能將頁尾切割成等比例的三個欄位，各自都能新增小工具。

二、自己切版的缺點
使用 CSS 我們自己也可切割版面，例如要將某個區塊切成 3 等分的欄位，只要設定 width: 33.3%，然後看要不要加上 float:left。

但這樣的方式，日後想要調整內容、或是新增外掛時，都得進入範本中編輯，其實沒有那麼直覺、方便。

以 WFU BLOG 目前的頁尾為例，長得像這樣：

注意到紅框處的 "編輯圖示" 按鈕了嗎？這三個區塊是使用官方版面配置功能產生的，所以不用到後台，在頁面上就能直接編輯小工具，對於日後管理、調整清單內容非常的方便。

上面是這個頁尾 3 等份欄位，在後台版面配置的示意圖。

官方版面配置的功能是很方便沒錯，但問題來了：

如果我想切成 3 等分的區塊，不是在頁尾，要怎麼做呢？
我沒有要切成 3 等分，只想產生一個區塊能自行新增小工具，又要怎麼做呢？

三、製作滿版欄位
1. 提醒事項

本文接下來的操作都很危險，建議非常熟悉修改 Blogger 的讀者再進行。

在修改範本之前，如果第一次安裝本站工具的讀者，建議先閱讀「備份範本的訣竅」系列文章。

2. 100% 寬度欄位

在網頁上切割出一個區塊，佔用 100% 寬度，且能增加官方小工具，這件事比較簡單一些。

在範本中自訂的位置，新增以下程式碼即可：

<b:section class='自訂字串' id='自訂字串' showaddelement='yes'/>

將 "自訂字串" 改成你想使用的英數組合字串即可。

儲存後，在後台的版面配置，就可看到這個新增的欄位了。

3. 範例

就像本站首頁，導覽列下方的輪播區塊，就是使用這個方法做出來的。

四、切割任意等分欄位
要等比例切割欄位，就非常複雜了，以下操作請非常小心，別把範本搞壞了。

1. 官方巨集程式碼

如果是官方範本，一定會有以下這一大段程式碼：

<macro:includable id='sections' var='col'>
.
.
.
</macro:includable>

如果你的範本沒有，請開個新網站，把官方範本這段程式碼複製過來，位置可貼在 </body> 的後面。

2. 新增區塊

接著在範本中，你想要新增等比例欄位的自訂位置，加入以下程式碼：

<macro:include id='test-sections' name='sections'>
<macro:param default='2' name='num' />
<macro:param default='test' name='idPrefix' />
<macro:param default='test' name='class' />
</macro:include>

藍字 test 請改成自訂字串
紅字 2 請改成你要切的欄位數
改完後先別儲存，否則你一定會後悔的，請繼續下個動作。

接著將以下程式碼，放在範本中 </html> 之前：

<b:section-contents id='test-1' />
<b:section-contents id='test-2-1' />
<b:section-contents id='test-2-2' />

藍字 test 請改成自訂字串
以上可看到數字只編到 2-2，代表切成 2 個欄位。如果要切成 4 個欄位，請複製同樣的一行內容，一直續編到 2-4 即可。
完成以上所有動作後，現在可以按儲存了

3. 版面配置效果

在後台切換到版面配置的畫面，看看欄位的變化。