Xuite樣式研讀攻略！

2005/06/04 |

| 點擊數: 6 / 676

開始試著對Xuite的樣式做調整，因此要在自己電腦上建置網頁與樣式表的編輯環境。

第一步是將自己的網頁複製回來，以使用網頁編輯工具來檢視與修改。用來「砍站」的工具是HTTrack Website Copier V3.33；一般講到砍站軟體最常被提到的是Teleport，不過HTTrack既不用費用、是Open Source、又有繁體中文介面，操作簡單、選項又多，因此推薦大家使用看看，而我這次就是用HTTrack來操作的。

1. 執行HTTrack後，先輸入專案名稱與複製回來檔案的存放目錄(d:\xuite2)。
　 HTTrack 1

2. 接著輸入Web網址，在這裡輸入您自己的網誌的網址。為了不要抓太多的檔案回來，可以這樣做：

建立一個沒有文章的新日誌
再用管理網頁的版面編排把「日曆」、「已建立的日誌」拿走，以避免連結到別的日誌去了

再下載剛建好的新日誌網址，這樣整個下載的時間與容量可以控制在較少的狀態。
　 HTTrack 2

3. 在步驟２也可以打開選項視窗，以設定需要的下載選項。如果是下載新建日誌，那麼就不用做任何選項設定。
　 HTTrack 3

在按下一步與確定後，HTTrack便開始複製網頁內容到指定目錄內。稍待片刻就會看到完成的畫面，接著用檔案總管開啟步驟１輸入的存放目錄(d:\ xuite2)，該目錄內以專案名稱建了一個子目錄(xuite_life)，在子目錄內依網站名稱又建立了許多個子目錄，我們有興趣的是 blog.xuite.net，因此進入blog.xuite.net目錄，此目錄複製了Xuite網站的各個網頁元件。

完整的目錄結構是：d:\xuite2\專案名稱\blog.xuite.net\emisjerry\life
紅色部份就是對應到您網址的目錄了。接著來看看Xuite網誌的文件目錄結構：

　 Xuite directory structure

由目錄結構來看，在網址http://blog.xuite.net中，除了您的日誌列表首頁(/emisjerry)外，還有_common、 _image、_theme、_users等目錄，分別用來儲存共用的JavaScript檔案(.js)、圖形檔、佈景(Theme)資料、自訂檔案等，列表如下。

目錄	子目錄	檔案	說明
_common		*.js	共用的JavaScript檔案
_image		*.gif	網頁上側邊欄位以外部份使用到的圖檔，例如RSS圖檔
	\css	sub_menu_?.gif css.css	My Xuite出現的功能表使用的圖檔 My Xuite功能表使用的CSS檔
	\love	mind*.gif	我的心情的各式圖檔
_theme	\skin\background\27	bg.css blogBG_*.gif	背景使用的CSS檔；27是選用的佈景編號背景圖檔
	\skin\window\27	window.css blog*.gif	側邊欄位標題列使用的樣式表與圖檔
	\skin\list	bullet*.gif	側邊欄位標題列開頭的小圖示檔案

再來我們用側邊欄位的「參觀人次統計」的網頁結構來做圖示說明：

側邊欄位的樣式類別名稱都以Item開頭，例如人次統計就是ItemCounter
標題分成左、中、右三大塊，類別名分別是ItemCounter-Lf、ItemCounter-Mid和ItemCounter-Rt，在左邊夾有其圖示類別：ItemCounter-bullet
圖檔是放在類別的background-image屬性內，例如左上角圖形就是設定成：
url(http://blog.xuite.net/_theme/skin/windows/27/blog011_1.gif)，亦即_theme/skin/window目錄內，依選擇的佈景而有不同

　 class desc

我將目前Xuite提供的側邊欄位做份彙總清單：

各種側邊欄位	功用
ItemCategory	文章分類
ItemCalendar	日曆
ItemSearch	搜尋文章
ItemBlogResource	日誌使用資源
ItemRank	日誌評價
ItemCounter	參觀人次統計
ItemBlogList	已建立的日誌
ItemAlbum	已建立的相簿
ItemArticleList	最新文章
ItemMessageList	最新留言
ItemEpaper	訂閱電子報
ItemMusicBox	背景音樂
ItemChat	我的哈拉室
ItemLink	最愛連結
ItemCustom	自由欄位
ItemPaint	留言塗鴉版
ItemRssRoll	我的訂閱
ItemAD	廣告欄位

有了這些基本概念後，就可以用網頁編輯工具來做修改或進一步檢視。在此我用的是Nvu 1.0PR，一個Open source的軟體；您可以看這個連結：Nvu的介紹，再到教學網站去看使用方法。

進入Nvu後再開啟下載回來的網誌首頁(d:\xuite2\xuite_life\blog.xuite.net\emisjerry\ life.html)，由功能表 Tools→CSS Editor打開樣式表的編輯視窗。在CSS Editor裡就可以很方便的用圖形介面來調整樣式的各個外觀與屬性了。
　