2014年4月12日

[教學]Blogger 行動版範本初探__修改技巧整理

[教學]Blogger 行動版範本初探__修改技巧整理

Wayne Fu 0 A+
近來行動裝置的瀏覽量不斷攀升,因此如何完善 Blogger 行動版的功能與版面配置、及如何修改行動版範本,這件事遲早會受到矚目。

參考了官方文章「Introducing custom mobile templates」後,大致整理一下修改 Blogger 行動版必備的觀念與技巧。先提醒一下:入門、初階者建議先跳到「七、小結」提昇等級,累積實力後再挑戰本文內容。



一、選擇行動版或自適應(RWD)範本?


行動裝置要能讓 Blogger 網站正常顯示有兩種方案:使用自適應範本或行動版範本。不過這個問題並不是簡單的二分法就能抉擇,根據不同的族群,會有對應的最佳方案,詳細的分析請參考前一篇「Blogger 應該選擇自適應範本(RWD), 還是行動版範本?」。

閱讀完內容後,如果決定要「自訂 Blogger 行動版範本」,那麼請繼續往下看吧!



二、修改行動範本準備動作


如前一篇所提,「Blogger 行動版」只有選擇「自訂」才能修改,其他的官方範本全部都不能修改。

請到後台 → 範本 → 行動服務 → 下方的齒輪圖示 → 選擇「是,在行動裝置上顯示行動版範本」→ 選擇行動版範本 → 選擇「自訂」→ 儲存即可。

若還是不清楚如何設定,可參考以下兩張圖:





做完以上動作後,任何在範本中的修改,才會反應到行動版的網頁上。



三、讓小工具出現在行動範本


1. 預設顯示的小工具

根據官方文件,網頁版的所有小工具,預設只有以下這幾種會出現在行動版本:
  • Header (標頭)
  • Blog (文章)
  • Profile (簡介)
  • PageList (網頁)
  • AdSense (廣告)
  • Attribution (版權宣告)


2. 參數使用說明

其他小工具若想顯示在行動版,必須透過在小工具的程式碼增加參數 mobile='yes' 才行。例如下面這個「HTML/Javascript」小工具,在範本中的程式碼包含了:

<b:widget id='HTML1' mobile='yes' locked='false' title='WFU BLOG' type='HTML'>
加上紅字的參數後,這個小工具就能在行動版顯示了(顯示在網頁最下方)。

不過事情不一定能這麼順利,在行動版的版面,小工具會如何顯示難以捉摸,因此還必須有 CSS 的基礎能力,自行為小工具加上 CSS 設定,才能有滿意的效果。


3. 其他參數

另外,參數還有以下兩種用法可使用:
  • mobile='no' → 小工具在行動版不顯示
  • mobile='only' → 小工具只有在行動版才顯示

這部份請依自己的需求來修改。



四、讓網頁版的內容不要出現在行動版


有些在網頁版安裝的 hack 或小工具,如果不想出現在自訂的行動版,可以使用判斷式讓其不執行。例如「快速回到頂端(Go Top)按鈕__符合使用者體驗的友善設計」留言 #9 +跪婦阿冠 bigsishead 詢問「有辦法添加什麼語法讓這組功能只出現在網路版而行動版不要出現嗎?」。可在程式碼的前後增加以下紅字的判斷式即可:

<b:if cond='data:blog.isMobile'>
<b:else/>


回到頂端按鈕全部的程式碼

</b:if>


2014.8.18 補充:

Wcw5504 於留言 #7 提供以下比較簡潔的語法:

<b:if cond='data:blog.isMobile == "false"'>

回到頂端按鈕全部的程式碼

</b:if>



五、讓網頁版沒有的內容出現在行動版


1. 判斷式

將上一段的判斷式修改一下,就能讓程式碼只在行動版執行:

<b:if cond='data:blog.isMobile'>

行動版才執行的程式碼

</b:if>


2. 進階修改

在範本中,某些區塊的程式碼,已經被分成網頁版及行動版,例如「文章區塊」。請見下圖:



id 名稱以 "mobile-" 開頭的區塊,行動版便會執行這個區塊的程式碼,例如上圖紅框之中有四段程式碼,都是行動版才會執行;而 <b:includable id='mobile-post' var='post'> 之後的區間,便是行動版文章區塊的程式碼。想要在文章區塊修訂內容,必須修改這個區間的程式碼。

在網頁版的文章區塊 <b:includable id='post' var='post'> (上圖籃框之中)所作的任何修改,都不會反應到行動版的執行結果。



六、行動版 CSS


如官方文件所提,有比較簡單的技巧,可以替行動版區塊設定 CSS:

1. 先確定範本中的 <body...> 這一行長得如下面一般:

<body expr:class='"loading" + data:blog.mobileClass'>

