2005年09月22日
自訂文章分類選單
本程式可以提供作者自己做文章分類的管理,同時可以在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>
設定分類標題:
catalog_title[0]="網路商店;1";
catalog_title的陣列元素設定值有兩個,以分號「;」隔開,第一個設定值是標題文字,上列中的「網路商店」即是該分類的標題文字;第二個設定值設定為1時,代表該分類標題預設展開,設定為0或不設定時,該標題預設為收合。
新增分類標題時只要增加catalog_title的陣列元素,依順序給新陣列元素註標。
設定文章連結:
article[1][0]="顯示氣象雲圖;http://blog.roodo.com/ecommerce/archives/364258.html;1"
article的陣列元素設定值有三個,以分號「;」隔開,第一個設定值是文章標題,上列中的「顯示氣象雲圖」即是該文章的標題文字;第二個值設定文章的連結位址;第三個設定值設定為1時,代表點選該文章連結會開啟新的瀏覽器視窗,設定為0或不設定時,則在原視窗顯示該篇文章內容。
新增文章時只要增加article的陣列元素,同時注意依據該文章所屬分類給第一組註標,再依文章順序給第二組註標。
新設定的分類標題要開始設定文章連結前,要先宣告該分類標題所屬的文章陣列,如下面的例子:
article[1]=new Array();
改變選單風格:
程式碼2中以<style></style>標籤包起來的部分,即是文章分類選單的外觀設定CSS,其中div.catalog是設定分類標題,div.article是設定文章連結。
引用URL
我得找個地方練習一下這方法,然後才知道能不能放在我的Blog。
謝謝!辛苦了。
可是分類選單一個字也顯示不出來,
我是用google的blogger,不知道事google不能放還是我放的位置的問題?
如果語法沒有錯,你能不能幫我找出來到底哪裡有問題?謝謝你囉...
可是我再你幫我測試的那一篇,你不是說如下面所示,可是我啥都沒有看見欸??
這是怎麼一回事勒??
麻煩你了,哀.....
實在不好意思,找出問題原因了,上面「自訂文章分類選單」裡面的"程式碼1"的內容有問題,我貼成測試的網址了,現在已經更正成正確的網址,請你把你原來的程式碼1的部分改成現在我更正後的寫法,應該就沒問題了.
(一定會註明你的大名及聯結的)
可以嗎...我覺得很受用呢!
可以的! 歡迎喔!
我說:我成功囉!真是太感謝你了,你真是有耐心....謝謝你
我還有一個問題是有關版面的:第一,請問你喔,我要怎麼把版面改成三欄式的呢?
你可不可以給我語法讓我做參考,然後自己調整勒?
第二個,我右邊那一欄不知道要怎麼把它拉上來跟文章並排,不知道要怎麼調整
是我文章設定框度太寬嗎?還是相對位置跑掉了的問題啊?還是其他原因?
敎敎我吧!
網路上也有許多部落格有介紹版面設定的相關技術,你花點時間找找一定可以找到.
我看到你版面上的那個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 >
不好意思又要麻煩你了...
(日文原作) http://reverb.jp/vivian/download.php?itemid=Pholiot
(中文說明) http://blog.roodo.com/dfazen/archives/110859.html
程式碼2又要放在哪個檔裡??
但是又很想試試這個功能,可否詳細告知!
因我的BLOG是由10個人共同使用,
若可以依作者來分類文章就更棒了!
不是我故意講得不詳細耶,事實上每家Blog的設定方式都不太一樣,你也沒說清楚你是用哪家的Blog,而我也不是神仙,很難光從你的抱怨猜到你用哪種Blog.
假如你是用蕃薯藤的樂多Blog的話,可以參考下面這篇文章
http://blog.roodo.com/ecommerce/archives/1081268.html
如果是別家的,那就請先找到你那家Blog貼程式碼的說明,請善用網路搜尋的功能.