[Blogger Tune] 使用 Blogger 內建的 data:post.thumbnailUrl 以及 data:post.snippet 製作首頁縮圖文章版面，不需要 javascript 的做法

之前寫的這篇：[Blogger Addon and Fix] PremiumBloggerTemplates 版型縮圖功能小修正，那是用 javascript 產生的首頁縮圖文章版面，最近發現 Blogger 好像多了 data:post.snippet (摘要) 和 data:post.thumbnailUrl (縮圖) 的參數，於是拿來改了一下器材控首頁的版面，成果見上圖。

實做》

一、Blogger 管理後台，設計-->修改 HTML，勾選展開小裝置範本，別忘了先備份版型，以免改爛掉

二、找到 <data:post.body />，替換成底下的 code

<b:if cond='data:blog.pageType == &quot;index&quot;'>
  <b:if cond='data:post.snippet'>
          <b:if cond='data:post.thumbnailUrl'>
              <div class='Image thumb' style='float:left;margin-right:5px;'>
                <img expr:src='data:post.thumbnailUrl'/>
              </div>
          </b:if>
            <data:post.snippet/>
           <b:if cond='data:post.hasJumpLink'>
                <div class='jump-link'>
                  <a expr:href='data:post.url'><data:post.jumpText/></a>
                </div>
           </b:if>
  </b:if>
<b:else/>
     <description style='display:none;'><data:post.snippet/></description>
      <p><data:post.body/></p>
</b:if>

解說》

<b:if cond='data:blog.pageType == &quot;index&quot;'> 只在首頁顯示摘要縮圖的版面

<b:if cond='data:post.snippet'> 當有摘要內容的時候

<b:if cond='data:post.thumbnailUrl'> 當有縮圖的時候

<b:if cond='data:post.hasJumpLink'> jumplink 就是閱讀更多的功能，當你有 <!-- more --> Tag 時會出現。

另外，在這篇：[Blogger] 分享到 Facebook 卻發現文字抓錯？，我是使用 <description> Tag 將 <data:post.body /> 包起來，既然發現有 <data:post.snippet /> 摘要的參數，所以就在 <data:post.body /> 上面加一行 <description style='display:none;'><data:post.snippet/></description>，不會顯示，但 FB 抓得到摘要內容。

討論》

有任何問題歡迎回應討論。

文章分類：Blogger FixTune