Umbraco的Tag實作

現在網頁流行使用Tag，標籤。
在Umbraco中使用標籤的技術只要搞懂了就很簡單。一開始，倒是花了不少時間在測試。
幾個觀念得先記下來。

1. Tags資料型態：Umbraco 有提供預設資料型態。但不建議直接使用，除非你整個網站都是用相同的標籤系統。例如說，部落格有自己的標籤，FAQ要有自己的標籤，那就得個別建自定資料型態。
2. Tag group：延續前面，如果要有個別的標籤系統，那就分別為其定義群組名稱。注意，這個在程式時很重要。

在資料型態定義的地方完成上述工作後。接著當然是定義Document Type，把某個欄位使用這個資料型態。
如果是在backoffice的話，那就可以直接使用了。

如果是程式的話就得小心。其實也很簡單。
要呈現時，就將欄位物件轉成字串，再用spli(',')切開就得到一個一個的tag，接著就是看你要怎麼呈現了。

如果是要新增怎麼辦？
首先就是要搞清楚是用哪一個Tag group。
再來使用
Tag.AddTagsToNode(contentID, Tags, TagGroup)
他的觀念是把tag與content連結在一起。
如果你前台處理時，tags是用,結合的字串，就可以直接使用。

若是要更新的話，我目前作法是有點笨，先移除現在，再新增新的。
移除的話是
Tag.RemoveTagsFromNode(contentID, TagGroup)


當然，Unbraco的Package有一個Tag Manager可以安裝使用，協助你管理Tag。

Umbraco 安裝與設定

Umbraco的安裝方式有很多。
1. 使用WebMatrix。
2. 若有微軟Azure帳號，也可以直接安裝。
3. 從Visual Studio 環境中安裝。

如果是初學者，或者只是想單純的學學Umbraco這東西，那我就建議使用WebMatrix來安裝。

使用WebMztrix

1. 到WebMatrix網站。
2. 畫面上會有一個free download的按鈕。點下去就對了。注意，他只支援視窗環境唷。
3. 你可以直接使用執行。他跟所有視窗應用程式都一樣的安裝法。
有看到下列畫面就對了。

其實，寫安裝真的很無聊。一改版就會不一樣了，但也都大同小異。

接下來才是安裝Umbraco。點【New」/【App Gallery】。

照著順序。第3步驟，記得要取好名字，不可重複了。你也可以看到還有好多不同的CMS可試試。

第4步驟之後有一個說明畫面，就省略吧。就是按【Next】按鈕。

這時候才正式開始安裝Umbraco。首先是選擇資料庫。這邊有兩種版本，端看你目前安裝的電腦。不過SQL Server CE是內建的。就選這個吧，反正我們的網站流量也不會很大。

接下來是問你要不要上雲端。就省略了吧。
接著又是版權宣告的事情。就按【I Accept】按鈕即可。
中間就省了吧。沒什麼特殊的地方。
最後按【OK】之後，看到下列畫面，就是成功安裝。別高興的太早，還有設定要做。

如果沒什麼問題，應該會出現下列畫面。若沒有，就得點選前一個畫面左上角那個【Run】那個按鈕。又是這著指示一步一步按下去就好。

當然，到4 - Create User所設定的密碼要記得。這是管理者帳號，用來進入Umbraco Backoffice之用。如果你留的不是正確的email，那個newsletter打勾也沒意思了。

接下來第5這個步驟是很重要的決策點。所謂的Starter Kit就是內建一些功能在裡面。如果你是純粹想要學習的話，那建議就安裝【Business】這個。如果你是要搞MVC架構的話，那就什麼都不要選。

最後有個附加步驟，就是選擇Skin。當然，如果你沒有選擇Starter Kit就步會有這個。這個也不用太緊張，事後都是可以修改的。甚至在網路上下載免費的template來使用。例如http://www.freecsstemplates.org/

這樣子就大功告成了。
我們來看看成果。
注意，有兩個成果，一個是前台，一個是後台。
【Preview your new website】是指前台。
【Set up your new website】是指後台。

 先來看一下前台。我省略客製化設定顏色的畫面。網站有內容，可以開啟是因為有選擇Starter Kit的關係。如果沒有選擇，則只會出現要你設定的按鈕。

來看後台的畫面。而真正要學習的就是這個後台。

但是，我呢？我不是使用這個方法。
因為我要走MVC的架構，所以我是使用Visual Studio 2012的環境下來建置Umbraco。

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

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

真的值得推薦。

Umbraco簡介

Umbraco是一套運行於.Net平台之CMS系統，而且採Open Source。
他的彈性很大，易於操弄。只可惜，文件系統不是做的很好。官方網站有提供視訊教學，不過這個要錢。
台灣好像很少人用，也不知為何。也許大家都很厲害吧，都自己打造基礎設施，或者是國內都是走PHP平台？

其實，不少網站都是用Umbraco打造的，例如ASP.Net官方網站就是。


先下列兩個網站做參考，陸續會將自己使用心得放上來。

官網：首頁有一個三方中的影片，可以快速提供入門。
論壇：在這可以找到很多的參考資料。