Xuite樣式研讀攻略！

2005/06/04 | Blog工具箱 | 作者: 簡睿| 閱讀總數 364 , 4 (本日)Share/Bookmark

 

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

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

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

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

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

再下載剛建好的新日誌網址，這樣整個下載的時間與容量可以控制在較少的狀態。 
　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裡就可以很方便的用圖形介面來調整樣式的各個外觀與屬性了。
　CSS Editor

關於Xuite樣式的研讀就先介紹到此了。只要本地端有了可以測試與檢視的環境後，就能自由自在、任意的測試與修改，待修改滿意後，再到面板管理的 自定樣式 (CSS)覆蓋原有內容。這樣應該會比直接在網頁做修改來得便利的。

最後要再提示一點：本人並非Xuite開發團隊成員，與Hinet無任何關係(唯一的關聯是家裡使用其ADSL)。本篇僅是個人研究的心得發表，若有錯誤請勿責怪本人，而您發現的任何錯誤也請分享給本人。最正確的資訊應該還是要由Xuite開發團隊內部Release出來。

類似主題的文章

標籤: , , , , ,

留言－您的隻字片言對作者都是莫大的鼓勵

 1.  留言 作者: 狗貓 撰寫時間: 2005/06/05 04:04

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

回覆


撰寫留言





隨機文章

