Thursday, January 15, 2009

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

之前在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,也還是可以顯示出繼續閱讀的標籤。

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

4 comments:

  1. 你好

    請問用你這個方法

    要隱藏的部份適用什麼包起來

    span class="more" 繼續閱讀隱藏的內容/span

    這個嗎?

    ReplyDelete
  2. 沒錯,跟你說的一樣
    <span class="more"> 繼續閱讀隱藏的內容</span>

    ReplyDelete
  3. 真的太厲害了,非常感謝!!

    ReplyDelete
  4. 有人使用這方法,我就很開心啦:)

    ReplyDelete