2005年09月22日

自訂文章分類選單

有部分主機提供的Blog系統,沒有文章分類的功能,只能依據文章日期來讀取文章,這樣子的方式對讀者來說並不太方便,尤其是當讀者只想看自己有興趣的主題時。
本程式可以提供作者自己做文章分類的管理,同時可以在Blog顯示文章分類的選單,該選單並有滑鼠點選展開與收合的效果,可以讓Blog版面簡潔單純.

文章分類選單示範:



程式碼1:

<script src="http://www.ezeshop.com.tw/sidebar/show-catalog.php" language="JavaScript" type="text/javascript">
</script>


程式碼2:

<style>
div.catalog {
  cursor:hand;
  font-weight:bold;
  background-color:blue;
  color:white;
}

div.article {
  margin-left:10;
  background-color:yellow;
}
</style>

<script type="text/javascript">
catalog_title = new Array();
article=new Array();

/* add catalog title */
catalog_title[0]="網路商店;1";
catalog_title[1]="Blog小技巧";

/* add article link */
article[0]=new Array();  /* 宣告「網路商店」分類標題所屬的文章陣列 */
article[0][0]="網路商店建置考量;http://blog.roodo.com/ecommerce/archives/361941.html;1"
article[0][1]="搜尋引擎最佳化 SEO;http://blog.roodo.com/ecommerce/archives/374658.html;1"

article[1]=new Array();  /* 宣告「Blog小技巧」分類標題所屬的文章陣列 */
article[1][0]="顯示氣象雲圖;http://blog.roodo.com/ecommerce/archives/364258.html;1"
article[1][1]="每日漫畫學英語;http://blog.roodo.com/ecommerce/archives/365612.html;1"
article[1][2]="隨機切換樂多Blog網頁樣式;http://blog.roodo.com/ecommerce/archives/370522.html;1"
article[1][3]="把中文Blog翻譯成英文網頁;http://blog.roodo.com/ecommerce/archives/407725.html;1"

showCatalog(catalog_title,article);
</script>

程式碼1是導入所使用的函數,程式碼2則是由作者自己維護的文章分類標題及文章連結.

設定分類標題:

catalog_title[0]="網路商店;1";

程式碼2中標註 add catalog title 的部分是設定分類標題的區塊,分類標題由catalog_title陣列控制,陣列註標由0開始。
catalog_title的陣列元素設定值有兩個,以分號「;」隔開,第一個設定值是標題文字,上列中的「網路商店」即是該分類的標題文字;第二個設定值設定為1時,代表該分類標題預設展開,設定為0或不設定時,該標題預設為收合。
新增分類標題時只要增加catalog_title的陣列元素,依順序給新陣列元素註標。

設定文章連結:

article[1][0]="顯示氣象雲圖;http://blog.roodo.com/ecommerce/archives/364258.html;1"

程式碼2中標註 add article link 的部分是設定文章連結的區塊,文章連結由article陣列控制,陣列註標由0開始,註標有兩組,第一組註標標示出是哪一個分類標題,對應到前述分類標題陣列的註標;第二組註標則標示出該分類標題的第幾篇文章。
article的陣列元素設定值有三個,以分號「;」隔開,第一個設定值是文章標題,上列中的「顯示氣象雲圖」即是該文章的標題文字;第二個值設定文章的連結位址;第三個設定值設定為1時,代表點選該文章連結會開啟新的瀏覽器視窗,設定為0或不設定時,則在原視窗顯示該篇文章內容。
新增文章時只要增加article的陣列元素,同時注意依據該文章所屬分類給第一組註標,再依文章順序給第二組註標。
新設定的分類標題要開始設定文章連結前,要先宣告該分類標題所屬的文章陣列,如下面的例子:

article[1]=new Array();

其中的註標即是新分類標題的註標值。

改變選單風格:
程式碼2中以<style></style>標籤包起來的部分,即是文章分類選單的外觀設定CSS,其中div.catalog是設定分類標題,div.article是設定文章連結。


Posted by tlight at 樂多Roodo! │22:57 │回應(13)引用(0)Blog小技巧
樂多分類:網路/3C 共同主題:Blog小密技 工具:編輯本文
Ads by Roodo! 

引用URL

http://cgi.blog.roodo.com/trackback/511886
回應文章
真感動,做得真好。

我得找個地方練習一下這方法,然後才知道能不能放在我的Blog。

