感謝㊣贊助鼓勵!

Google搜尋 »

分類

簡睿在噗浪»

有朋自遠方來

Xuite樣式研讀攻略!

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

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

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

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

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

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

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

在按下一步與確定後,HTTrack便開始複製網頁內容到指定目錄內。稍待片刻就會看到完成的畫面,接著用檔案總管開啟步驟1輸入的存放目錄(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則留言 »Xuite樣式研讀攻略!

填寫回應

 

 

 

您可使用這些HTML標籤

<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre lang="" line="" escaped="">

隨機文章

  1. [轉貼] 免費的磁碟備份工具:EaseUs Disk Copy (1)
  2. 常被寫錯的英文縮寫:CSV與CVS 
  3. [Tools] Rainlendar 2.0已經正式釋出了 
  4. [Tools] 用CMenuExtender自行新增右鍵功能表選單 (1)
  5. 接到寬頻電視客服中心的回函 
  6. WordPress跑馬燈外掛:Running Line 
  7. 蔡學鏞先生在天瓏網站的書評 
  8. 用WordPress的WPtouch外掛顯示iPhone與HTC Touch HD的精簡樣式[修訂] 
  9. [轉貼CNet] 開原碼Java工具熱 昇陽能否突圍? 
  10. [Java] 終於解決IntelliJ-IDEA 8.0.1的中文輸入法問題 (7)

歷史熱門文章

  1. Plurk CSS樣式自訂修改全攻略 (30,962 點擊/2009-07-04)
  2. 把HTC Touch HD操作介面換成Spb Mobile Shell,美觀又便利! (20,275 點擊/2009-02-18)
  3. 強化閱讀第2噗:變更噗浪回應的字體與背景顏色 (17,547 點擊/2009-06-07)
  4. 另一套適用手機的影片轉檔工具:WinAVI 3GP/MP4/PSP/iPod Video Converter (16,753 點擊/2009-04-18)
  5. 強化HTC Touch HD的工具軟體 (14,969 點擊/2009-02-25)
  6. 如何手動輸入Plurk的表情圖示? (13,959 點擊/2008-09-29)
  7. 增加Spb Mobile Shell 3.0生活化桌面頁數的小技巧 (13,743 點擊/2009-04-27)
  8. 簡單放大Plurk輸入區的方法[修訂] (13,049 點擊/2008-09-29)
  9. 將Plurk回應區變成固定寬度 (12,873 點擊/2009-07-11)
  10. 將噗浪的視窗高度變大,加上分隔線,以方便閱讀 (12,515 點擊/2009-06-06)