2. 直接套用官方的舉例,如果某個網頁版區塊的 class 樣式如同以下:

.date-posts {
  網頁版樣式
}


那麼行動版這個區塊的 CSS 要如何設定呢?只要在以上的程式碼下一行,另外增加以下的程式碼即可:

.mobile .date-posts {
  行動版樣式
}



七、小結


雖是簡單整理,本文的內容要點仍是非常多,需要不少基本功,極不建議初學者碰這一塊,請先閱讀「Blogger 新手入門」、「Blogger 範本__(一)各種註解方式及區塊的修改」、「Blogger 範本__(二)標頭、導覽列、側邊欄、頁尾區塊的程式碼」、「Blogger 範本__(三)文章及留言區塊的程式碼」等等基礎知識較佳。

看完本篇後,想了解更多修改的相關經驗,可另外參考網友的這篇實戰經驗「Blogger桌面版和手機版的文章中加入回應式AdSense廣告」,相信可獲得更多知識。


Blogger 行動版相關心得:
0 0
如這篇文章對你有幫助,歡迎「分享」到 FB、「追蹤」粉絲團、「訂閱」最新文章

17 則留言:

  1. 我才剛看幾行就直接自覺的跳到第七點小結了!

    這行動範本還真不簡單修改阿~但是不修改又不行...我連自己看行動版範本都很想摔手機了
    真的不來好好研究不行了。

    回覆刪除
  2. 請問
    我在網頁版上傳影片
    為何
    手機版就不能看

    回覆刪除
  3. 版主大大好.
    想請問您. 有何方法可以讓文章內的圖片在行動版網頁呈現時, 可以依據不同尺寸的手機呈現約90%的寬度的圖片? (目前在6吋手機上看文章圖片覺得太小了) 謝謝回覆.

    回覆刪除
  4. 版主大人好.
    不好意思, 再來煩你...
    承上題, 因為我上傳到google的圖寬度都為1024, 我發現為了因應我的PC版面, 我的圖片都有指定 width="640". 如此一來PC版是美觀了. 但行動版的圖在大尺吋手機上就較小. 我曾試著去除指定的 width="640" , 行動版網頁就能呈現出與尺寸同寬的照片了. 想向版大求教的是, 有何較簡易的方式可以不必讓我重新上傳寬 640 PX 的圖片, 就能兼顧PC版與行動版上的圖片大小.
    再次先行謝過版大.

    回覆刪除
    回覆
    1. http://blogger.gtwang.org/2013/03/google-blogger.html
      我是用這個方法

      刪除
  5. 版主大大好
    又是我 QQ. 雖然不知是否最佳解, 但我已找到解決方法, 那就是將 width=100%, 叼擾您了, 不好意思. 又找不到刪留言的功能, 所以只能再PO一則. 謝謝啦~

    回覆刪除
  6. [quote]<b:if cond='data:blog.isMobile == "false"'>
    <!-- Contents -->
    </b:if>[/quote]
    第四項應可改用上面的寫法,少一個else判斷看起來比較簡潔

    回覆刪除
  7. 不好意思我又來發問了,在行動版上如果我希望隱藏文章內內建的+1按鈕,我是不是可以用的方式來隱藏?要加在那一段前後呢?我嘗試了幾次一直不知是那一段,,,麻煩wayne大指導,謝謝你!

    回覆刪除
  8. <5158201068180433186>(以上內容請勿刪除,從括號之後開始留言)感謝建議!!我找到要隱藏的區域了


    謝謝你

    回覆刪除
  9. 版主,您好
    我的網址是:http://aitanvh.blogspot.tw/

    我的主要問題是blogger可以在一般電腦正常開啟
    但在手機或是平板裝置上卻無法顯示
    想問問版主有沒有可以偵錯或是可以快速找到問題的方法
    不好意思,麻煩您了,謝謝!

    回覆刪除
  10. <2459844894776843272>(以上內容請勿刪除,從括號之後開始留言)
    版主,您好

    應該是說那個設定的鈕完全不能按,所以也無法設定成任何一種範本

    回覆刪除
  11. 突然在想可能實現內文部分只出現在行動或網頁版嗎?

    回覆刪除
  12. mobile='only' → 小工具只有在行動版才顯示
    這段好像會讓Blogger的板面配置出錯
    怎麼辦???
    謝謝板主

    回覆刪除
  13. <7363218697365713813>(以上內容請勿刪除,從括號之後開始留言)謝謝,成功解決

    回覆刪除
  14. 剛剛看了一下原範本,判斷句好像可以用 and 和 not,例如:


    應該(或許?)可以應用到調整手機範本:

    回覆刪除
  15. 請問可否詳細教學,我也想圖片在行動版顯示90%大

    回覆刪除

張貼留言注意事項:

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

TOP