2007年10月7日星期日

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("class=\"fullpost\"")!=-1){
Post.innerHTML="<br/><div><a href='"+PostUrl+"'> 詳見全文... </a></div>";
}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">,則就應該要出現改良詳見全文的連結。

装载自:
Mr.J 雜學

1 条评论: