推 Solver:隱藏文章要用 <span class="more"> (文章) </span> 包起來 02/21 08:08
[部落格版 http://0rz.tw/b95lq]
之前在blog上加了簡單的繼續閱讀功能(http://0rz.tw/445nK)，那時候
就知道這個方式有個缺點，就是沒有用繼續閱讀的功能也會顯示
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 != "item"'>
<a expr:href='data:post.url'>Read more...</a><br/><br/>
</b:if>
把它改成這樣
<b:if cond='data:blog.pageType != "item"'>
<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版的差別。
http://blog.miniasp.com/post/2009/01/jQuery-13-just-released.aspx
我把加入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，也還是可以顯示出
繼續閱讀的標籤。
如果有更好的做法歡迎跟我說，有任何問題或意見也請跟我告知，感謝!!
--
上班不務正業的證據
http://died1981.blogspot.com
--
※ 發信站: 批踢踢實業坊(ptt.cc)
◆ From: 220.132.182.242