Hacks In Lifetags：Read More

話說我前幾天又開了一個Blog，之前曾思考過Josh's Note所要走的方向，是要走綜合路線呢？還是單純的就以Blogger的設計、修改等等的資源為主，幾經熟慮後，我決定以後者為未來Josh's Note的方向，所以又開了一個Josh's Lifetags，就是為了將二者的性質做區別。

而Josh's Lifetags所使用的樣版正以我在The Blogger WorkShop所找到的樣版，主要是因為這個樣版沒有加入任何的Hacks，所以我可以邊動手加入邊在這邊做記錄，除了自己能做筆記之外，還能提供給剛接觸Blogger的朋友做個參考。

今天我先對“Read More”來做修改。

通常“Read More”可以分為二種，一種是將隱藏的文章段落直接展開，另一種連到該文章的頁面，為了比較這二種對於頁面載入的時間，所我決定將這二種一個一個加入，再決定要使用那一種。而載入時間的計算就使用FireBug這個Firefox的附加元件。

首先是直接展開的方法；參考文章：Blogger hack: Expandable posts with Peekaboo view

1、將下列程式加入</head>之前：
<script type='text/javascript' src=
'http://www.anniyalogam.com/widgets/hackosphere.js' />
2、尋找下列的程式：
<b:includable id='post' var='post'>
<div class='post uncustomized-post-template'>
<a expr:name='data:post.id'/>
將紅色部份取代為
<div class='post uncustomized-post-template' expr:id='"post-" + data:post.id'>
3、尋找<div class='post-body'>，在下方加入：
<b:if cond='data:blog.pageType == "item"'>
4、尋找<p><data:post.body/></p>在下方加入下列程式：
<b:else/>
<style>#fullpost {display:none;}</style>
<p><data:post.body/></p>
<span id='showlink'>
<p><a href='javascript:void(0);' expr:onclick='"javascript:showFull(\"post-" + data:post.id + "\");"'>Read More...</a></p>
</span>
<span id='hidelink' style='display:none'>
<p><a href='javascript:void(0);' expr:onclick='"javascript:hideFull(\"post-" + data:post.id + "\");"'>Summary only...</a></p>
</span>
<script type='text/javascript'>
checkFull("post-" + "<data:post.id/>");
</script>
</b:if>
5、將文章段落想隱藏的部份用<span id="fullpost">和</span>包起來。

再來換連結的方法；參考文章：Blogger Beta 繼續閱讀功能改良

1、將下列程式加入</head>之前：
<script type="text/Javascript">
function hidePost(postUrl)
{
var label=document.getElementById("fullpost");
if(label!=null){
eA = document.createElement("a");
eA.setAttribute("href",postUrl);
eA.setAttribute("title","Read More");
eA.appendChild(document.createTextNode("...Read More"));
eB = document.createElement("p");
eB.setAttribute("id","read-more");
eB.appendChild(eA);
label.parentNode.appendChild(eB);
label.parentNode.removeChild(label);}
}
</script>
2、尋找<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.url/>');</script>
</b:if>
</b:if>
3、將文章段落想隱藏的部份用<div id="fullpost">和</div>包起來。

接著來比較二者的差別：
直接展開：
連結：由上面二個圖可以發現二者載入所花的的時間其實差不多（載入時都有將暫存清除），由此可知，隱藏起來的段落還是有下載到Cache之中，但是就以文章的瀏覽的方便性來說，以直接展開的方式較為方便，因此我決定直接展開的方法來做為Josh's Lifetags的“Read More”功能。

另外Read More還有以外掛的方式，可以參考更勁爆的「超級無腦安裝Blogger外掛功能」，以及一個同樣是以外掛的方式，但是不需在文章編輯時加入特殊標籤，而是以文章的行數來自動隱藏，請參考[BLOGGER]繼續閱讀懶人加強版(for Blogger New) 最新版本 v1.4.1。