2017年3月1日 星期三

Blogger 推出全新自適應 RWD 官方範本及佈景主題,並支援行動裝置

Blogger 推出全新自適應 RWD 官方範本及佈景主題,並支援行動裝置

Wayne Fu 0 A+
blogger-official-rwd-template-Blogger 推出全新自適應 RWD 官方範本及佈景主題,並支援行動裝置前幾天 Blogger 官方發佈了公告「Share your unique style with new Blogger themes」,從現在起後台可以套用的佈景主題,多了 4 個大分類,共 20 款新樣式可選擇。

雖然款式很多,不過版面設計的邏輯都差不多,也可看成官方提供了一種 RWD(自適應) 型態的新模版,只不過有 20 個不同的色系或排列組合可挑選。

好處是使用者不必費心尋找 RWD 範本,也不必擔心行動版版面看起來不搭。當然,不喜歡跟別人撞衫的站長,還是得上範本網站尋寶、或找人修改,才有辦法同時處理 RWD 範本及行動裝置的效果。

那麼本篇就來分享,WFU 從新的 RWD 範本看到 Blogger 的改變有哪些。



一、新 RWD 範本效果


從後台每位站長都能看到新版型的預覽圖,這裡就不重複貼圖了。接下來以分站「Blogger工具效果展示」舉例,套用的是「Contempo」範本第 1 個樣式,來看看 RWD 的效果如何。


blogger-official-rwd-template-1-Blogger 推出全新自適應 RWD 官方範本及佈景主題,並支援行動裝置

這是網頁版正常的畫面,左邊是側邊欄,左上角是作者簡介,但側邊欄跟以往的形式截然不同,預設會將小工具內容隱藏起來,並加上「檢舉濫用情形」這個工具。

可注意一下上圖的導覽列,目前的寬度足以顯示全部的項目。


blogger-official-rwd-template-2-Blogger 推出全新自適應 RWD 官方範本及佈景主題,並支援行動裝置

瀏覽器反覆按 Ctrl+ 可模擬螢幕尺寸較小的行動裝置(例如平板),如上圖的效果,可看到左上出現了「選單」圖示,不過這個選單功能跟一般的想像不一樣,按下去後出現的是側邊欄內容,而不是導覽項目

在螢幕變小的情況下,導覽列會根據不同寬度,出現中間紅框的「更多...」按鈕,用以顯示裝不下的導覽列項目。

文章、主要區塊也成為 100% 螢幕寬,這正是典型的 RWD 版面設計


blogger-official-rwd-template-3-Blogger 推出全新自適應 RWD 官方範本及佈景主題,並支援行動裝置

以往的官方行動版是不給修改的,而新式的 RWD 範本可說是買一送一,附帶了同版型、但可修改的行動版。在後台不需要另外選擇行動版範本,但其實也沒得選擇,因為官方關閉了行動版範本選項

上圖為模擬 iPhone4 的 320x480 尺寸的直立畫面,導覽列窄到只能如此顯示。


blogger-official-rwd-template-4-Blogger 推出全新自適應 RWD 官方範本及佈景主題,並支援行動裝置

上圖將 iPhone4 橫擺,導覽列也能顯示對應的變化。

在免費的前提下,能做到以上這些 RWD 效果,我認為已經很不錯了。



二、後台版面配置


套用新範本後,後台的版面配置功能也不一樣:

blogger-official-rwd-template-5-Blogger 推出全新自適應 RWD 官方範本及佈景主題,並支援行動裝置

整個版面多了很多零碎的小區塊,主要的改變是這樣:

  • 只有兩欄:側邊欄與主要區塊,當螢幕尺寸不夠大時就會隱藏側邊欄。
  • 新增隱藏選項:如紅框標示的小工具,劃掉眼睛的圖示代表這個小工具不會顯示,編輯小工具就能勾選顯示與否
  • 預設只有側邊欄可以新增小工具


blogger-official-rwd-template-6-Blogger 推出全新自適應 RWD 官方範本及佈景主題,並支援行動裝置

再多看一張圖,畫面往下拉後就會發現,主要區塊的每個小工具,預設情況下都沒有 "可拖曳" 的活頁孔圖示,也不能新增小工具,為什麼這樣設計呢?

