使用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等。

透過這個平台，真的可以開發出非常彈性，而且是高度重複使用性的網站。

真的值得推薦。