本日點擊排行 本周點擊排行 本月點擊排行 歷史點擊排行 | 統計表
  1. 用ShareMonitor記錄資料夾分享的存取歷史 (40 人次, 2010-03-18)
  2. DOS命令使用技巧1：最快把文字檔案貼入剪貼簿的方法 (31 人次, 2010-02-27)
  3. 使用IMETOOL有效控制中文輸入法 (29 人次, 2010-02-27)
  4. 使用Memory Fox附加元件為Firefox進行定期記憶體瘦身 (28 人次, 2010-02-27)
  5. 另一套適用手機的影片轉檔工具：WinAVI 3GP/MP4/PSP/iPod Video Converter (28 人次, 2009-04-18)
  6. DOS使用技巧2：檢視超大檔案檔尾內容的指令WinTail.exe (27 人次, 2010-02-27)
  7. 日劇《仁醫 JIN》與漫畫《仁者俠醫》觀後雜感 (26 人次, 2009-10-29)
  8. DOS命令使用技巧4：由DOS視窗迅速切換資料夾的方法 (26 人次, 2010-02-27)
  9. DOS命令使用技巧3：由DOS視窗將目前資料夾用檔案總管開啟的方法 (26 人次, 2010-02-27)
  10. 超方便下載[Google圖書]的資料 (26 人次, 2010-02-27)
  11. 將Google Buzz、Twitter與Facebook在Gmail裡合而為一的步驟 (25 人次, 2010-02-18)
  12. 令人動容的日劇《不毛地帶》片尾曲：Tom Traubert's Blue[修訂] (24 人次, 2009-11-22)
  13. Plurk CSS樣式自訂修改全攻略 (24 人次, 2009-07-04)
  14. 超簡單MSN下載檔案自動分類 (21 人次, 2010-02-27)
  15. [轉貼] 转：容易弄错的繁体字 (19 人次, 2010-02-18)
  16. Windows 7的常用快速鍵速查表 (19 人次, 2010-01-05)
  17. 輕鬆學會彈指神功－揭露AutoHotkey絕技 (19 人次, 2008-04-10)
  18. 把HTC Touch HD操作介面換成Spb Mobile Shell，美觀又便利! (18 人次, 2009-02-18)
  19. 啟用Vista與Windows 7的無敵模式(God Mode) (18 人次, 2010-01-03)
  20. 強化HTC Touch HD的工具軟體 (18 人次, 2009-02-25)
  21. 將噗浪的視窗高度變大，加上分隔線，以方便閱讀 (17 人次, 2009-06-06)
  22. 強化閱讀第２噗：變更噗浪回應的字體與背景顏色 (16 人次, 2009-06-07)
  23. 能在HD手機上順暢運行的3D賽車+射擊遊戲：Xtrackt (15 人次, 2009-09-12)
  24. 從韓劇《市政廳》笑看韓國選舉花招 (15 人次, 2009-09-05)
  25. 三款「桌面便利貼」試用、剖析與建議 (14 人次, 2008-05-03)
  26. 變更Windows Mobile的藍牙檔案接收儲存資料夾 (14 人次, 2009-05-16)
  27. 用FinchSync同步Thunderbird與HTC Touch HD的聯絡人資料 (14 人次, 2009-02-01)
  28. Windows Mobile使用的完美聯絡人軟體：Inesoft Phone [修訂] (14 人次, 2009-02-28)
  29. 調整Windows 7環境: 加回工作列的「顯示桌面」圖示 (14 人次, 2010-01-02)
  30. [Tools] 撰寫AutoHotKey指令以複製檔案 (13 人次, 2005-06-11)
  31. 用AutoHotkey輕鬆製作螢幕小鍵盤 (13 人次, 2008-03-16)
  32. 將Plurk回應區變成固定寬度 (13 人次, 2009-07-11)
  33. HTC Touch HD完整重置與升級ROM的步驟 (13 人次, 2009-05-16)
  34. 萬用影音轉檔程式：FFMpeg與HD專用的VideoConverter (13 人次, 2009-05-10)
  35. Joomla! 1.0.12網站建置2－安裝佈景主題樣板(多圖) (12 人次, 2008-07-05)
  36. 參戰ClickClickClick大賽：我的自動點擊程式ccc.exe V1.3 (12 人次, 2007-06-16)
  37. ZScreen：一氣呵成的單鍵「抓圖與傳檔」工具 (12 人次, 2010-01-24)
  38. 試用SmartSVN 4造成的混亂 (12 人次, 2008-08-07)
  39. 快速切換資料夾之台灣之光：Folder Menu (12 人次, 2009-04-22)
  40. 網路衝浪新幫手－無所不在的Firefox Ubiquity (12 人次, 2008-12-16)
  41. Joomla! 1.0.12網站建置3－如何預覽版面位置 (12 人次, 2008-07-05)
  42. Microsoft My Phone：同步手機資料的網路服務 (11 人次, 2009-05-20)
  43. 中文版的資料庫前端工具：Aqua Data Studio 7.0 (11 人次, 2009-01-25)
  44. HTC Touch HD連結失效! (11 人次, 2009-03-05)
  45. Java I18N國際化工具：JRC-Editor (11 人次, 2008-03-01)
  46. Vista IE8的window.open異常 (11 人次, 2009-11-04)
  47. [OOo] OpenOffice.org轉檔的方法 (11 人次, 2006-07-18)
  48. 讓MSN的Esc鍵失效 (11 人次, 2008-10-22)
  49. HTC HD Touch的專屬多媒體轉檔工具：Video Converter 1.21 (11 人次, 2009-04-11)
  50. Subversion權限設定範例說明 (11 人次, 2009-09-09)
標籤雲
備份 剪貼簿 啟動程式 噗浪 壓縮工具 工作列 工作管理員 搜尋工具 新聞 旅遊 書籤 有趣 桌面 檔案管理 滑鼠手勢 漫畫 瀏覽器 環境變數 科技 網站服務 網路服務 編輯器 繪圖 螢幕擷取 行事曆 設備 論壇 資安 資料夾 資料庫 輸入法 郵件軟體 閱讀 附中 雜記 電影 ADS Apache AutoHotkey backup Batch Blogging BT CMS Console Cygwin DOS Download!雜誌 Firefox Freeware FTP funP GMail Google Graphics HTC IM iReport Java JavaScript jEdit Joomla jQuery Linux Media Microsoft Mozilla MSN MySQL NAS NetBeans Office OpenOffice Oracle PDF PHP Plurk RSS Shell SQL Subversion system ThinkPad Thunderbird tortoiseSVN Trac TS-109 Ubiquity Vista Wiki Windows Windows-7 Windows-Mobile WordPress WordPress外掛 X61 Xuite

簡睿隨筆@新世界 使用的快取程式為 WP Super Cache