原文地址：http://www.ncloud.hk/%E6%8A%80%E6%9C%AF%E5%88%86%E4%BA%AB/umbraco5-creating-master-template-part-1/
創建更多的頁面
使用可維護的模板結構
我們已經瞭解瞭如何創建一個Document Type，我們可以創建一個只有三個頁面的簡單網站：Home,News,Contact us。方法就是創建三種（Document Types）文檔類型和它們相關聯的模板（Create matching template），但這樣做我們將會複製大量相同的代碼到不同的模板中。
在簡單的網站中，這是可行的方案，但是一旦網站發展起來，就會出現很多問題 - 例如，想要改變主菜單就需要修改每一個包含主菜單的模板，同時我們也不得不爲每個頁面設置頁腳等等。
Umbraco爲我們提供了一個優雅的解決方案，去保持一致的基本模板 - 熟悉MVC的用戶，會更好的理解它。
剛開始我們拆開一點我們創建的homepage到主模板下的homepage模板下。
創建主模板
選擇Settings > Templates，展開此節點，目前爲止我們只有HomePage模板。我們創建一個名爲Master的新模板，記得點擊Save按鈕：
現在我們需要移動Homepage到Master模板之下。 選擇Settings > Homepage節點，接着選擇Properties tab > Master template 下拉選項選擇"Master"，點擊Save。這將更新Razor代碼Layout = null; 改爲 Layout = "Master.cshtml";
注意 - 你可能需要返回點擊Homepage節點纔會看到這更新 - 這個bug將會在未來的Umbraco版本中解決。
下一步就是將所有的頁面公用的html代碼移動到Mater模板中，作爲一名開發人員，你可能需要使用你的大腦了，因爲不同的網站，公用代碼會有所不同。 - 例如，有時需要我們判斷是不是所有的頁面都會包含<div id="main">還是隻是某些特定的頁面纔會有，如果是第一種情況的話，我們就可以將它移動到Master模板中。在本示例中，我們認爲它是屬於特定的子頁面的。從關閉的大括號之後開始，到第37行代碼<div id="main-container">之前爲止，剪切這些代碼到Master模板中，這樣header和導航的代碼就移動到了主模板中。單擊Save按鈕。
現在單擊你的Master模板，在花括號“}”關閉之後粘貼這些HTML代碼。切記要點擊Save按鈕。
在代碼的最後，我們加入@RenderBody, 這就告訴了Umbraco此處將插入子模板的內容。點擊Save按鈕。
現在我們將要開始做相同的頁腳內容。從Settings > Templates > Homepage > template tab中剪切footer-container內容到Master模板中，並且放在@RenderBody字段的下邊。記得剪切和粘貼過代碼後都要記得保存。
現在我們已經做了很多的工作了，如果你刷新頁面，你應該看到我們的頁面是沒有改變的。如果你有一個編譯錯誤，你或許是輸錯了@RenderBody（）。
如果你沒有任何內容（頁眉或頁腳），你檢查你的模板匹配如下：
1 @inherits Umbraco.Web.Mvc.UmbracoTemplatePage
2 @{
3 Layout = null;
4 }<!doctype html>
5 <!--[if lt IE 7]> <html class="no-js ie6 oldie" lang="en"> <![endif]-->
6 <!--[if IE 7]> <html class="no-js ie7 oldie" lang="en"> <![endif]-->
7 <!--[if IE 8]> <html class="no-js ie8 oldie" lang="en"> <![endif]-->
8 <!--[if gt IE 8]><!--> <html class="no-js" lang="en"> <!--<![endif]-->
9 <head>
10 <meta charset="utf-8">
11 <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
12
13 <title></title>
14 <meta name="description" content="">
15 <meta name="author" content="">
16
17 <meta name="viewport" content="width=device-width,initial-scale=1">
18
19 <link rel="stylesheet" href="css/style.css">
20
21 <script src="js/libs/modernizr-2.0.6.min.js"></script>
22 </head>
23 <body>
24
25 <div id="header-container">
26 <header class="wrapper clearfix">
27 <h1 id="title">@Umbraco.Field("pageTitle")</h1>
28 <nav>
29 <ul>
30 <li><a href="#">nav ul li a</a></li>
31 <li><a href="#">nav ul li a</a></li>
32 <li><a href="#">nav ul li a</a></li>
33 </ul>
34 </nav>
35 </header>
36 </div>
37
38 @RenderBody()
39
40 <div id="footer-container">
41 <footer class="wrapper">
42 <h3>@Umbraco.Field("footerText")</h3>
43 </footer>
44 </div>
45
46 </body>
47 </html>【這是完整的主模板】
1 @inherits Umbraco.Web.Mvc.UmbracoTemplatePage
2 @{
3 Layout = "Master.cshtml";
4 }
5 <div id="main-container">
6 <div id="main" class="wrapper clearfix">
7
8 <article>
9 <header>
10 @Umbraco.Field("bodyText")
11 </header>
12 <section>
13 <h2>article section h2</h2>
14 <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam sodales urna non odio egestas tempor. Nunc vel vehicula ante. Etiam bibendum iaculis libero, eget molestie nisl pharetra in. In semper consequat est, eu porta velit mollis nec. Curabitur posuere enim eget turpis feugiat tempor. Etiam ullamcorper lorem dapibus velit suscipit ultrices. Proin in est sed erat facilisis pharetra.</p>
15 </section>
16 <section>
17 <h2>article section h2</h2>
18 <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam sodales urna non odio egestas tempor. Nunc vel vehicula ante. Etiam bibendum iaculis libero, eget molestie nisl pharetra in. In semper consequat est, eu porta velit mollis nec. Curabitur posuere enim eget turpis feugiat tempor. Etiam ullamcorper lorem dapibus velit suscipit ultrices. Proin in est sed erat facilisis pharetra.</p>
19 </section>
20 <footer>
21 <h3>article footer h3</h3>
22 <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam sodales urna non odio egestas tempor. Nunc vel vehicula ante. Etiam bibendum iaculis libero, eget molestie nisl pharetra in. In semper consequat est, eu porta velit mollis nec. Curabitur posuere enim eget turpis feugiat tempor.</p>
23 </footer>
24 </article>
25
26 <aside>
27 <h3>aside</h3>
28 <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam sodales urna non odio egestas tempor. Nunc vel vehicula ante. Etiam bibendum iaculis libero, eget molestie nisl pharetra in. In semper consequat est, eu porta velit mollis nec. Curabitur posuere enim eget turpis feugiat tempor. Etiam ullamcorper lorem dapibus velit suscipit ultrices.</p>
29 </aside>
30
31 </div> <!-- #main -->
32 </div> <!-- #main-container -->【這是完整的主模板】
如果你是剛開始這些概念，那麼我不認爲我們剛剛做的是有多大的意義，知道我們做我們的下一個頁面。