after dusk, before dawn: Blogger繼續閱讀加強版, Continue reading plus

Thursday, January 15, 2009

Blogger繼續閱讀加強版, Continue reading plus

作者： Died

之前在blog上加了簡單的繼續閱讀功能，那時候就知道這個方式有個缺點，就是沒有用繼續閱讀的功能也會顯示Read More...，雖然有找到用Javascript可以修正的方法，不過在我的blog上一直試不成功，所以就沒有加上去。

今天找了個時間研究一下，終於找到原因並成功的修正之前的缺點了，下面就分享如何修改的。

Step 1 : CSS

首先，先將之前加的CSS修改一下(一開始我是用div.fullpost，不過我現在改用span.more了，基本上是差不多的)

原本是

<style> 
<b:if cond='data:blog.pageType == "item"'> 
  span.more {display:inline;}
<b:else/>
  span.more {display:none;} 
</b:if>
</style>

改成

<style> 
<b:if cond='data:blog.pageType == "item"'> 
  span.more {display:inline;}
<b:else/>
  span.more {display:none;} 
  span.moreBtn {display:inline;}
  span.moreBtn2 {display:inline;}
</b:if>
</style>

再來找到之前在<data:post.body/>後面增加的

<b:if cond='data:blog.pageType != &quot;item&quot;'>
<a expr:href='data:post.url'>Read more...</a><br/><br/>
</b:if>

把它改成這樣

<b:if cond='data:blog.pageType != &quot;item&quot;'>
<span class='moreBtn'><a expr:href='data:post.url'>Read more...</a></span>
</b:if>

這邊要注意，<data:post.body/>跟這段中間別加入別的標籤，不然之後的Javascript會無效的，我之前就是卡在這邊。

Step 2 : Javascript

這邊是使用jQuery去處理，所以要先引用jQuery進來，順便一提，jQuery出到1.3版了，有在用的人可以去更新一下，The Will Will Web有介紹一下jQuery 1.3版的差別

我把加入jQuery跟繼續閱讀需要加的放在一起，已經有用jQuery的人就不用再引用了。
把下面這段加到<head></head>裡面就行了。(不放在head裡面其實也沒啥差qq)

<script src='http://www.google.com/jsapi' type='text/javascript'/>
<script language='javascript' type='text/javascript'>google.load("jquery", "1.3");</script>

<b:if cond='data:blog.pageType != "item"'>
<script type='text/javascript'> 
$(document).ready(function(){
  $(".more").next(".moreBtn").addClass("moreBtn2");
  $(".more").next(".moreBtn").removeClass("moreBtn");
  $(".moreBtn").hide();
});
</script>
</b:if>

就兩個步驟，改的不多，應該很簡單就可以改好了。
我的做法是用Javascript去將不需要顯示的"read more"去掉，而不是在需要"read more"的地方將它顯示出來，與網路上找的到的做法不太一樣，這樣一來可以避免等待網頁讀取的時候，該出現的"read more"沒出現的問題，二來若使用者禁用JavaScript，也還是可以顯示出繼續閱讀的標籤。

如果有更好的做法歡迎跟我說，有任何問題或意見也請跟我告知，感謝!!