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 行動版安裝社群分享按鈕


留言

繼續閱讀:

這個網誌中的熱門文章

[密技] Windows OneDrive Dropbox 移至 SD 卡,讓 SSD 使用壽命更長久

[外掛] Chrome 擴充:ColorPick Eyedropper 網頁色碼擷取器

[教學] Facebook APP ID 申請,建立應用程式取得 APP 密鑰

[教學] Google Compute Engine ( GCE ) 使用 PuTTY SSH 登入實例

[教學] Twitter 手機簡訊、APP 兩步驟驗證設定

Line 分享按鈕:文章分享語法相容網頁版、行動裝置、APP

[教學] LINE 電腦版行動條碼登入設定

[外掛] Chrome 擴充:Window Resizer 瀏覽器視窗大小調整比例

[教學] Blogger 自訂網址綁定自有域名

Blogger 文章底部自動加入版權宣告