2006年11月3日 星期五

[BLOGGER]繼續閱讀懶人版(For Blogger New)

注意:此篇僅適用Blogger Beta,原Blogger舊版專用的版本在這

注意2:此篇已有新版本,請到這裡觀看


這個版本是參考:
Chagg's 嘴砲日記: Blogger Beta 繼續閱讀功能改良
修改而成的懶人版,在此特別致謝

優點:不需要逐篇插入特殊的標記,會自動套用在整個Blog(懶人適用)
缺點:行數是固定的,所以沒有辦法每篇自訂中斷處

使用前說明:
本程式碼是使用JavaScript去抓<br>(換行標籤),每個<br>就代表一行
所以要確定你的文章裡面有足夠數量的<br>,繼續閱讀才會成功

修改template(記得修改前請備份!!)
步驟1:在</b:skin>和</head>中間,插入以下程式碼

<script type="text/javascript">

function hidePost(PostBodyId,postUrl)
{
var pbody = document.getElementById('PS_' + PostBodyId);
var tagbr = pbody.getElementsByTagName('br');

if (tagbr.length > 3)
{
var britem = tagbr.item(3);
while (britem.nextSibling!=null)
{
britem.parentNode.removeChild(britem.nextSibling);
}
britem.parentNode.appendChild(document.createElement("br"));
eA = document.createElement("a");
eA.setAttribute("href",postUrl);
eA.setAttribute("title","繼續閱讀");
eA.appendChild(document.createTextNode("...繼續閱讀"));
eB = document.createElement("div");
eB.setAttribute("id","read-more");
eB.appendChild(eA);
britem.parentNode.appendChild(eB);
}
}

</script>


步驟2:找到類似以下的區塊

<div class="post-body">
<p
><data:post.body/></p>
<div style='clear: both;'/>
</div>

用以下的程式碼取代:

<div class="post-body">
<div expr:id='"PS_"+ data:post.id'>
<data:post.body/>
</div>
<b:if cond='data:blog.pageType != "item"'>
<b:if cond='data:post.url'>
<script type='text/javascript'>hidePost('<data:post.id/>','<data:post.url/>');</script>
</b:if>
</b:if>
<div style='clear: both;'/>
</div>

步驟3:Save Template,Enjoy It

補充說明:
前面的程式碼,預設是每篇會保留前四行
要加大或縮小的話,請修改步驟1的程式碼:

if (tagbr.length > 3)
{
var britem = tagbr.item(3);


把兩個數字'3'換成你要的行數即可

2006年10月30日 星期一

[BLOGGER]繼續閱讀懶人版(For Blogger舊版)

2006/11/3補述:此篇的原稿已經被我改成Blogger Beta的版本,好像還是有蠻多人還在用舊版,所以再貼出來給大家參考

注意:此篇不適用Blogger Beta,Blogger Beta專用的版本在這

這個版本是參考:
程式設計 NEXT SERVICES
作者的程式碼略微改寫的成品,在此特別致謝

優點:不需要逐篇插入特殊的標記,會自動套用在整個Blog(懶人適用)
缺點:行數是固定的,所以沒有辦法每篇自訂中斷處

使用前說明:
本程式碼是使用JavaScript去抓<br>(換行標籤),每個<br>就代表一行
所以要確定你的文章裡面有足夠數量的<br>,繼續閱讀才會成功

修改範本(記得修改範本前請備份!!)
步驟1:在</style>和</head>中間,插入以下程式碼

<script type="text/javascript">

var PostMAXLine = 4; /*每篇顯示最大行數(大於此會縮起來)(繼續閱讀)*/

function SimplifyPostBody(PostBodyId,ContinueReadLinkUrl)
{
var strPostBody = document.getElementById(PostBodyId).innerHTML;
var strTag= '<BR';
var iTagIndex= strPostBody.indexOf(strTag);
if (iTagIndex ==-1)
{
strTag= '<br';
iTagIndex= strPostBody.indexOf(strTag);
}

var iTempIndex = -1;

for (i=0; i<PostMAXLine ; i++)
{
if (iTagIndex != -1)
{
iTempIndex = iTagIndex + 1;
iTagIndex = strPostBody.indexOf(strTag, iTempIndex);
}
}
var iTargetTagIndex = iTempIndex - 1 ;
var strMiniPostBody = strPostBody.substring(0,iTargetTagIndex) + '<p><br/><a href="' + ContinueReadLinkUrl + '" title="繼續讀下去...">(繼續閱讀 ... )</a></p>';
if (iTargetTagIndex != -1)
document.getElementById(PostBodyId).innerHTML = strMiniPostBody;
}

</script>

步驟2:找到類似以下的區塊

<div class="post-body">

<p>
<$BlogItemBody$>
</p>
</div>

用以下的程式碼取代:

<div class="post-body">

<div id="POSTBODY_<$BlogItemNumber$>">
<$BlogItemBody$>
</div>

<MainPage><script>
SimplifyPostBody('POSTBODY_<$BlogItemNumber$>','<$BlogItemPermalinkUrl$>')
</script></MainPage>

</div>


步驟3:重新發佈,Enjoy It

補充說明:
前面的程式碼,預設是每篇會保留前四行
要加大或縮小的話,請修改步驟1的程式碼:
var PostMAXLine = 4; /*每篇顯示最大行數(大於此會縮起來)(繼續閱讀)*/

把'4'換成你要的行數即可

##EasyReadMore##