開始試著對Xuite的樣式做調整,因此要在自己電腦上建置網頁與樣式表的編輯環境。
第一步是將自己的網頁複製回來,以使用網頁編輯工具來檢視與修改。用來「砍站」的工具是HTTrack Website Copier V3.33;一般講到砍站軟體最常被提到的是Teleport,不過HTTrack既不用費用、是Open Source、又有繁體中文介面,操作簡單、選項又多,因此推薦大家使用看看,而我這次就是用HTTrack來操作的。
1. 執行HTTrack後,先輸入專案名稱與複製回來檔案的存放目錄(d:\xuite2)。

2. 接著輸入Web網址,在這裡輸入您自己的網誌的網址。為了不要抓太多的檔案回來,可以這樣做:
- 建立一個沒有文章的新日誌
- 再用管理網頁的版面編排把「日曆」、「已建立的日誌」拿走,以避免連結到別的日誌去了
再下載剛建好的新日誌網址,這樣整個下載的時間與容量可以控制在較少的狀態。

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

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

由目錄結構來看,在網址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目錄內,依選擇的佈景而有不同

我將目前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裡就可以很方便的用圖形介面來調整樣式的各個外觀與屬性了。

關於Xuite樣式的研讀就先介紹到此了。只要本地端有了可以測試與檢視的環境後,就能自由自在、任意的測試與修改,待修改滿意後,再到面板管理的 自定樣式 (CSS)覆蓋原有內容。這樣應該會比直接在網頁做修改來得便利的。
最後要再提示一點:本人並非Xuite開發團隊成員,與Hinet無任何關係(唯一的關聯是家裡使用其ADSL)。本篇僅是個人研究的心得發表,若有錯誤請勿責怪本人,而您發現的任何錯誤也請分享給本人。最正確的資訊應該還是要由Xuite開發團隊內部Release出來。
您可能也會有興趣的類似文章
- [Xuite] 令人混淆的「我的日誌」和「日誌列表」 (0則留言, 2005/06/04)
- [Xuite] 文章標題列樣式的簡單變化 (0則留言, 2005/06/04)
- [創作] 字型工具產生器:動態變更Blog網頁的字型大小 (4則留言, 2007/04/29)
- [創作] 翻譯服務產生器:產生放於Blog側邊欄的翻譯按鈕 (3則留言, 2007/04/28)
- [Xuite] 自由欄位設定功能啟用 (0則留言, 2005/04/14)
- Xuite網址的正規運算式測試 (1則留言, 2007/04/30)
- Xuite再度變身! (0則留言, 2007/08/31)
- [Xuite] 變更有文章日期的日曆樣式 (5則留言, 2005/07/20)
- [Xuite] 加上Flash的時鐘顯示(範例在右方) (8則留言, 2005/04/24)
- Xuite 功能大躍升!! (1則留言, 2005/03/29)
- [創作] 個人網頁全都連:Show Yourself Generator V1.0 (0則留言, 2007/04/21)
- [Xuite] 在Xuite中使用上傳的圖片 (0則留言, 2005/04/15)
- 氣象局衛星雲圖修正-討厭,怎麼又改了? (0則留言, 2008/11/03)
- [Site] Blog平台新選擇:Xuite (3則留言, 2005/03/14)
- Xuite 浮光掠影的映像介紹 (0則留言, 2005/03/29)















其實你分析的很透徹! 不過未來這些都還是改成Movable Type的CSS格式!