像是我們在這篇文章【用HTML5+CSS3來架設網站】中提到的,使用虛擬主機附贈的簡易程式碼編輯器來編寫些簡單的網頁還算方便,但是當你的網頁檔案愈來愈大的時候,這種編輯器就會顯得非常不給力了。至少,沒有支援縮排的功能就讓你非常地不適應,因為沒有適當的縮排,當網頁檔案開始愈來愈大的時候,會變得非常地沒有結構,編寫起來就會非常地麻煩。因此,對於經常在編寫網頁程式碼或網頁檔案的朋友來說,一個好的文字編輯器(程式碼編輯器)就非常地重要。

  在以往,文字編輯器的同義詞就是陽春,就像是Windows附贈的記事本一樣,不僅字型難看,還沒有辦法好好地縮排,更不用說可以讓一些關鍵字用不同的顏色和亮度呈現了。但是,基於撰寫程式碼的需求,文字編輯器的加強版推陳出新,而且都是可以免費使用的,非常地方便。比較常被別人拿來使用的,包括NotePad++, PSPad, 以及我們今天要介紹的主角Sublime Text,都非常受到歡迎。您可以在以下的連結中免費下載到這些程式:

  這些軟體都更有其優缺點,讀者們可以自行試用,看看哪一個比較適合你的習慣。站長比較習慣使用PSPad和Sublime Text2。而這兩者都可以直接對於遠端的網站建立好FTP的連結,然後直接就在你的電腦中編輯遠端的網頁檔案,非常方便。

  以PSPad為例,假設你已經有了遠端網站的FTP帳號及密碼等資料,在執行PSPad之後,別急著開新的檔案,看看左側是否有一個FTP的頁籤,如下所示:

sublimeftp01

  按下這個頁籤之後,就可以看到箭頭所指到的地方一個連線的圖示:

sublimeftp02

  在按下此圖示之後,可以看到一個FTP的對話盒訊息,在這個對話盒中,如果你是第一次使用,則需按下箭頭所指的地方【New Connection】(其實有中文版可以使用啦,只是何老師自己使用的是英文版):

sublimeftp03

  就會出現如下所示的FTP帳戶資料設定區:

sublimeftp04

  在正確設定所有的資料而且存檔之後,再次按下連線(Connect),遠端的目錄就會都被列表出來,如示所示:

sublime05

  此時您當然可以自由地開啟任何一個檔案編輯,然後存檔。儲存之後,直接就是儲存在主機中,不需要再擔心檔案同步的問題。

  另外Sublime Text則有兩種選擇,其中之一是和PSPad一樣,直接開啟遠端的網頁檔案來編輯,這樣的好處是不用擔心同步的問題,但是如果你有一些額外的檔案(如圖形檔、影音檔等等)要加入這個網站中,則需要另外再找一個FTP軟體來另行上傳。另外一種方式,則是把整個資料夾對應到遠端網站的資料夾,平時均在本地端的資料夾中編輯檔案,然後Sublime Text則提供功能選擇,讓我們可以選擇是否同步遠端電腦和本地資料夾中的所有檔案。這樣的好處是,我可以在本地端透過複製的方式把檔案放在本地端資料夾中,Sublime Text會幫我們把所有的檔案都同步上去,當然包括圖形檔、影音檔和一些週邊的資料檔。所有的檔案都可同步。

  要設定Sublime Text對應到遠端的主機之前,首先要讓Sublime Text安裝SFTP這個套件,並完成設定工作。這個工作在這一篇文章中有詳細的說明:【搞定你的編輯器:Sublime Text2的安裝與設定】。依照此篇文章設定好Sublime Text2和SFTP之後,我們就可以在自己的電腦中建立一個網頁專用的資料夾,然後把這個資料夾拖曳到Sublime Text2左側的專案側邊欄中,如下所示:

sublimeftp06

  這整個資料夾(本地端的資料夾)就會被完整地呈現在專案列中:

sublimeftp07

  然後在資料夾上方按下滑鼠右鍵,呼叫出突現式功能表,如下所示:

sublimeftp08

  透過SFTP/FTP的功能,第一次使用可以建立一個Remote Mapping,在進入Remote Mapping後,會先出現一個設定畫面,如下所示:

sublimeftp09

  在這裡面只要修改紅色線框起來的地方就可以了。也就是輸入遠端主機的FTP帳戶資料。在儲檔之後,以後就可以使用以下這幾個功能表中的選項來進行檔案同步的作業了。

sublimeftp10

  包括Sync Local -> Remote ,把本地端的檔案同步到遠端去,或是 Sync Remote -> Local把遠端的檔案同步到本地資料夾,或是依照檔案的時間來同步兩者Sync Both Directions。當然,我們也可以使用Browse Remote…來瀏覽遠端的目錄內容,也很方便。

(1412)

%d 位部落客按了讚: