2015年4月27日

Blogger 自訂行動版範本實作﹍(2) 文章+側邊欄+頁尾

A+
blogger-mobile-customize-template-2接續上一篇「自訂行動版的實作」,前面說完了 "標頭"、"導覽列"、"廣告" 的部分,接下來繼續 "文章"、"側邊欄"、"頁尾" 這些區塊的實作分享。


<< 請注意!本篇文章含會員加值文章內容,需點數兌換 >>


六、文章區塊





七、文末資訊區塊及分享按鈕


1. 文末資訊區塊

雖然文章區塊有懶人包作法可以快速完成,但進入行動版頁面後,會發現文末資訊區塊怪怪的,無法跟網頁版一致:

blogger-mobile-post-footer-status

如上圖,是不是跟網頁版差很多呢?我們進入後台看看 → 版面配置 → 網誌文章 → 按「編輯」,畫面如下:

blogger-mobile-post-footer-setting

就算我們把所有選項都勾選了,結果在行動版的畫面只會出現作者、發佈日期、標籤這三項而已,這是什麼原因呢?

用「Chrome 開發人員工具」檢視之後,大部分勾選的項目,其 HTML 內容都是空白,也就是 Blogger 並未執行這些項目。

實際上,如果測試官方行動版的效果,大部分的項目也都是不會執行。WFU 的推測是,Blogger 官方為了節省行動版的載入時間,文末資訊區塊原本就是設定為不執行這些項目。(另外也可參考「讓 Blogger 在文章下方顯示作者簡介」→「一、無法顯示的原因」。)


2. 社交分享按鈕

其他項目不能顯示 WFU 覺得沒什麼關係,但社交分享按鈕是非常重要的項目,一定要想辦法顯示出來。

如同前面的圖,我們勾選了「顯示分享按鈕」後仍無法顯示的原因,比其他項目複雜,除了 Blogger 不執行分享按鈕的程式碼以外,Blogger 另外還用 CSS 把這個分享按鈕設定為隱藏(display: none),夠離奇吧!

不過這兩個原因 WFU 都已經解決了,可參考這篇「改造 Blogger 官方分享按鈕﹍新增熱門社交分享按鈕」,請詳讀全部的流程,就能在自訂行動版顯示官方分享按鈕,並新增各種熱門社交分享按鈕,包含 Line、微博(weibo) 等等。



八、側邊欄區塊


WFU 的自訂行動版向官方行動版看齊,基本上網頁版的所有側邊欄,在行動版全部取消,以加快行動裝置的載入速度。

1. 取消小工具

取消的動作很簡單,請參考「Blogger 行動版修改技巧」→「三、讓小工具出現在行動範本」,將小工具加上參數 mobile='no',就能讓小工具在網頁版顯示,而行動版不顯示了。



2. 保留小工具

只要你有一個側邊欄小工具沒有做取消的動作,那麼這個小工具就會出現在行動版的最底部;如果有多個小工具,就會全部擠在最下面,版面或許不太好看。因此行動版會出現的小工具,最好設定一下 CSS,讓版面寬度好看一些。

如果要建議保留哪些小工具的話,WFU 會傾向只留功能性的項目,例如「聯絡表單」、「關於我」等等,這是行動裝置訪客比較有可能關心的,其他的項目請讀者自行斟酌了。



九、頁尾


這是 WFU BLOG 網頁版的頁尾畫面:

wfublog-web-blog-footer

1. 改 CSS

上方的按鈕每個寬度為 48px,到了行動版由於太大粒,6 個按鈕會擠成兩排,版面比較不好看,因此行動版的 CSS 將按鈕寬度設定為 32px,保持一排 6 粒。


2. 減少 Javascript

另外,中間那一排「Alexa 排名」、「Histats」線上人數等等功能,由於需要執行外部 JS,且在行動版屬於非必要項目,因此取消這一行。


最後完成的行動版結果,大致如下圖:

wfublog-mobile-blog-footer

現在看起來換成中間的 6 個超連結字體看起來大了一些,畫面不太協調,且有些擁擠對吧?

下一篇會說明行動版最後的收尾,看看字體 CSS 如何調整、圖片尺寸最佳化、以及網站外掛在行動版如何取捨等主題。


加值文章關閉留言板功能,使用上有任何問題請用下面的表單與我聯繫:




自訂行動版系列文章:

