2013年6月2日 星期日

使用Umbraco的基本概念-Document Type

剛開始接觸Umbraco的人,可能對其分散於各處的機制感到不知如何下手。起碼我是如此。就算訂閱其影片,就是覺得別人都好厲害。

想要開始使用Umbraco有幾個觀念我覺得應該要先釐清。

網頁的元素到底有哪些。

當我們使用瀏覽器開啟來自某個網站的某一個網頁,甚至跳到另一個網頁,其實,我們看到的都是一個最終結果,我們稱之為靜態網頁。有可能兩個網頁,其實「結構」是一樣的,只是「內容」不同。就像是一個假人模特兒,骨架都一樣,穿上不同的衣服,就呈現不一樣的面貌。我們稱之為動態網頁。

其實,當我們看到一個網頁時,我們應該要根據他不同的面貌,在切割成更小的結構。也就說一個靜態網頁,其實在由好多的不同的可以動態網頁所組合起來的東西,我們可以稱之為「組件」。

每一個「組件」都會有自己的結構,也就是欄位的意思(就會有資料型態的問題),而這個結構可以讓我填上不同的內容。對Umbraco而言,這個叫做「Document Type」(我有翻譯成中文版,目前翻譯成文件型態)。所以你要針對網站中,要呈現內容的結構要加以定義。
注意:

  1. 這個結構並不一定代表一個網頁。僅僅是一個資訊區塊。
  2. 他可以繼承。
  3. 一個網頁可以是一個文件型態,或者多個文件型態,或者在加上許多的「功能」(Scripts)。
  4. 文件型態並不處理網頁呈現的樣式。還要在透過Web Form/view套上HTML語法,甚至加上CSS。在umbraoc中稱之為Template。
  5. 這些設定是透過umbraco的backoffice介面來設計的。(安裝過程)

每一個文件型態,還得設計很多資訊。
下圖是基本資訊。有這個文件型態的名稱與別名。
名稱是給人網站管理者/內容提供者看的,別名是給電腦/程式設計師看的。
icon, thumbnail, Description這是方便給內容提供者理解這個文件型態的目的。
Allowed template是說這個文件型態可以套用在哪些範本上。
Default template顧名思義,就是預設的範本。

下圖是文件結構。

什麼意思呢?我們在瀏覽網頁時,不是有深度問題?下圖舉一個yahoo的例子
對Umbraco而言,就是指Homepage這個文件型態之下,他的下一層(可以跳至的網頁)限制於是哪一些。這個對於內容提供者算是一種guide line。

下圖是重點中的重點了,屬性設定。

也就是說這個文件型態應該要有哪些欄位,也就是規範內容提供者應該要填入哪些資料。
為了讓內容提供者,能夠很清楚知道各個欄位的意義,可以把相同目的的欄位組合在同一個tab(索引頁)中。
而這個索引頁也可設計並排序之。如下圖。


文件型態僅僅定義了一個在網頁上的某個組件內,應該要有哪些欄位。他還是一個骨架而已,還是需要去填內容。而這個填內容的工作,就是網站的內容提供者的任務。而他所看到的介面,就是這個文件型態設計的主要目的。
下圖,就是內容提供者在backoffice所看到的畫面。

注意,每當新增頁面(組件)時,就要去指定要使用哪一個文件型態。上圖是指定使用Homepage。
因為是指定使用Homepage,所以就會套用Homepage這個文件型態。
而內容提供者就會看到不同的索引頁。
不同索引頁,就有要填入的欄位內容。下圖就以Panel1這個索引頁為例。

回到文件型態的屬性定義那邊,不是有說在Panel1的索引頁下,要有Panel Content1這個欄位。而這個欄位的資料型態是RichText Editor。
也就是因為如此,當內容提供者要填入資料時,他點選了Panel 1的索引頁,就有Panel Content1 的欄位要填內容。又因為他是RichText Editor的資料型態,所有才會出現那條類似Word的工具列出來。
如果再看Footer這個索引頁。他所出現要求內容提供者填入欄位,又因資料型態不同,要求的內容又會不同。


那真正看到的網頁又是什麼呢?

有感覺到內容的關聯性了吧?
等等,但是我們並沒有說他要長成什麼樣子呀?
是嗎?我們不是有定義他的範本嗎?不是說好要預設的範本是Home呀。
那我們來看Home這個Template長什麼樣子。

1. 我們選擇了home這個範本。
2. 原來她套用了一個Layout。我是採用MVC架構。
3. 這就是套用了文件型態中所定義的欄位。

說明到這,應該有一個通盤了解吧。
使用Umbraco還是要有HTML的基礎,要懂ASP.Net技術,這邊是使用MVC,Razor。後續還會有CSS,JavaScript等。
透過這個平台,真的可以開發出非常彈性,而且是高度重複使用性的網站。
真的值得推薦。

沒有留言:

張貼留言