Xuite樣式研讀攻略！

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

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

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

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

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

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

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

在按下一步與確定後，HTTrack便開始複製網頁內容到指定目錄內。稍待片刻就會看到完成的畫面，接著用檔案總管開啟步驟１輸入的存放目錄(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)資料、自訂檔案等，列表如下。

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

• 側邊欄位的樣式類別名稱都以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提供的側邊欄位做份彙總清單：

有了這些基本概念後，就可以用網頁編輯工具來做修改或進一步檢視。在此我用的是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)