2009年9月27日 星期日

幫部落格做個網站目錄(文章列表)吧


先前綸太郎有幫自己做一個用文章分類來列表的網站目錄,完全是人工作業,自己做超連結,大概兩三個禮拜才會手動更新,今天在Bloganol dot com網站看到,有利用Java Script的方法,快速的就能將之前的文章列出清單,真的是非常的方便,跟大家分享。

參考來源:
Create Table of Contents in Blogger sorted by Date(Archived) or Labels in Blogger

我的方式是以另起一篇新文章來實做,然後在部落格新增一個超連結,指向這篇文章即可。
例如
<a href="文章列表網址" target="_blank">網站目錄</a>

一、依日期分類
該作者設計的程式,最新的日期會在最上方,按月份分類,
記得語法是要在修改Html模式裡貼上,不是在撰寫模式下歐,不然會失敗。

2010.3.17更新,有網友反應無法成功,查了一下原因,原來是作者的js檔案連結失效,目前綸太郎有保留,
依月份日期的js檔
http://sites.google.com/site/lunfiles/js/archivedate.js
依文章分類的js檔
http://sites.google.com/site/lunfiles/js/archivepost.js
請下載後上傳到您自己的空間再利用,把藍色的js網址連結換成您自己的空間網址,請勿直接連結綸太郎的網址,否則以後移除後您也無法再利用。

<script src="http://deineshd.110mb.com/scripts/tocbyarchivemin.js">
</script>
<script src="http://01mistery.blogspot.com/feeds/posts/default?max-results=500&amp;alt=json-in-script&amp;callback=loadtoc">
</script>

裡面紅色字體的網址要換成你自己的部落格網址。

二、依文章分類
先是數字、再來以英文排序,這有一個缺點,就是最新的文章他不會在分類目錄最前面,目前我不知道他是用什麼基準來排列,不過最新文章旁邊會有一個New!!的字樣就是了。
<script style="text/javascript" src="http://deineshd.110mb.com/scripts/blogtoc-min.js"></script>
<script src="http://01mistery.blogspot.com/feeds/posts/default?max-results=500&alt=json-in-script&callback=loadtoc"></script>



記得裡面紅色字體的網址要換成你自己的部落格網址才行,這樣就可以有屬於自己的文章列表了,以後查詢資料也比較方便,而且更新文章幾乎是即時的。

另外作者的語法是限制500篇文章,因為Javascript的語法我也不懂,應該如果大於500篇,可能是修改其中max-results=500的數字吧,對於這個工具,麻煩有問題可能要請教該名作者,這是它設計的js程式,我只是分享給大家,希望需要的人可以利用。

別家的部落格是不適用,這是作者專為Google Blogger設計的Hacks,真是謝謝他,不過目前還是會以舊有的目錄為優先,畢竟已經做了那麼久了,自己要加什麼敘述也比較方便,另外弄個新的文章列表連結即可。

當然我們後台也是有新增小工具,稱為網誌存檔(Archive)的工具,但他是顯示在邊欄(sidebar)裡,而且文章一多時,整個版面就會被拉長,我個人是不中意,所以沒裝這玩意,不過它更新的速度是比RSS資訊提供來得快,所以很多朋友是利用它來作最新文章的小工具也是不錯的。

23 則留言:

  1. 您好
    關於 幫部落格做個網站目錄(文章列表)吧
    http://01mistery.blogspot.com/2009/09/contents-list.html

    我始終無法成功,是否還要做其他的設定?

    回覆刪除
  2. 我試了一下,原來是他原先的js檔案連結已失效,我有留存,你可以改成你自己的檔案連結,http://sites.google.com/site/lunfiles/js/archivedate.js

    回覆刪除
  3. 也謝謝您的回報,文章已有更新。

    回覆刪除
  4. 謝謝!
    搞定了
    您真是BLOGGER 達人

    回覆刪除
  5. 不好意思 ,請問怎麼我最新文章是顯示紅色的"Baru!!"

    回覆刪除
  6. 原作者非英文寫作,我的js檔有改過,你可以下載到自己空間再執行。

    回覆刪除
  7. 綸桑,請教一下,我要依tag分類方式做文章列表,您寫的那段程式碼應該要塞在那裡?謝謝。

    回覆刪除
  8. 你的意思應該是要用在邊欄sidebar吧,我想應該沒法這樣用吧。

    回覆刪除
  9. 綸桑,那個「依文章分類」不是在點入Tag後會在該網頁裡成為清單式列表嗎?如您最後一張附圖顯示?還是我誤會了?=A=

    回覆刪除
  10. 你可以看看我的頁面 http://01mistery.blogspot.com/2009/09/0101mistery-contents.html 他是直接列出全部清單,而非點tag後才列出,點tag後,當然也是會另外出現,你可以按下我給你的網址,看看是否是你需要的模式。

    回覆刪除
  11. 綸桑,果然是我誤會了.......=A=
    不過也是可以一試,
    其實我主要是想像這位部落格主的文章列表方式:
    http://tonychou.blogspot.com/search/label/%E6%95%99%E5%AD%B8
    也是可以詢問這位版主,
    只是他的教學不像綸桑這麼簡單易懂......Orz

    所以程式應該塞在那裡?

    回覆刪除
  12. 如果只是要文章標題列表,可以參考這個做法 http://neroro.blogspot.com/2007/01/blog.html 這個Hacks很早就有了

    回覆刪除
  13. 謝謝綸桑,我有點給它累格了。TAT

    回覆刪除
  14. 我是了好幾次都沒有辦法像你這樣分類 到底怎麼了!!

    回覆刪除
  15. 你有改成這個js檔嗎?
    http://sites.google.com/site/lunfiles/js/archivedate.js

    回覆刪除
  16. 謝謝分享,正想找這樣的功能說。

    回覆刪除
  17. 版主,想請問您,
    我套用了您的『依日期分類』之js,
    如 http://hello-lin-kelly.blogspot.com/p/blog-page.html 所示,
    但我不懂,前面的[24]... 等序號是表示什麼意思 ^^"
    為什麼起始號碼布是[01]!?
    有些序號還會重複!?
    總覺得應該是特殊意義,不是bug問題,可否勞煩版主解釋一下。 ^^"

    p.s. 您的這個分享,真的是非常好用,相當感謝!

    回覆刪除
  18. 版煮對不起,
    我耍笨了 @@",
    我看出[]裡面裝的是日期了!!!

    回覆刪除
  19. 感謝這篇文章,一直不知道這個文章列表模版的出處,現在知道了~~

    回覆刪除
  20. 謝謝你的分享~我也做了一個網站目錄了
    很受用!

    回覆刪除
  21. 請問一下...JS檔要儲存在哪裡??才可以用??
    不好意思...我的問題很白癡= =

    回覆刪除

設有留言驗證及核准,版主閱覽後,留言才會顯示,發問前請善用網站目錄Google搜尋功能