謝謝!辛苦了。
Posted by Rach at 2005年09月27日 19:41
哈囉...我昨天弄好選單以後把語法直接放進sidebar,
可是分類選單一個字也顯示不出來,
我是用google的blogger,不知道事google不能放還是我放的位置的問題?
如果語法沒有錯,你能不能幫我找出來到底哪裡有問題?謝謝你囉...
Posted by clairezou at 2005年12月18日 10:29
還有啊...先感謝你幫我測試...
可是我再你幫我測試的那一篇,你不是說如下面所示,可是我啥都沒有看見欸??
這是怎麼一回事勒??
麻煩你了,哀.....
Posted by clairezou at 2005年12月18日 10:36
clairezou:
實在不好意思,找出問題原因了,上面「自訂文章分類選單」裡面的"程式碼1"的內容有問題,我貼成測試的網址了,現在已經更正成正確的網址,請你把你原來的程式碼1的部分改成現在我更正後的寫法,應該就沒問題了.
Posted by TLight at 2005年12月18日 12:40
還有啊...我想要寫一篇這個的作法,能把你的語法加進我寫的文章嗎?
(一定會註明你的大名及聯結的)
可以嗎...我覺得很受用呢!
Posted by clairezou at 2005年12月18日 20:00
clairezou:
可以的! 歡迎喔!
Posted by TLight at 2005年12月18日 20:26
哈囉哈囉~我上一篇的留言竟然沒有留下,再留一次吧
我說:我成功囉!真是太感謝你了,你真是有耐心....謝謝你
我還有一個問題是有關版面的:第一,請問你喔,我要怎麼把版面改成三欄式的呢?
你可不可以給我語法讓我做參考,然後自己調整勒?
第二個,我右邊那一欄不知道要怎麼把它拉上來跟文章並排,不知道要怎麼調整
是我文章設定框度太寬嗎?還是相對位置跑掉了的問題啊?還是其他原因?
敎敎我吧!
Posted by clairezou at 2005年12月19日 12:52
版面的部分我不清楚,而且每家Blog選用版面的方式都不太一樣,在樂多這裡是只要直接選擇三欄式的版面,就會變成三欄了.
網路上也有許多部落格有介紹版面設定的相關技術,你花點時間找找一定可以找到.
Posted by TLight at 2005年12月19日 15:22
哈囉哈囉
我看到你版面上的那個Pholiot
我自己也試著做做看
可是我沒有弄成功欸...
我的語法是這樣的,你可以幫我看看嗎?(總覺得少了什麼)
< script type="text/javascript" language="JavaScript" src="http://www.freewebtown.com/clairezouphoto/pholiot.js" >< /script >

< script type="text/javascript" language="JavaScript" >
showPholiot({url:'http://www.freewebtown.com/clairezouphoto/pholiot.swf', data_url:'http://www.freewebtown.com/clairezouphoto/pholiot.xml', bgcolor: '#751c49', width: 'font color="orange">180', height: '260', menu: 'false'});
< /script >

不好意思又要麻煩你了...
Posted by clairezou at 2005年12月19日 18:13
Pholiot不是我的作品,我也是網路上找到的,使用及設定方法請參考:
(日文原作) http://reverb.jp/vivian/download.php?itemid=Pholiot
(中文說明) http://blog.roodo.com/dfazen/archives/110859.html
Posted by TLight at 2005年12月20日 00:13
我真的看不懂要把程式碼1放在哪個檔裡??
程式碼2又要放在哪個檔裡??
但是又很想試試這個功能,可否詳細告知!
Posted by 小妖怪 at 2006年06月4日 15:28
有沒有依作者來分類文章的程式!!
因我的BLOG是由10個人共同使用,
若可以依作者來分類文章就更棒了!
Posted by 小妖怪 at 2006年06月4日 15:31
小妖怪:
不是我故意講得不詳細耶,事實上每家Blog的設定方式都不太一樣,你也沒說清楚你是用哪家的Blog,而我也不是神仙,很難光從你的抱怨猜到你用哪種Blog.

假如你是用蕃薯藤的樂多Blog的話,可以參考下面這篇文章
http://blog.roodo.com/ecommerce/archives/1081268.html
如果是別家的,那就請先找到你那家Blog貼程式碼的說明,請善用網路搜尋的功能.
Posted by TLight at 2006年06月5日 11:03