10 則留言:

  1. Wayne Fu大您好,這篇文章聊表我對您的一點敬意,我自己也在網路上寫文章,所以深知作者的辛勞與心情,希望這篇文章能讓您增加一點點寫文動力與成就感,感謝您!
    http://www.rocknovels.com/2015/04/003wayne-fublogger.html

    回覆刪除
    回覆
    1. XDDDDDDD(覺得被逗樂了)

      雖然我們對 Wayne Fu 大的景仰都有如滔滔江水,連綿不絕,
      雖然是一篇很認真感謝的文章(應該是吧?),
      但文章一開,我還是不爭氣的大笑了。

      台灣有那麼多神,我們也有自己的「偽 ‧ 雲神」!
      (原因請見 WFU BLOG 的「網站故事」)

      刪除
    2. @李洛克, 謝謝你的撰文, 能跟 Mark、於大 排列在一起是我的榮幸,雖然自知高度還不夠就是了~~

      @Ala, 人家沒有提到 "神", 別醬害我捏~~XD

      刪除
    3. 「簡單回答,官方產生的程式碼避免去更動。這個 case 如果 debug,也許把 Blog1 還原回預設內容,再逐一加回你修改過的內容,會是比較快的流程。」

      請問該怎麼還原預設?整段刪掉嗎?

      刪除
    4. 呵呵~我看到了旁邊可以打勾還原,sorry!

      刪除
    5. 是的,"將迷你組件範本回覆為預設值" 這個項目~

      刪除
    6. 終於...甩掉判斷式遮蔽懶人包,再一次大掃除(還原)後出現了,已經一一加回。對於不擅長 debug 的我來說,透過「將迷你組件範本回覆為預設值」來個別還原是個更好的方法!太感人 T..T

      先前單獨一一查看 *.js 查無結果,
      想請問...這個方法的適用對象是否為 <bady...> 中已經流程錯亂者?

      無論如何,謝謝 ^^

      刪除
    7. good news~~

      <body> ~ </body> 代表整個網頁的內容, 還原 Blog1 只是代表將 "文章區塊" 還原為預設值. 如果全部的小工具都要還原, 得還原全部的小工具才行.

      但 <body> ~ </body> 區間還有小工具以外的內容,所以小工具以外的 code,還是得自己 debug。總之,如我備份範本系列文所提,建立範本的版本控制,會是最輕鬆的 debug 管理方法。

      刪除
    8. 嗯,會纏上 Wayne 還記得是一個不冷不熱的午後 ...,不是啦!!!n 年前因為串聯留言無法正常顯示回覆者的留言區塊,那時只有做註解的概念,Blogger 的新舊更換加上久久修改/備份範本一次,不得其門而入,幸得你跟馬克的提醒與解救。

      我的版本控制目前的方式是每一次修改完畢後,留下能正常使用的「日期-正常版」。其後,正在修改的部份,一段修改後留下「日期-v1、v2、...」,待下一回修改,如果最近一次的「日期-正常版」能恢復,就把「日期-v1、v2、...」刪除了,畢竟留下太多幾乎重複的範本,對我這種不太會除蟲的人來說,也只是鴨子聽雷。其實 Wayne 所提的範本備份概念等同系統、重要資料,甚或刷機的備份概念,只是刷機、系統備份所需的佔用容量大了許多。

      類似 EmEditor 的小工具,有比對檢查的功能。能很快找出前、後範本的不同處(http://i.imgur.com/wp8MYhQ.png),但對語法熟悉度大概只有幼幼班的我來說,利用工具找出了不同,之後呢?剩下無盡的放空跟遠目...。

      如果不影響使用,就放給它去了,哈哈!畢竟無償勞煩他人是很不好的事情,除非是一個觀念的請益或從何下手的提醒。

      btw,我看到「指標人物」想笑,不是因為內文。而是一打開乍現的標題跟圖片,讓我想起好像參加了某種儀式(呸!呸!呸!希望李洛克跟 Wayne 不要見怪)。

      刪除
    9. 是的,我目前每月備份一次,不過隨著時間過去,幾年前的版本,也會逐漸把備份只保留到剩下每半年、或每一年一個版本,跟你的概念差不多。

      也許你目前用比對工具,還無法看出可以下手的地方,但也許將來看得懂,所以備份一定有他的作用在 :)

      不過備份最重要的功能,不一定是需要看得懂有差異之處,而是能還原回正常的狀態,就像 windows 不正常關機後,重新啟動時會詢問 "是否回覆到上一次正常啟動的狀態" → 是一樣的概念。

      其餘的事,您若有空可與 Rock Lee 討論~~XD

      刪除

張貼留言注意事項:

◎ 勾選「通知我」可收到後續回覆的mail!
提問請附網址、詳細描述狀況,如提供的資訊不足,則無法回覆。
◎ 請在相關文章留言,與文章無關的主題請至「Blogger 中文論壇」。
◎ 若詢問 CSS 、非官方範本問題、或貴站為商業網站 ,請參考「本站諮詢頁面」→「1. 諮詢服務」
◎ 若留言要輸入語法,"<"、">"這兩個符號請用其他符號代替,否則語法會消失!
◎ 若發現留言不見了,通常是因為 "複製貼上" 的內容常被系統判定為垃圾留言,請不用擔心,我會定期將留言恢復。
◎ 本站「已關閉自刪留言功能」。