作者doomdied (Died)
看板Blog
标题[分享] 我的Blogger继续阅读plus
时间Thu Jan 15 21:31:20 2009
[部落格版
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
1F：推 Solver:隐藏文章要用 <span class="more"> (文章) </span> 包起来 02/21 08:08