Monday, August 27, 2007

筆記:加上文章列表(ToC: Table of Contents)

ToC(ToC: Table of Contents)這個功能可以將部落格所有的文章整理成一個列表。

點擊側邊Table of Contents欄位中的Show Table of Contents,就會在原本發佈文章的主欄位上方列出所有文章,再點擊一次Hide Table of Contents,就可以收起文章列表。

點擊列表標題欄位POST TITLE或POST DATE,可以依標題或時間排序;點擊LABELS,則篩選列出同一標籤的文章。

這個實用的功能也是Beautiful Beta的HANS所釋出,原文請參考BlogToC Widget Released。以下仍是我依樣畫葫蘆所做的修改:

Step 1:允許範本主欄位(Main)可以再新增一個網頁元素。
找到
<b:section class='main' id='main' showaddelement='no'>
改為
<b:section class='main' id='main' maxwidgets='2' showaddelement='yes'>

Step 2:將下面有關表格格式設定的程式碼貼在<head>與</head>之間的css區塊,如 <b:skin><![CDATA[之後,或]]></b:skin> </head>之前。我自己是貼在]]></b:skin> </head>之前。
/* ToC的CSS開始*/
#toc {
border: 0px solid #000000;
background: #ffffff;
padding:5px;
width:100%;
margin-top:10px;
}
.toc-header-col1, .toc-header-col2, .toc-header-col3 {
border-top: 1px solid #4c4c4c;
border-bottom: 1px dotted #4c4c4c;
color: #000000;
padding-left: 5px;
width:50%;
}
.toc-header-col2 {
width:15%;
}
.toc-header-col3 {
width:25%;
}
.toc-header-col1 a:link, .toc-header-col1 a:visited, .toc-header-col2 a:link, .toc-header-col2 a:visited, .toc-header-col3 a:link, .toc-header-col3 a:visited {
text-decoration:none;
font-size: 95%;
color:#4c4c4c;
}
.toc-header-col1 a:hover, .toc-header-col2 a:hover, .toc-header-col3 a:hover {
text-decoration:underline;
font-size: 95%;
}
.toc-entry-col1, .toc-entry-col2, .toc-entry-col3 {
padding-left: 5px;
}
/* ToC的CSS結束*/


Step 3:儲存範本。切換至【範本 | 網頁元素】(Template/Page Elements)。

Step 4:在中間主欄位(Main)上方,【加入網頁元素】(Add a Page Element),新增【HTML/JavaScript】網路元素,標題留白,貼上下列原始碼。
<div id="toc"></div>

Step 5:在側邊欄位(sidebar),【加入網頁元素 】,新增【HTML/JavaScript】網路元素,標題訂ToC或Table of Contents,貼上下列原始碼,將YOURBLOG改成自己的部落格域名。
<div id="toclink"><a href="javascript:showToc();">Show Table of Contents</a></div>
<script style="text/javascript" src="http://home.kpn.nl/oosti468/downloads/blogtoc.js"></script>
<script src="http://YOURBLOG.blogspot.com/feeds/posts/default?alt=json-in-script&max-results=999&callback=loadtoc"></script>
<script src="http://YOURBLOG.blogspot.com/feeds/posts/default?alt=json-in-script&start-index=101&max-results=100&callback=loadtoc"></script>


Step 6:移動Table of contents這個網路元素到喜歡的位置,儲存。

6 comments:

Miss Jsaid... said...

Hello and good day to u
請問一下 你是哪個版型 我想把我的BLOG改成三排的 但是範本裡好像找不到
Thanks

shiouhhc : said...

我用的是 Stretch Denim,修改可以參考筆記:將Template改成三欄

I'm Han-Hong Wangsaid... said...

感謝你的教學^^ 超實用~

剛馬上用就成功了~

可以有文章列表真的很棒

準提小種子said... said...

您好.十分受用,但請問我要怎麼讓它有分頁嗎?因為我覺得我的好長哦,冏!!!
請幫我看一下,好嗎?
謝謝你..
http://cundibuda.blogspot.com/

米克said... said...

Shiou你好:
非常感謝你的提供,這個非常實用喔!

想請問兩個比較麻煩的問題。在顯示出來的列表的最上方會出現文章數量- Displaying all XX posts,如果我只想要這一句話,請問在js檔中該保留哪些部份呢?blogger雖然能夠自動計算文章數量,但因為我是要讓他顯示在其它地方,所以想借用這個功能的力量。(若有興趣的話,你可以來看看。我目前是把這個功能轉成文章分類列表,取代blogger的文章標籤,但是後面沒辦法顯示文章數量,所以想要試試看用這個功能來做顯示)

另外,語法中max-results=999,最多顯示999篇,那如果超過這個數量該怎麼辦呢?聽說最多就只能設999,那可以運用翻頁等方式補救嗎?

不好意思,問題比較麻煩,再次感謝你的提供,希望可以順便幫個忙。

Xeniasaid... said...

太棒了,一直需要"所有文張列表"功能!
謝謝分享語法與步驟^^