blogger 自動隱藏全文

Posted by TJ Wei on 星期四, 3月 08, 2007 with 4 comments
blogger 上自動隱藏全文的方法很多,這是我的作法,測試上 ie/firefox/flock 都可行,而且關掉 javascript 也 ok。當然,你的全文也是要放在 <div id='fullpost'></div> 中間。(更新:新的版本請參考這篇)

先展開小裝置範本。然後下面這段放在 </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(&quot;fullpost&quot;+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(&quot;fullpost&quot;);
if(label!=null){
eA = document.createElement("a"); eA.setAttribute(&quot;href","javascript:toggle_display(&#39;"+postid+&quot;')");
eA.innerHTML="收起全文";
eB = document.createElement("p");
eB.appendChild(eA);
eB.setAttribute(&quot;id","toggle"+postid);
eB.style.display=&quot;block";
pa=label.parentNode;
nl = document.createElement("div");
nl.innerHTML=label.innerHTML+"<p>&quot;+eB.innerHTML+"</p>&quot;;
eA.innerHTML="...請按此繼續閱讀全文";
nl.setAttribute(&quot;id","fullpost&quot;+postid);
nl.style.display=&quot;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(&#39;<data:post.id/>&#39;);</script>
</b:if>
</b:if>



有些人可能會覺得要加上這個 fullpost tag 很麻煩,所以選擇那種使用行數的方式來顯示摘要。不過其實不會很麻煩,因為你只要在你的設定->格式->文章範本裡面放上這段文字就行了

摘要
<span id='fullpost'>
全文
</span>
然後就能很方便的修改變成新的 post。
其實還有另外一種方式,就是加上分行符號比方 --- , *** 或者 <hr> 或者第一段落,然後用 javascript 來判斷摘要和全文。但是因為我想要自己能完整控制摘要是什麼,全文是什麼,而不用因此破懷我的排版,所以我選擇使用 fullpost 的方式。
Categories: