2014年4月27日 星期日

Blogger優化首頁LinkWithin縮圖顯示相關文章

使用了LinkWithin提供縮圖顯示相關文章,雖然提高了相關文章的曝光率,但卻也付出了效能上很大的代價,尤其是首頁上的文章數,顯示多篇時,會發現首頁載入速度,明顯地變慢許多,因此,延伸出不要在首頁顯示縮圖,而只需在內文中呈現縮圖優化需求。



至於如何安裝相關文章,可以參考:Blogger安裝LinkWithin縮圖顯示相關文章,這篇文章。

因為已經安裝過LinkWithin,因此Mix要來尋找此段代碼位於範本中的哪個位置,小工具的代碼,在範本中都是以<b:widget>的方式呈現,範本中又存在很多的<b:widget>標籤,所以Mix先在LinkWithin的小工具標題加上LinkWithin字串,來方便搜尋代碼所在。

  1. 版面配置
  2. 按下HTML/JavaScript
  3. 加上標題LinkWithin。
  4. 儲存。




接著從範本中搜尋LinkWithin代碼區塊。

  1. 範本。
  2. 編輯HTML。




Ctrl+F,搜尋這段代碼。

LinkWithin



發現這段代碼。




將剛剛找到的代碼,按小箭頭展開後,繼續往下幾行,會發現<data:content/>的字串,取代成以下的代碼,然後儲存範本。

<b:if cond='data:blog.pageType == &quot;item&quot;'>
    <data:content/>
</b:if>



代碼取代之後的結果。




這就是小工具內的代碼,加上if條件判斷,決定是否顯示相關文章,意思是說當網頁類型是內文時,才顯示相關文章,當是首頁時,就不會顯示縮圖




Mix經過優化首頁後,只保留內文的縮圖顯示,整個首頁版面就變得清爽多了,而網頁載入速度也大幅提升,在功能與效能上得到適當的平衡。



沒有留言:

張貼留言