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

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

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

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

下面介紹 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.」已將行動版網頁的留言版隱藏了，接著我們還可以運用原有的電腦版連結「查看網路版」，將它變更為「前往電腦版留言」的超連結。讓需要留言的訪客，知曉能前往電腦版網站留言。

在範本中搜尋『<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 行動版安裝社群分享按鈕