Blogger 行動範本隱藏留言板加快文章載入速度
使用行動版的 Blogger 自訂範本,在加入了「廣告、社群分享按鈕、相關文章」等物件後,難免會讓整個行動範本變的過於肥大,導致在手機上觀看行動版網頁,有速度遲滯的現象。
若使用自適應範本,沒經過規劃「widget」全放上的話,那在手機上開啟網頁時的延遲更是明顯。
經觀察發現,自訂行動範本若放入太多物件,會連帶影響行動範本留言板的開啟速度,以致文章頁面在讀取的後期會放慢,可能原本留言板零點幾秒就能開啟的狀態,變成一秒甚至更多。
下面介紹 Blogger 行動版隱藏行動範本留言板的方法,也是自己常常在使用的應用技法。通常文章頁面,若新增過多物件,就會將留言板隱藏,一來一往以抵消開啟網頁的速差。若你也有這種需求,不妨參考以下設置方式,隱藏行動版網站的留言板。
其他的相關用法:
在範本中搜尋『
運用的「if」判斷式為「item ( 文章頁面 )」:如果頁面等於文章頁面就使用「前往電腦版留言」的超連結,『
若在靜態頁面 ( static_page ) 有設置留言版的話,可以使用下列判斷式,試著與「item」組合做練習:
Google 自訂搜尋嵌入 Blogger 行動版網頁
Blogger 電腦版行動版文章中安裝 AdSense 回應式廣告
Blogger 電腦版行動版文章中加入社群分享按鈕
Blogger 行動版安裝社群分享按鈕
若使用自適應範本,沒經過規劃「widget」全放上的話,那在手機上開啟網頁時的延遲更是明顯。
經觀察發現,自訂行動範本若放入太多物件,會連帶影響行動範本留言板的開啟速度,以致文章頁面在讀取的後期會放慢,可能原本留言板零點幾秒就能開啟的狀態,變成一秒甚至更多。
下面介紹 Blogger 行動版隱藏行動範本留言板的方法,也是自己常常在使用的應用技法。通常文章頁面,若新增過多物件,就會將留言板隱藏,一來一往以抵消開啟網頁的速差。若你也有這種需求,不妨參考以下設置方式,隱藏行動版網站的留言板。
設置流程
- 使用 isMobile if 判斷式,在 css 中隱藏留言板
- 更改「查看網路版」建立「前往電腦版留言」
設置前準備
若對編譯 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 == "false"'>
如果不在 blog 的行動版網頁的話,顯示此段內容
</b:if>
<b:if cond='data:blog.isMobile'>
如果內容是在 blog 的行動網頁,顯示此段內容
<b:else/> 如果不是的話
顯示此段內容
</b:if>
Step 2
更改「查看網路版」建立「前往電腦版留言」
由於「Step1.」已將行動版網頁的留言版隱藏了,接著我們還可以運用原有的電腦版連結「查看網路版」,將它變更為「前往電腦版留言」的超連結。讓需要留言的訪客,知曉能前往電腦版網站留言。在範本中搜尋『
<b:includable id='mobile-nextprev'>
』,在下方找到『<div class='mobile-desktop-link'> ~ </div>
』的整個區間,並將整段更改為以下式樣,即可完成設定。
<div class='mobile-desktop-link'>
<b:if cond='data:blog.pageType == "item"'>
<a class='home-link' expr:href='data:desktopLinkUrl' expr:title='data:desktopLinkMsg'>〈 <!-- <data:desktopLinkMsg/> -->前往電腦版留言 〉</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 == "static_page"'>
如果 blog 頁面等於靜態頁面,此段內容在網站的所有靜態頁面 ( /p/static.html )顯示
</b:if>
<b:if cond='data:blog.url == data:blog.canonicalHomepageUrl + "p/static.html"'>
如果 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 行動版安裝社群分享按鈕
留言
張貼留言