2009年9月16日 星期三

Blogspot終於推自家的繼續閱讀了

這是上個禮拜推出的新功能,跳行(Jump Break),雖然早就已經有各式各樣的繼續閱讀hack可以用,但是看到Blogspot終於推出自家的繼續閱讀的功能,還是很開心,這樣以後換版型時,就不用多加一個hack了。再加上我已經把「較舊的文章」改成只顯示標題,所以不在首頁的文章,就不會因為沒有使用原本的hack而導致內文整個露出來,把版面拉的很長。

使用方法很簡單,若是使用新版(draft)的編輯器,將游標移動到需要插入Jump Break的地方,然後按上面那排工具列的最後一個按鈕,「跳行」,這時候就會插入一條線,線上的就是會顯示出來的文字,線下的文字則會隱藏。
如果是使用舊版的編輯器,則要切換到HTML模式,在要插入跳行的地方,加入底下的程式碼:
<!-- more -->

預設是會顯示「閱讀更多 »」,位置是靠左,如果想修改這部份的文字顯示,可以到「網頁元素」→「網誌文章」→「編輯」裡去修改;如果是要修改顯示的樣式,比如說位置改成靠右,則需要在樣本的原始碼中加入CSS。
.jump-link {
text-align: right;
}

由於我是使用非官方的樣本,所以無法直接使用這個功能,必需小改一下,才能讓原本繼續閱讀的hack和官方的跳行同時存在,底下是官方提供的程式碼:
<div class='post-body entry-content'>
  <data:post.body/>
  (略)
</div>

<b:if cond='data:post.hasJumpLink'>
  <div class='jump-link'>
    <a expr:href='data:post.url + "#more"'><data:post.jumpText/></a>
  </div>
</b:if>

把上面程式碼的最後一段移到上面顯示(略)的位置就搞定了。
<div class='post-body entry-content'>
  <data:post.body/>
  (略)

  <b:if cond='data:post.hasJumpLink'>
    <div class='jump-link'>
      <a expr:href='data:post.url + "#more"'><data:post.jumpText/></a>
    </div>
  </b:if>
</div>

文章代碼(AID): #1AgCg1Fz (Blog) [ptt.cc] Re: [Blogger] 狂賀!繼續閱讀功?
文章網址: http://www.ptt.cc/bbs/Blog/M.1252575873.A.3FD.html