blogger 自動隱藏全文
Posted by tjwei on 星期四, 3月 08, 2007 with 4 comments
blogger 上自動隱藏全文的方法很多,這是我的作法,測試上 ie/firefox/flock 都可行,而且關掉 javascript 也 ok。當然,你的全文也是要放在 <div id='fullpost'></div> 中間。(更新:新的版本請參考這篇)
有些人可能會覺得要加上這個 fullpost tag 很麻煩,所以選擇那種使用行數的方式來顯示摘要。不過其實不會很麻煩,因為你只要在你的設定->格式->文章範本裡面放上這段文字就行了
其實還有另外一種方式,就是加上分行符號比方 --- , *** 或者 <hr> 或者第一段落,然後用 javascript 來判斷摘要和全文。但是因為我想要自己能完整控制摘要是什麼,全文是什麼,而不用因此破懷我的排版,所以我選擇使用 fullpost 的方式。
先展開小裝置範本。然後下面這段放在 </b:skin> 後面
<b:if cond='data:blog.pageType != "item"'>
<style>#fullpost {display: none;}</style>
<noscript><style>
#fullpost {display: block;}
</style></noscript>
<script type='text/Javascript'>
function toggle_display(num){
el=document.getElementById("fullpost"+num);
eB=document.getElementById("toggle"+num);
if(!el) {return;}
tmp=el.style.display;
el.style.display=eB.style.display;
eB.style.display=tmp;
}
function hidePost(postid)
{
var label=document.getElementById("fullpost");
if(label!=null){
eA = document.createElement("a"); eA.setAttribute("href","javascript:toggle_display('"+postid+"')");
eA.innerHTML="收起全文";
eB = document.createElement("p");
eB.appendChild(eA);
eB.setAttribute("id","toggle"+postid);
eB.style.display="block";
pa=label.parentNode;
nl = document.createElement("div");
nl.innerHTML=label.innerHTML+"<p>"+eB.innerHTML+"</p>";
eA.innerHTML="...請按此繼續閱讀全文";
nl.setAttribute("id","fullpost"+postid);
nl.style.display="none"
pa.removeChild(label);
pa.appendChild(nl);
pa.appendChild(eB);
}
}
</script></b:if>
然後 下面這段放在 <p><data:post.body/></p> 後面
<b:if cond='data:blog.pageType != "item"'>
<b:if cond='data:post.url'>
<script type='text/javascript'>hidePost('<data:post.id/>');</script>
</b:if>
</b:if>
有些人可能會覺得要加上這個 fullpost tag 很麻煩,所以選擇那種使用行數的方式來顯示摘要。不過其實不會很麻煩,因為你只要在你的設定->格式->文章範本裡面放上這段文字就行了
摘要然後就能很方便的修改變成新的 post。
<span id='fullpost'>
全文
</span>
其實還有另外一種方式,就是加上分行符號比方 --- , *** 或者 <hr> 或者第一段落,然後用 javascript 來判斷摘要和全文。但是因為我想要自己能完整控制摘要是什麼,全文是什麼,而不用因此破懷我的排版,所以我選擇使用 fullpost 的方式。
Categories: blog
4 意見:
本來都不知道怎麼把全文藏起來,看到教學文真是太棒了,大感謝!!:)
Iris
http://iristwo.blogspot.com/
hi iris,
你的兩個 blog 我都有看,內容都很豐富有趣。
試了很多方法都沒弄成功,
你的這一篇教學總算讓我試成功了!
謝謝你囉!
張貼留言