2006/11/24

Blogger Beta:繼續閱讀

由於我是從PTT的Blog板開始起家的,所以一直參考上面的教學來修改Blog,其中當然也有非常重要的置底文:Blogger繼續閱讀改良版教學,當時真是讚嘆到不行,也讓我的Blog變的有模有樣,一直不懂為什麼Blogger不內建這麼重要的功能…然後平平安安快快樂樂的用到了一個月前。

但,隨著時代的進步,Blogger終於生出了新一代的Beta版,提供了Widget、Label、Comment Feed等讓人流口水的新功能,這實在是太吸引人了!終於不用掛一堆拖慢速度的JavaScript,此時不換更待何時!於是就開開心心的去轉換了。不過出乎預料的,Blogger Beta裡的範本改變大的嚇人,除了之前的Tag全部不能用了以外,對於語法有很多嚴謹(煩人)的限制,之前的code幾乎都不能用了。其中也包括了最重要的繼續閱讀功能,我想不止對我,對板上很多人也有相當大的困擾吧,即使想換別的方法,要改之前幾百篇文章也是件大到不想做的工程。所以,我就硬著頭皮的試著去改code以符合新的語法。成果?就像你看到的囉:)

既然成功了,我就來野人獻曝一下吧XD

最開始最開始,請一定要備份你的範本!不然出了事就很麻煩了。請點選「下載完整模版」來備份,一旦出問題即可以上傳以回復至原來的範本。

首先,我們要將要隱藏的文章部分的CSS設定為不顯示,並將所需要的JavaScript置入,請將以下的code放到範本的head區裡面:
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<style type='text/css'>
.post #hiden{
display:none;
}
</style>
<script type='text/javascript'>
function has_id_hiden(postid) {
var elm = document.getElementById(postid);
var nodelist=elm.childNodes ;
var i=0;
while(i != nodelist.length){
if (nodelist.item(i).id=='hiden')
return true;
i++;
}
return false ;
}
</script>
</b:if>
在此請先存檔一次,如果順利過關表示你的code是沒問題的。
接著請按下「展開小裝置範本」,一般人會想要放的位置應該是文章內文的最後面吧?如果是,請在裡面尋找類似的code:
<p><data:post.body/></p>

在找到以後,請將他改成以下的code:(其中中文的部分是可以自由修改的喔^^)

<p>
<div expr:id='"doc_"+data:post.id'>
<data:post.body/>
</div>
<b:if cond='data:blog.homepageUrl == data:blog.url'>
<script type='text/Javascript'>
if(has_id_hiden('doc_<data:post.id/>')==true) {
document.write("<a expr:href='data:post.url' title='繼續閱讀'>繼續閱讀</a>");
}
</script>
</b:if>
</p>
基本上,這樣就完成囉!請儲存以後去看看你的Blog有沒有正常運作囉!

如果是新手但仍賞光採用我的code的人,在放入這些code以後,在撰寫文章時只要將想隱藏的部分用hiden標記給夾起來,在首頁就不會出現囉:
要顯示的部分
<div id='hiden'>
要隱藏的部分
</div>
雖然可能已經過時了,但仍希望所有的舊Blogger使用者都能藉此快速的轉換到Beta版來,享受一下即時發布的爽度!如果以後有空,我會寫一篇關於新舊版範本的比較和注意事項,如果有空,如果有空…

ps.以上的code是假設你只有在"首頁"需要這個功能,如果你希望在Label下也有這樣的功能的話,請將所有的<b:if cond='data:blog.url == data:blog.homepageUrl'>改成<b:if cond='data:blog.pageType == "index"'>即可。

