Blogger的"繼續閱讀"功能
本篇文章出自Chris Chen的My Blog
2006/9/7補述：此篇文章不適用於Blogger Beta版的新Template
這個版本是參考：
程式設計 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'換成你要的行數即可
2006/9/7補述：此篇文章不適用於Blogger Beta版的新Template
這個版本是參考：
程式設計 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'換成你要的行數即可
