接續上一篇「自訂行動版的實作」，前面說完了 "標頭"、"導覽列"、"廣告" 的部分，接下來繼續 "文章"、"側邊欄"、"頁尾" 這些區塊的實作分享。<< 請注意！本篇文章含會員加值文章內容，需點數兌換 >>
六、文章區塊
七、文末資訊區塊及分享按鈕
1. 文末資訊區塊
雖然文章區塊有懶人包作法可以快速完成，但進入行動版頁面後，會發現文末資訊區塊怪怪的，無法跟網頁版一致：
如上圖，是不是跟網頁版差很多呢？我們進入後台看看 → 版面配置 → 網誌文章 → 按「編輯」，畫面如下：
就算我們把所有選項都勾選了，結果在行動版的畫面只會出現作者、發佈日期、標籤這三項而已，這是什麼原因呢？
用「Chrome 開發人員工具」檢視之後，大部分勾選的項目，其 HTML 內容都是空白，也就是 Blogger 並未執行這些項目。
實際上，如果測試官方行動版的效果，大部分的項目也都是不會執行。WFU 的推測是，Blogger 官方為了節省行動版的載入時間，文末資訊區塊原本就是設定為不執行這些項目。(另外也可參考「讓 Blogger 在文章下方顯示作者簡介」→「一、無法顯示的原因」。)
2. 社交分享按鈕
其他項目不能顯示 WFU 覺得沒什麼關係，但社交分享按鈕是非常重要的項目，一定要想辦法顯示出來。
如同前面的圖，我們勾選了「顯示分享按鈕」後仍無法顯示的原因，比其他項目複雜，除了 Blogger 不執行分享按鈕的程式碼以外，Blogger 另外還用 CSS 把這個分享按鈕設定為隱藏(display: none)，夠離奇吧！
不過這兩個原因 WFU 都已經解決了，可參考這篇「改造 Blogger 官方分享按鈕﹍新增熱門社交分享按鈕」，請詳讀全部的流程，就能在自訂行動版顯示官方分享按鈕，並新增各種熱門社交分享按鈕，包含 Line、微博(weibo) 等等。
八、側邊欄區塊
WFU 的自訂行動版向官方行動版看齊，基本上網頁版的所有側邊欄，在行動版全部取消，以加快行動裝置的載入速度。
1. 取消小工具
取消的動作很簡單，請參考「Blogger 行動版修改技巧」→「三、讓小工具出現在行動範本」，將小工具加上參數
2. 保留小工具
只要你有一個側邊欄小工具沒有做取消的動作，那麼這個小工具就會出現在行動版的最底部；如果有多個小工具，就會全部擠在最下面，版面或許不太好看。因此行動版會出現的小工具，最好設定一下 CSS，讓版面寬度好看一些。
如果要建議保留哪些小工具的話，WFU 會傾向只留功能性的項目，例如「聯絡表單」、「關於我」等等，這是行動裝置訪客比較有可能關心的，其他的項目請讀者自行斟酌了。
九、頁尾
這是 WFU BLOG 網頁版的頁尾畫面：
1. 改 CSS
上方的按鈕每個寬度為 48px，到了行動版由於太大粒，6 個按鈕會擠成兩排，版面比較不好看，因此行動版的 CSS 將按鈕寬度設定為 32px，保持一排 6 粒。
2. 減少 Javascript
另外，中間那一排「Alexa 排名」、「Histats」線上人數等等功能，由於需要執行外部 JS，且在行動版屬於非必要項目，因此取消這一行。
最後完成的行動版結果，大致如下圖：
現在看起來換成中間的 6 個超連結字體看起來大了一些，畫面不太協調，且有些擁擠對吧？
下一篇會說明行動版最後的收尾，看看字體 CSS 如何調整、圖片尺寸最佳化、以及網站外掛在行動版如何取捨等主題。
加值文章關閉留言板功能，使用上有任何問題請用下面的表單與我聯繫：
自訂行動版系列文章：
Wayne Fu大您好，這篇文章聊表我對您的一點敬意，我自己也在網路上寫文章，所以深知作者的辛勞與心情，希望這篇文章能讓您增加一點點寫文動力與成就感，感謝您！
回覆刪除http://www.rocknovels.com/2015/04/003wayne-fublogger.html
XDDDDDDD（覺得被逗樂了）
刪除雖然我們對 Wayne Fu 大的景仰都有如滔滔江水，連綿不絕，
雖然是一篇很認真感謝的文章（應該是吧？），
但文章一開，我還是不爭氣的大笑了。
台灣有那麼多神，我們也有自己的「偽 ‧ 雲神」！
（原因請見 WFU BLOG 的「網站故事」）
@李洛克, 謝謝你的撰文, 能跟 Mark、於大 排列在一起是我的榮幸，雖然自知高度還不夠就是了~~
刪除@Ala, 人家沒有提到 "神", 別醬害我捏~~XD
「簡單回答，官方產生的程式碼避免去更動。這個 case 如果 debug，也許把 Blog1 還原回預設內容，再逐一加回你修改過的內容，會是比較快的流程。」
刪除請問該怎麼還原預設？整段刪掉嗎？
呵呵～我看到了旁邊可以打勾還原，sorry！
刪除是的，"將迷你組件範本回覆為預設值" 這個項目~
刪除終於...甩掉判斷式遮蔽懶人包，再一次大掃除（還原）後出現了，已經一一加回。對於不擅長 debug 的我來說，透過「將迷你組件範本回覆為預設值」來個別還原是個更好的方法！太感人 T..T
刪除先前單獨一一查看 *.js 查無結果，
想請問...這個方法的適用對象是否為 ＜bady...＞ 中已經流程錯亂者？
無論如何，謝謝 ^^
good news~~
刪除<body> ~ </body> 代表整個網頁的內容, 還原 Blog1 只是代表將 "文章區塊" 還原為預設值. 如果全部的小工具都要還原, 得還原全部的小工具才行.
但 <body> ~ </body> 區間還有小工具以外的內容，所以小工具以外的 code，還是得自己 debug。總之，如我備份範本系列文所提，建立範本的版本控制，會是最輕鬆的 debug 管理方法。
嗯，會纏上 Wayne 還記得是一個不冷不熱的午後 ...，不是啦！！！n 年前因為串聯留言無法正常顯示回覆者的留言區塊，那時只有做註解的概念，Blogger 的新舊更換加上久久修改/備份範本一次，不得其門而入，幸得你跟馬克的提醒與解救。
刪除我的版本控制目前的方式是每一次修改完畢後，留下能正常使用的「日期-正常版」。其後，正在修改的部份，一段修改後留下「日期-v1、v2、...」，待下一回修改，如果最近一次的「日期-正常版」能恢復，就把「日期-v1、v2、...」刪除了，畢竟留下太多幾乎重複的範本，對我這種不太會除蟲的人來說，也只是鴨子聽雷。其實 Wayne 所提的範本備份概念等同系統、重要資料，甚或刷機的備份概念，只是刷機、系統備份所需的佔用容量大了許多。
類似 EmEditor 的小工具，有比對檢查的功能。能很快找出前、後範本的不同處（http://i.imgur.com/wp8MYhQ.png），但對語法熟悉度大概只有幼幼班的我來說，利用工具找出了不同，之後呢？剩下無盡的放空跟遠目...。
如果不影響使用，就放給它去了，哈哈！畢竟無償勞煩他人是很不好的事情，除非是一個觀念的請益或從何下手的提醒。
btw，我看到「指標人物」想笑，不是因為內文。而是一打開乍現的標題跟圖片，讓我想起好像參加了某種儀式（呸！呸！呸！希望李洛克跟 Wayne 不要見怪）。
是的，我目前每月備份一次，不過隨著時間過去，幾年前的版本，也會逐漸把備份只保留到剩下每半年、或每一年一個版本，跟你的概念差不多。
刪除也許你目前用比對工具，還無法看出可以下手的地方，但也許將來看得懂，所以備份一定有他的作用在 :)
不過備份最重要的功能，不一定是需要看得懂有差異之處，而是能還原回正常的狀態，就像 windows 不正常關機後，重新啟動時會詢問 "是否回覆到上一次正常啟動的狀態" → 是一樣的概念。
其餘的事，您若有空可與 Rock Lee 討論~~XD