2007年3月4日

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

4 則留言:

  1. 請問一下如果我要把"read more"這個文字
    改成如您另一個blog "Josh's Lifetags"
    那樣要怎麼改呢? 謝謝您

    回覆刪除
  2. To lds98:
    在範本內搜尋“[+/-]展開全文...”取代為“Read More...”,搜尋“[+/-]顯示摘要...”取代為“Summary only...”

    回覆刪除
  3. 謝謝您,再請問一個問題
    "Read More"這段文字可以改變字體或大小嗎?

    回覆刪除
  4. To lds98:
    我想應該可以,你可以新增一個css的class,之後再將“readmore”這個<a>指定為新增的class,這樣就可以了。

    回覆刪除