#DropPages 雲端的殺手級應用 Dropbox,現在可以拿來進行靜態網頁的發布與管理囉,考量到不同平台編寫網頁的方便性,除了傳統的 html 之外,還可採用輕量級標記語言 Markdown 語法來撰寫網頁。

步驟大概是下載官網上提供的佈景(本課程採用的是 Ocean mist),解壓到本機的Dopbox資料夾,修改目錄名稱為網址名稱,之後再和指定的帳號(server1@droppages.com)共享資料夾,然後等待 Email 通知開通否? 詳細的安裝步驟請參考下述連結:

DropPages打造Dropbox個人雲端網頁

Dropbox應用【DropPages】在Dropbox上建立個人專屬網頁

DropPages:用 Dropbox 空間架設簡單網站

DropPages申請圖片1 DropPages申請圖片2

修改內容前,我們先來了解一下網頁架構,DropPages 提供了3種佈景,這裡以 Ocean mist 來說明

Ocean mist 目錄結構

DropPages 的佈景具有模板的概念,希望使用者依照網頁內容、外部參考以及網頁樣板三種屬性存放對應的目錄

  1. Content : 存放網頁內容,目前有 Section 目錄、index.txt、About.txt,請注意副檔名為 .txt
  2. Public : 存放圖片、css與js等外部參考資源
  3. Templates: 存放 Ocean mist 這個佈景的模板,目前只有 Default.html

Content 目錄

我們來看看下面這張網頁的外觀圖,從上到下區分為頁首文字、頁首圖片、橫式選單、內容區、直式選單區與頁尾6個區塊,除了圖中用彩色框起來的部分,都屬於 Templates 目錄下 Default.htm 所管轄。

  • 圖片中以紅色框起來的部分屬於 Content 目錄下 index.txt 所管轄
  • 圖片中以藍色框起來的部分屬於 Content 目錄下 Section 子目錄 所管轄
  • 圖片中以黃色框起來的部分屬於 Content 目錄下 About.txt 所管轄

至於橫式選單呢? 則是 DropPages 根據 Content 目錄自動產生的。

Ocean Mist 網頁外觀

接下來再來看看 Section 這個連結畫面

Ocean Mist Section 網頁外觀

透過這個範例,我們知道每一個目錄的主頁名稱皆為 index.txt,透過子目錄的配置,DropPages 會自動幫我們做出第2層的選單

Section 目錄

index.txt 的內容是以 Markdown 語法呈現。 值得一提的是 DropPages 可以讓我們使用 @image 圖片路徑 來更換頁首圖片

Section 目錄下的 index.txt 內容

所有路徑的斜線皆為正斜線(slash)而非倒斜線