|
有部分主機提供的Blog系統,沒有文章分類的功能,只能依據文章日期來讀取文章,這樣子的方式對讀者來說並不太方便,尤其是當讀者只想看自己有興趣的主題時。
本程式可以提供作者自己做文章分類的管理,同時可以在Blog顯示文章分類的選單,該選單並有滑鼠點選展開與收合的效果,可以讓Blog版面簡潔單純.
文章分類選單示範:
程式碼1:
<script src="http://localhost/ifin/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.yam.com/ecommerce/archives/361941.html;1"
article[0][1]="搜尋引擎最佳化 SEO;http://blog.yam.com/ecommerce/archives/374658.html;1"
article[1]=new Array(); /* 宣告「Blog小技巧」分類標題所屬的文章陣列 */
article[1][0]="顯示氣象雲圖;http://blog.yam.com/ecommerce/archives/364258.html;1"
article[1][1]="每日漫畫學英語;http://blog.yam.com/ecommerce/archives/365612.html;1"
article[1][2]="隨機切換樂多Blog網頁樣式;http://blog.yam.com/ecommerce/archives/370522.html;1"
article[1][3]="把中文Blog翻譯成英文網頁;http://blog.yam.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.yam.com/ecommerce/archives/364258.html;1"
程式碼2中標註 add article link 的部分是設定文章連結的區塊,文章連結由article陣列控制,陣列註標由0開始,註標有兩組,第一組註標標示出是哪一個分類標題,對應到前述分類標題陣列的註標;第二組註標則標示出該分類標題的第幾篇文章。
article的陣列元素設定值有三個,以分號「;」隔開,第一個設定值是文章標題,上列中的「顯示氣象雲圖」即是該文章的標題文字;第二個值設定文章的連結位址;第三個設定值設定為1時,代表點選該文章連結會開啟新的瀏覽器視窗,設定為0或不設定時,則在原視窗顯示該篇文章內容。
新增文章時只要增加article的陣列元素,同時注意依據該文章所屬分類給第一組註標,再依文章順序給第二組註標。
新設定的分類標題要開始設定文章連結前,要先宣告該分類標題所屬的文章陣列,如下面的例子:
article[1]=new Array();
其中的註標即是新分類標題的註標值。
改變選單風格:
程式碼2中以標籤包起來的部分,即是文章分類選單的外觀設定CSS,其中div.catalog是設定分類標題,div.article是設定文章連結。
Blog實際應用範例
|
