Blogger:改良詳見全文(繼續閱讀)使用方法

很久之前，在別人的Blog看到了詳見全文(繼續閱讀)的方法，很實用。
不過卻有小缺點，就是無法控制要不要出現繼續閱讀的設定，例如文章內容不夠多，短短幾行，就不需要出現。

忘了是在哪邊取的的程式碼，在此說明我不是原創，我是加以改良(紅色字體部份，是我自己寫的)，如果有誰知道原創者，可以跟我，我再補充上出處來源及連結。

在編輯模版之前，建議先儲存一份模版。另外，也建議你更換一個程式後，先用預覽，看看是否有問題。


Step1: 首先，將 程式1，程式2 放在
</head>
之前。

程式1: 用來設定CSS

<b:if cond='data:blog.pageType == "item"'>
<style type='text/css'>
span.fullpost {display:inline;}
</style>
<b:else/>
<style type='text/css'>
span.fullpost {display:none;}
</style>
</b:if>


程式2: 用來判斷是否要出現 詳見全文 的連結

<script type='text/javascript'>

function hidePost(PostId,PostUrl) {
var Post = document.getElementById("hidePost-"+PostId);
var PostContent = Post.innerHTML;

if(PostContent.indexOf("fullpost")!=-1){
Post.innerHTML="<br/><span><a href='"+PostUrl+"'> 詳見全文... </a></span>";
}else{
Post.innerHTML="";
}
}

</script>




Step2: 找到
<div class='post-header-line-1'/>

和

<div style='clear: both;'/> <!-- clear for photos floats -->
</div>


把這三行之間程式內容(包括這三行)替換成 程式3


程式3: blogger中，顯示文章內容的程式碼

<div class='post-header-line-1'/>

<div class='post-body'>
<b:if cond='data:blog.pageType == "item"'>
<data:post.body/>
<b:else/>

<data:post.body/>
<span expr:id='"hidePost-" + data:post.id'><data:post.body/></span>
<script type='text/javascript'>
hidePost('<data:post.id/>','<data:post.url/>');
</script>

</b:if>


<div style='clear: both;'/> <!-- clear for photos floats -->
</div>


Step3: 避免點選較舊文章 可能會失效的情況。
找到以下程式碼，將以下刪除線的部份，從程式裡移除掉。
移除前後得差別在於，點選較 新的文章/較舊的文章 ，瀏覽器顯示的網址，不再是 http://yorblogname.blogspot.com，而是網址加上一大串的參數。
yorblogname:你的部落格名稱


<b:if cond='data:newerPageUrl'>
<span id='blog-pager-newer-link'>
<a class='blog-pager-newer-link' expr:href='data:newerPageUrl' expr:id='data:widget.instanceId + "_blog-pager-newer-link"' expr:title='data:newerPageTitle'><data:newerPageTitle/></a>
</span>
</b:if>

<b:if cond='data:olderPageUrl'>
<span id='blog-pager-older-link'>
<a class='blog-pager-older-link' expr:href='data:olderPageUrl' expr:id='data:widget.instanceId + "_blog-pager-older-link"' expr:title='data:olderPageTitle'><data:olderPageTitle/></a>
</span>
</b:if>


Step4: 可以在 blogger的 設定/格式 中，填入以下內容，當每次要寫新文章時候，就會預設出現，不用自己再key 一遍。

文章摘要的部分

<span class="fullpost">這裡是要隱藏的部分</span>



我改寫的部份，其實就是判斷文章內容是否有出現 fullpost這個字，如果有的話，表示有使用到 <span class="fullpost">，則就應該要出現改良詳見全文的連結。