2006年11月3日 星期五

[BLOGGER]繼續閱讀懶人版(For Blogger New)

注意:此篇僅適用Blogger Beta,原Blogger舊版專用的版本在這

注意2:此篇已有新版本,請到這裡觀看


這個版本是參考:
Chagg's 嘴砲日記: Blogger Beta 繼續閱讀功能改良
修改而成的懶人版,在此特別致謝

優點:不需要逐篇插入特殊的標記,會自動套用在整個Blog(懶人適用)
缺點:行數是固定的,所以沒有辦法每篇自訂中斷處

使用前說明:
本程式碼是使用JavaScript去抓<br>(換行標籤),每個<br>就代表一行
所以要確定你的文章裡面有足夠數量的<br>,繼續閱讀才會成功

修改template(記得修改前請備份!!)
步驟1:在</b:skin>和</head>中間,插入以下程式碼

<script type="text/javascript">

function hidePost(PostBodyId,postUrl)
{
var pbody = document.getElementById('PS_' + PostBodyId);
var tagbr = pbody.getElementsByTagName('br');

if (tagbr.length > 3)
{
var britem = tagbr.item(3);
while (britem.nextSibling!=null)
{
britem.parentNode.removeChild(britem.nextSibling);
}
britem.parentNode.appendChild(document.createElement("br"));
eA = document.createElement("a");
eA.setAttribute("href",postUrl);
eA.setAttribute("title","繼續閱讀");
eA.appendChild(document.createTextNode("...繼續閱讀"));
eB = document.createElement("div");
eB.setAttribute("id","read-more");
eB.appendChild(eA);
britem.parentNode.appendChild(eB);
}
}

</script>


步驟2:找到類似以下的區塊

<div class="post-body">
<p
><data:post.body/></p>
<div style='clear: both;'/>
</div>

用以下的程式碼取代:

<div class="post-body">
<div expr:id='"PS_"+ data:post.id'>
<data:post.body/>
</div>
<b:if cond='data:blog.pageType != "item"'>
<b:if cond='data:post.url'>
<script type='text/javascript'>hidePost('<data:post.id/>','<data:post.url/>');</script>
</b:if>
</b:if>
<div style='clear: both;'/>
</div>

步驟3:Save Template,Enjoy It

補充說明:
前面的程式碼,預設是每篇會保留前四行
要加大或縮小的話,請修改步驟1的程式碼:

if (tagbr.length > 3)
{
var britem = tagbr.item(3);


把兩個數字'3'換成你要的行數即可

18 則留言:

  1. 不好意思,我發現這篇的作法雖然方便,但可能有些問題:懶人版可能發生的問題
    另外也想請問一下,Javascript是否也有用抓字數取代抓取br的做法呢?

    回覆刪除
  2. To Chen-Hai, Teng

    抓字數的方式,應該是可以的,我在google上有查到 element.value.length 可以取得element的字數
    但這種方式應該是取得包含tag的總字數,所以分割的時候可能會切到tag造成顯示不正常(而且可能有中文支援的問題...搞不好字也會被切對半變成亂碼)

    其實Javascript我並不熟,一點小想法提供您參考

    回覆刪除
  3. 您好,我現在使用的是新版的「harbor」範本,也想加入「繼續閱讀」的功能,可是我找不到和步驟二類似的程式碼,請問可能的問題為何?又要如何解決呢?
    謝謝。

    回覆刪除
  4. To 法賓

    在修改範本時,[文字框右上角]有一個[展開小裝置範本]的選項,把他勾起來之後,會顯示更詳細的範本HTML碼,裡面就有你要找的那個程式區塊。

    回覆刪除
  5. To chen jim hao:

    謝謝,我已經改好了。

    回覆刪除
  6. 抱歉,我發現用 WinXP SP2 的 IE6 開啟有含這種 JavaScript 的頁面,會開不出來。

    有什麼好意見嗎?

    回覆刪除
  7. 我想請問,為什麼我和朋友貼完之後,整篇文章的行距變得很狹窄呢?不知道要改那邊的語法?謝謝。

    回覆刪除
  8. To wini和gummi

    麻煩請給我你們有發生問題的網址
    要看過才知道問題在哪

    To wini

    我這個blog也有套用繼續閱讀功能,不管是用ie6、ie7或firefox開起來都沒有問題...

    我猜可能是你的某篇文章內容切掉之後產生亂碼或是其他有問題的東西,讓ie產生錯誤。
    建議你把首頁文章都先藏起來(存草稿),然後一篇一篇發佈上去,看是哪一篇會讓ie出錯(內容有貼程式碼,或是html碼的,是兇手的機會比較大)

    回覆刪除
  9. To Chen Jim Hao

    感謝回覆,不過如果有這種 bug 的話,我想可能還是不用比較安全。

    順帶一提,我已經把繼續閱讀拿掉了,大概沒法子給你看網址了。

    感謝 m(_ _)m

    回覆刪除
  10. 我發現,如果是開頭三行是在quoteblock之內的話,他會把在quoteblock之內的文章隱藏,產生『繼續閱讀』,但是之外的則仍然繼續顯示,並沒有隱藏。

    請看我的blog:
    http://qq0526.blogspot.com/

    回覆刪除
  11. 抱歉,我因為受不了錯誤,所以先還原了。但情況就像我上面敘述的那樣。

    請問能在產生『繼續閱讀』前,先判斷quoteblock是否存在,然後產生相對應的/quoteblock嗎?我想這樣或許可以解決問題。

    回覆刪除
  12. To qq0526:
    我趁年假修改了新的版本,請到這裡試用看看,應該可以解決你的問題

    回覆刪除
  13. 你好~

    我有個小問題..
    我按照上面所說的方法修改後..

    在blogger首頁的文章是會自動變成"繼續閱讀"..

    不過第二頁之後的文章,還是會整篇跑出來耶...

    不知道是哪裡有問題咧..@@

    回覆刪除
  14. 感謝大大的帖

    在下已服用

    希望可以頭好壯壯

    感謝閣下能造福人群 蔽蔭蒼生呀

    回覆刪除
  15. 弄了半天終於弄好了!!
    看到自己部落格那一長串文字被縮減為幾行、
    還有那可愛的"...More"出現時,
    心中真是充滿感動!!!!!

    謝謝!!!!!

    回覆刪除
  16. 這樣自動的真的方便多了XD 謝謝

    回覆刪除
  17. 好棒的懶人包!謝謝你壓~!!!

    回覆刪除
  18. Thank you that your share and I've got it to bulid my blog.

    回覆刪除

注意事項:

**若要問問題/功能建議/裝了不能用,請到問題回報頁(在其他地方問,不予回應,抱歉)

**發問前,請先參考參數設定說明以及常見問題Q&A

作者是CJH
不是 阿土伯 也不是 Josh(不要搞錯\_/)

##EasyReadMore##