7/18/2018

讓 Blogger 官方 RWD 範本側邊欄小工具能預設展開

讓 Blogger 官方 RWD 範本側邊欄小工具能預設展開

A+
blogger-official-rwd-template-sidebar-widget-expand.jpg-讓 Blogger 官方 RWD 範本側邊欄小工具能預設展開去年 Blogger 官方推出的 RWD 範本,側邊欄工具的設計我覺得有一點比較沒彈性,全部預設都是關閉的狀態,所以使用「樹狀標籤 V2」的讀者曾反應,希望小工具的內容預設為開啟的狀態。

當時解決的方法是在程式碼單獨處理,但這個作法無法套用到每個小工具,因此本篇提供比較好的作法。

(圖片出處: pixabay.com)


一、側邊欄小工具


點擊 Blogger 官方 RWD 範本的側邊欄選單按鈕,將側邊欄展開後,大致就像下圖這樣:

blogger-official-rwd-template-sidebar-widget-expand-1.jpg-讓 Blogger 官方 RWD 範本側邊欄小工具能預設展開


每個小工具都要額外再點一次,才能看到展開後的內容,就像下圖的「網誌存檔」工具:

blogger-official-rwd-template-sidebar-widget-expand-2.png-讓 Blogger 官方 RWD 範本側邊欄小工具能預設展開


這樣的設計有這些缺點:

  • 側邊欄小工具數量很多時,對訪客的操作就不是很友善了
  • 站長應該可以選擇哪些小工具預設為展開狀態,讓訪客直接看到重要的內容,例如熱門文章、關於我等等
  • 不能自訂哪些展開、哪些收合,會失去管理的彈性,也讓站長無法將側邊欄最佳化



二、修改範本


當初在「Blogger 推出全新自適應 RWD 官方範本及佈景主題,並支援行動裝置」有提到:

官方的設計明顯希望站長們不要動這個 RWD 範本,預設的效果就放手去接受它吧

同時我也強烈建議別修改官方 RWD 範本,免得改壞後更慘。

不過好消息是,修改本篇這個功能的方法還算簡單,也不會有不好影響,請按以下流程照做即可。

1. 準備動作

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


2. 小工具標題

blogger-official-rwd-template-sidebar-widget-expand-3.png-讓 Blogger 官方 RWD 範本側邊欄小工具能預設展開

從後台 → 版面配置 → 可看到小工具的標題字串

把字串紀錄下來,例如上圖的「網誌存檔」。


3. 修改範本

後台「主題」→「編輯 HTML」,游標點進範本區塊,按 Ctrl-F 搜尋小工具的標題字串,例如 "網誌存檔":

blogger-official-rwd-template-sidebar-widget-expand-4.jpg-讓 Blogger 官方 RWD 範本側邊欄小工具能預設展開

找到這個小工具的區塊後,注意上圖紅框這一行 (<b:includable id='main'...),點擊這一行左側的三角形圖示,將此行展開。


blogger-official-rwd-template-sidebar-widget-expand-5.jpg-讓 Blogger 官方 RWD 範本側邊欄小工具能預設展開

找到紅框處的字串:

cond='data:view.isArchive'

這字串的意思是:「小工具的狀態為封存」,也就是收合的狀態。

修改的方式很簡單,加上一個邏輯運算元 "!",就可讓小工具變成不是封存的狀態,也就是展開了。

請將以上字串改為以下:

cond='!data:view.isArchive'

如有其他小工具要預設為展開,按照以上流程一一處理即可,儲存後即可看到效果。


2018.10.26 補充:

經留言 #1 讀者回報,才發現「標籤」小工具的程式碼不太一樣,在原本應是 "data:view.isArchive" 的地方,顯示的程式碼為 "data:view.isLabelSearch"。

解決方法為同樣原理,將 "data:view.isLabelSearch" 改為 "!data:view.isArchive" 即可,若其他小工具有類似情形,可試著先用此方法處理。


更多 Blogger 小技巧:
如這篇文章對你有幫助,歡迎「分享」或給我個讚:

3 則留言:

  1. Wayne Fu 大大您好,我接下來是這部分的預設展開的問題~

    https://grammaticalresearch.blogspot.com/search/label/%E6%B8%AC%E8%A9%A6-%E7%9F%AD%E6%96%87%E6%B8%AC%E8%A9%A6

    ↑點了文章的分類或是文章上的標籤後所進到的這個頁面,不知道大大知不知道這個頁面的ID名稱叫什麼?

    我在後台裡面把關鍵字的 cond='data:view.isArchive' 和 <b:includable id='main'... 這兩個部分全都翻遍了,還是找不到這個頁面的右側欄位設定...Orz

    一進到這個頁面,原本設定開啟的文章分類小工具,在這裡是預設的狀態,我想讓他這頁面的文章分類小工具的預設也可以是展開的狀態。

    回覆刪除
    回覆
    1. 你好,研究了一陣,找到解法了,請參考「2018.10.26 補充」的內容。

      刪除
    2. 謝謝Wayne Fu 大大,更改後,跟標籤小工具有關的地方確定都是打開的狀態了。^^

      刪除

張貼留言注意事項:

◎ 勾選「通知我」可收到後續回覆的mail!
◎ 請在相關文章留言,與文章無關的主題請至「Blogger 中文論壇」。
◎ 提問若無法提供足夠的資訊供判斷,可能會被無視。建議先參考這篇「Blogger 提問技巧及注意事項」。
◎ CSS 相關問題非免費諮詢,建議使用「Chrome 開發人員工具」尋找答案。
◎ 手機版相關問題請參考「Blogger 行動版範本的特質」→「三、行動版範本不一定能執行網頁版工具」。
◎ 非官方範本問題、或貴站為商業網站,請參考「Blogger 免費諮詢 + 付費諮詢
◎ 若留言要輸入語法,"<"、">"這兩個符號請用其他符號代替,否則語法會消失!
◎ 為了過濾垃圾留言,所有留言不會即時發佈,請稍待片刻。
◎ 本站「已關閉自刪留言功能」。

TOP