27 則留言:

  1. 可以請問一個笨問題,
    如何轉成beta版?

    回覆刪除
  2. 現在應該幾乎都可以轉了哇??
    除非你有加入team blog之類的...

    回覆刪除
  3. 哦,原來如此,了解,感謝

    回覆刪除
  4. 感謝,我以為會很複雜,沒想到只是簡單的照著作就成功了。
    有了這個功能真是太好了,感謝。

    回覆刪除
  5. 請問您
    我在後台改好了,不過最後那個隱藏的code,是要發表文章時選取"修改html",還是直接貼上就好了呢?
    因為前者按儲存時告訴我出現錯誤:tag is not closed;後者什麼動靜都沒發生
    謝謝!

    回覆刪除
  6. 是要在"修改html"模式下寫的,會出現那個會不會是你不小心漏了哪個部份呢??@@

    回覆刪除
  7. 請問是直接把data:post.body這個全變成
    下面那個code嗎?
    我顯現不出來ㄝ...

    回覆刪除
  8. 是的,請把那一行code全部都改成這樣...顯示不出來應該是漏掉某些部分@@

    回覆刪除
  9. 可是我發現一個問題,我利用您的方法後,確實在首頁可以這樣子隱藏文章全文的其他部分,但是我發現到了標籤的分類的部分時,我點選該分類,就會所有的文章都是顯現全文,可是我看其他人的部落格有繼續閱讀功能的,都能持續有繼續閱讀的功能耶!

    不知tomky有沒什麼方法可以解決。

    PS.我是本來新的blogger使用者,不是舊版的。

    回覆刪除
  10. 甚至到了較舊的文章時,也就是下一頁時,就會消失繼續閱讀這個鍵,不知有沒有什麼方法可以讓他不管在哪裡都能夠點選這個繼續閱讀呢?我是語法白癡......感激不盡

    回覆刪除
  11. 已加上修改成在Label下也有繼續閱讀功能的方法:)

    回覆刪除
  12. 延續inosen的問題,不知是否我更改有誤,但試了幾次,在Label下雖也能有繼續閱讀功能,但「繼續閱讀」四個字及其連結卻消失了,而首頁則仍保持正常。

    回覆刪除
  13. 請問兩個地方都有照步驟改嗎??第一段和第二段都有地方要修改喔~

    回覆刪除
  14. 抱歉,因是外行,加上已經改了好幾次,改到自己都已經花了,也搞不清那裡錯了,後來狠下心來,放棄原來的,全部從頭改過,但仍不行。

    最後才發現,在第二段CODE中並沒有「b:if cond='data:blog.url == data:blog.homepageUrl'」而卻有「b:if cond='data:blog.homepageUrl == data:blog.url'」將這段CODE如TOMKY所言改過後就好了

    現在都OK了,真棒,謝謝您了

    回覆刪除
  15. Tomky 您好。我「較舊的文章」連結是全文閱讀,想請教您是如何讓「較舊的文章」只顯示標題呢?謝謝指教。

    回覆刪除
  16. 1.你所謂的放在head區是放在"footer"裡的head區嗎?
    2.最後你說的div id="hiden"我要放在語法裡的哪裡啊?裡面好多個div id=...我都搞不清楚!

    回覆刪除
  17. 1.你所謂的放在head區是放在"footer"裡的head區嗎?
    2.最後你說的div id="hiden"我要放在語法裡的哪裡啊?裡面好多個div id=...我都搞不清楚!

    回覆刪除
  18. 這個功能我摸索了好久
    也試了很多個版本
    現在終於成功了
    感謝阿: )

    回覆刪除
  19. Tomty:我按照你的指示做.可是一點動靜都沒.該怎辦....
    非常無奈~

    回覆刪除
  20. 請問一下
    我已經把網誌更改完成,用IE開blog時,非常成功,可是用Mozilla開時,格式完全跑掉,還出現一堆奇怪的碼?
    這是什麼問題呢?
    謝謝。

    回覆刪除
  21. 我從Mozilla進去重新改過後,已經可以了。
    非常謝謝你的分享。

    回覆刪除
  22. Tomky你好,用了你這個方法,一切ok
    但想請教如何讓「繼續閱讀」靠右呢?
    (不好意思,我不會語法 >"<)

    回覆刪除
  23. 這要看你的版面怎麼設計...我自己也不知道怎麼寫比較好 XD

    回覆刪除
  24. 沒關係~之前我有copy一個置右的語法
    不過並沒成功,自己不會寫也看不懂
    版面現在這樣也ok啦!Tomky謝謝
    如果你有寫成功,再分享給我^^

    回覆刪除
  25. 終於找到適合我的繼續閱讀了~
    非常感謝您的教學唷 ^^

    回覆刪除
  26. 請問一下 用了這個

    問題一..我沒有繼續閱讀這4個字耶

    還有如果留言意見會有錯誤

    意見會變成 複製我文章..

    變成文章有兩個文章...怎辦 謝謝 急

    回覆刪除
  27. 奇怪的是,縮聞之後圖片不見了耶= =a
    都要點開以後才會出現
    不曉得是哪裡出問題呢??
    能麻煩您幫我看一下嗎:
    http://padlocked02.blogspot.com/

    回覆刪除