Tagged under: , , ,

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

image

之前寫的這篇:[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 抓得到摘要內容。

討論》

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

9 回應:

  1. 請問這是否可進階修改成雙欄或三欄嗎?

    懇請吉米站大幫幫忙~~

    回覆刪除
  2. Re: 藍克 <5587968935359495829>
    三欄的部份你只要加一個 div, 然後從 CSS 著手就可以了。

    回覆刪除
  3. 想請問一下
    像熱門文章要怎麼做
    才可以連影片的縮圖也能顯示?

    回覆刪除
  4. Re: 熊天旻 <1057613017781343907>
    FYI: http://911-need-code-help.blogspot.tw/2010/01/retrieve-youtube-video-title.html

    回覆刪除
  5. 想請問一下,使用了上面語法會出現兩個''繼續閱讀'',另外有些文章明明有圖片卻無法顯示@@請問該如何修改呢> <

    回覆刪除
  6. 請問大大如果,<b:if cond='data:post.thumbnailUrl'>語法無法判讀的時候,是不是我少了什麼?當我換成
    <b:if cond='data:post.firstImageUrl'>時候,可以顯示縮圖,說實在的怎麼做到的我也搞不清楚,模板網址http://btemplates.com/2013/blogger-template-thetuts/demo/。問題出在縮圖無法顯示,先感謝大大的閱讀。

    回覆刪除
    回覆
    1. http://www.blogxpertise.com/2013/12/loops-loop-positions-and-isfirst.html

      刪除
  7. 您好,我想請問一下,你網站右邊的熱門文章,圖床來自於Flickr ,是如何讓他可以顯示縮圖?

    回覆刪除

回應不用錢,請多多益善!懶得寫字按個讚也是相當感謝!