自然是為了 RWD 的相容性,因為 RWD 範本的製作是很麻煩的,Blogger 官方也怕使用者把範本改壞,乾脆在預設的情況下,不讓你改主要區塊,只讓你放側邊欄的小工具。

當然,熟悉範本的站長們,修改主要區塊、新增小工具到主要區塊也是做得到的,不過建議有多年的經驗再來做 RWD 這件事。

(需要讓小工具改為 "可拖曳",或是移除不能移除的小工具,請參考「Blogger 範本區塊的修改」→「三、修改小工具的設定」)



三、新式 RWD 範本內容


打開新式 RWD 範本看看有什麼玄機,結果真是大吃一驚,整個語法內容真的可以算是 Blogger 3.0 了!我看到的改變大概是這樣:

  • 不管是 HTML/CSS/JS 都變化很大
  • 區塊的架構也都跟以往不一樣,依照以往的教學文章,很難學會修改新範本的內容
  • 更麻煩的是,多了許多新的變種 Blogger 語法、標記語言,目前不一定找得到說明書
  • 可以稱讚的優點是,用了 HTML5 標籤
  • 最棒的一點是,以往小工具內容我們要自行備份,現在則是直接存在範本之中,不必擔心範本匯出匯入後,小工具會消失的問題
  • 不過隨之而來的,就是範本檔變得肥大,編輯範本有時會當掉,瀏覽器記憶體不夠也可能當掉。

其實 RWD 範本已經非常難改了,現在又有以上這些新的語法、架構需要理解,那麼建議最好不要修改,使用官方 RWD 預設版面及效果就好。



四、新式 RWD 範本特色


整理一下官方 RWD 範本,需要知道的特色有哪些:

  • 使用 HTML5 標籤,這對 SEO 控的站長是好消息。
  • 不用另外再處理行動版範本的版面效果
  • 官方留言工具的設計變得簡潔美觀
  • 找不到文章編輯圖示、小工具編輯圖示(不曉得之後會不會補回來),也沒有快速進入後台的「設定」按鈕
  • 多了一些特別為 RWD 設計的區塊,但這些區塊預設不允許新增小工具(可在側邊欄新增工具後,再拖曳過來,但請注意 RWD 支援程度)
  • 原因在於不是每個小工具都有 RWD 效果,官方會擔心小工具出現在不該出現的地方,而把 RWD 版面給破壞了
  • 所以除了側邊欄,主要區塊的配置就會比較死板
  • 建議不要去改任何區塊的寬度,以免改壞了 RWD 在各種螢幕尺寸的效果。



五、總結


看了以上內容,你應該也會覺得,官方的設計明顯希望站長們不要動這個 RWD 範本,預設的效果就放手去接受它吧。

以 WFU 的立場而言,常常遇到有客人要求網站改成 RWD 效果,我都是直接回絕,因為原始 code 不是自己寫的,動到 RWD 效果需要測試各種螢幕尺寸的效果,是很麻煩的。而且你不會知道改了一個地方的 RWD 效果,是不是另一處的程式就因此當掉、或產生異常

我只會建議讀者,直接買 RWD 範本來套用,並且避免改跟 RWD 有關的地方,只處理跟版面無關的項目,例如功能性的問題,最好不要動到版塊的大小、寬度等,可參考「如何從 Blogger 範本網站挑到理想的版型,且不會出錯」→「四、篩選範本的重點」。

那麼對於 Blogger 官方的新佈景主題,簡單做個總結:

  • 在意 SEO 的站長,適合直接套用這個新版 RWD 範本,語法絕對支援目前最新的 SEO 規範。
  • 在範本的新架構、新語法之下,官方說明書也不一定有解釋,範本最好別亂改。
  • 建議就當成以往在使用「動態檢視範本」、或官方行動版本一樣,讓自己去適應這樣的版面,以免帶來更多的困擾。
  • 要安裝任何小工具的話,最好確定這個工具支援 RWD 效果。
  • 本站的工具多半沒特地為 RWD 而設計,但本站工具大多會附 CSS 語法,而熟悉 CSS 的讀者,可自行修改為符合 RWD 的效果。


更多 Blogger 範本相關文章:
0 0
如這篇文章對你有幫助,歡迎「分享」到 FB、「追蹤」粉絲團、「訂閱」最新文章
TOP