[unboxing][hrads]

熱門標籤

☆重要訊息:Blogger 官方近期推出的「RWD 自適應範本主題」沒有『行動服務』的設定選項,如果您是觀察「技研可樂」裡的文章做自己網站的設計,使用「自適應範本主題」的使用者可以直接依「技研可樂」文章裡的『電腦版』方式做設定即可完成佈置,不需要開啟『行動服務』。☆

  Blogger 自訂網址應用 CloudFlare HTTPS 系列文章:「CloudFlare

  Blogger HTTPS 相關文章列表:「HTTPS

  Blogger AdSense 廣告放置與相關自適應廣告佈屬文章列表:「AdSense

  Blogger 常用頁面判斷式用法一列表:「Blogger 常用頁面判斷式用法一覽表

Blogger 行動範本隱藏留言板加快文章載入速度

使用行動版的 Blogger 自訂範本,在加入了「廣告社群分享按鈕、相關文章」等物件後,難免會讓整個行動範本變的過於肥大,導致在手機上觀看行動版網頁,有速度遲滯的現象。

若使用自適應範本,沒經過規劃「widget」全放上的話,那在手機上開啟網頁時的延遲更是明顯。

經觀察發現,自訂行動範本若放入太多物件,會連帶影響行動範本留言板的開啟速度,以致文章頁面在讀取的後期會放慢,可能原本留言板零點幾秒就能開啟的狀態,變成一秒甚至更多。

Blogger 行動範本隱藏留言板加快文章載入速度_001


下面介紹 Blogger 行動版隱藏行動範本留言板的方法,也是自己常常在使用的應用技法。通常文章頁面,若新增過多物件,就會將留言板隱藏,一來一往以抵消開啟網頁的速差。若你也有這種需求,不妨參考以下設置方式,隱藏行動版網站的留言板。




設置流程

  1. 使用 isMobile if 判斷式,在 css 中隱藏留言板
  2. 更改「查看網路版」建立「前往電腦版留言」

設置前準備

若對編譯 Blogger 的 HTML 模板還不太熟悉,建議先執行『備份 Blogger 模板 (範本)』的動作,以防原始模板資料遺失。



設置教學

Step 1

使用 isMobile if 判斷式,在 css 中隱藏留言板

在範本的『</head>』之前加入以下代碼


<b:if cond='data:blog.isMobile'>
<style type='text/css'>
#comments{display:none;}
</style>
</b:if>



代碼說明:

「if」判斷式「isMobile ( 行動版網頁 )」:如果以下被包覆的內容是在 blog 的行動版網頁,不顯示「id='comments'」的物件內容。


其他的相關用法:

<b:if cond='data:blog.isMobile == &quot;false&quot;'>
如果不在 blog 的行動版網頁的話,顯示此段內容
</b:if>

<b:if cond='data:blog.isMobile'>
如果內容是在 blog 的行動網頁,顯示此段內容
<b:else/> 如果不是的話
顯示此段內容
</b:if>



Step 2

更改「查看網路版」建立「前往電腦版留言」

由於「Step1.」已將行動版網頁的留言版隱藏了,接著我們還可以運用原有的電腦版連結「查看網路版」,將它變更為「前往電腦版留言」的超連結。讓需要留言的訪客,知曉能前往電腦版網站留言。

Blogger 行動範本隱藏留言板加快文章載入速度_201



在範本中搜尋『<b:includable id='mobile-nextprev'>』,在下方找到『<div class='mobile-desktop-link'> ~ </div>』的整個區間,並將整段更改為以下式樣,即可完成設定。


<div class='mobile-desktop-link'>
 <b:if cond='data:blog.pageType == &quot;item&quot;'>
      <a class='home-link' expr:href='data:desktopLinkUrl' expr:title='data:desktopLinkMsg'>&#12296; <!-- <data:desktopLinkMsg/> -->前往電腦版留言 &#12297;</a>
 <b:else/>
      <a class='home-link' expr:href='data:desktopLinkUrl'><!-- <data:desktopLinkMsg/> -->前往電腦版</a>
 </b:if>
</div>



代碼說明:

上面的例子中,注釋掉的『<data:desktopLinkMsg/>』即為原本的「查看網路版 ( desktopLinkUrl網址類型為:?m=0 )」。後方的「前往電腦版留言」可依自己的喜好做更替。

運用的「if」判斷式為「item ( 文章頁面 )」:如果頁面等於文章頁面就使用「前往電腦版留言」的超連結,『<b:else/>( 如果不是的話 )』就使用「前往電腦版」的超連結。

若在靜態頁面 ( static_page ) 有設置留言版的話,可以使用下列判斷式,試著與「item」組合做練習:


<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
如果 blog 頁面等於靜態頁面,此段內容在網站的所有靜態頁面 ( /p/static.html )顯示
</b:if>

<b:if cond='data:blog.url == data:blog.canonicalHomepageUrl + &quot;p/static.html&quot;'> 
如果 blog 網址等於首頁 + p/static.html 單一靜態頁面,此段內容在網站的單一靜態頁面 ( /p/static.html )顯示
</b:if>

<b:if cond='data:blog.pageType == "index"'>
如果 blog 頁面等於 index 的話,此段內容在網站的 index 頁面 ( 包含:首頁、搜尋、標籤 label 頁面 )顯示
</b:if>

<b:if cond='data:blog.url != data:blog.homepageUrl'>
如果 blog 網址不是首頁網址的話,顯示此段內容
</b:if>



相關文章

Blogger 行動範本安裝 LINE 分享按鈕

Google 自訂搜尋嵌入 Blogger 行動版網頁

Blogger 電腦版行動版文章中安裝 AdSense 回應式廣告

Blogger 電腦版行動版文章中加入社群分享按鈕

Blogger 行動版安裝社群分享按鈕



分享

加入代碼加入代碼

若您在閱覽文章時,於文章頁面找不到相關的應用主題,歡迎移駕到『站內留言』一起研究討論,謝謝!

使用超連結:<a href="https://www.techcoke.com/">技研可樂</a> =『技研可樂

加入圖片 ( https ):支援 HTTPS 網址型式的 .jpg .png 格式圖檔,直接貼入 HTTPS 圖片網址即可在留言時顯示!

支援非嵌入 Youtube 視頻:https://www.youtube.com/watch?v=hdfSISI24Xk (* 瀏覽器網址列中的 Youtube 網址 )

&&amp;'&#039;"&quot;<&lt;>&gt;
技研可樂 © 2013 - 2017

Contact Form

Name

Email *

Message *