创建主模板

我们已经学习了如何创建一个文档类型，我们可以创建一个只有三个页面的简单网站，分别是首页，新闻和联系我们，方法就是创建三种文档类型和它们相关联的模板，但这样做我们将会复制大量相同的代码到不同的模板中。

在简单的网站中，这是可行的方案，但是一旦网站发展起来，就会出现很多问题。例如，想要改变主菜单就需要修改每一个包含主菜单的模板，同时我们也不得不为每个页面设置页脚等等。

Umbraco为我们提供了一个优雅的解决方案，通过主模板去管理公共的HTML代码，熟悉MVC的用户，会更好的理解它。

创建主模板

选择设置>模板,展开节点，迄今为止我们只创建了一个Homepage模板，创建一个新的命名为Master的新模板，如下图所示：

接下来我们将Homepage模板移动到Master模板下，选中Homepage模板节点，在属性选项卡下的母版下拉框中选择Master，点击保存。这是我们可以看到Homepage移动到了Master节点下，并且模板代码中的layout= null变成了layout= ”Master.cshtml”,如下图所示：

下一步就是将所有的页面公用的html代码移动到Mater模板中，这时作为开发人员，就需要使用你的大脑了，因为不同的网站，公用代码会有所不同。例如，有时需要我们判断是不是所有的页面都会包含<div id="main">还是只是某些特定的页面才会有，如果是第一种情况的话，我们就可以将它移动到Master模板中。在本示例中，我们认为它是属于特定的子页面的。从关闭的大括号之后开始，到第37行代码<div id="main-container">之前为止，剪切这些代码到Master模板中，这样header和导航的代码就移动到了主模板中，如下图所示：

在代码的最后，我们加入@RenderBody, 这就告诉了Umbraco此处将插入子模板的内容。如下图所示：

接着我们使用同样的方法将Footer也移动到主模板中，最终效果如下图所示：

到现在为止，我们已经完成了大部分的工作，现在重刷页面，我们会看到页面并没有做任何的改动。为了使用刚刚创建的主模板，我们将创建一个新的”联系我们“页面，在该页面我们将放置简单的联系信息。

选择设置>文档类型，创建一个新的文档类型，命名为Simple Content Page。接下来我们为新创建的文档类型选择一个图标，在图标搜索框中输入Content，选中搜索出来的图标，如下图所示：

在描述部分输入”一个简单的内容页面“，Allowed template和Default template保留选中的值，最后点击保存，创建文档类型成功。接下来选中设置>模板，在弹出的菜单中选择重新加载节点，可以看到一个命名为Simple Content Page的节点，选中它，选择属性选项卡，在母版那里选择Master，点击保存，可以看到节点移动到了Master模板的下面。重新加载该节点后，可以看到模板代码里Layout变成了Master.cshtml。添加如下代码到该模板中：

<div id="main-container">
    <div id="main" class="wrapper clearfix">
        <section>
            <h2>在这里添加标题</h2>
            <p>在这里添加内容</p>
        </section>  
    </div> <!-- #main -->
</div> <!-- #main-container -->

将新创建的属性添加到模板代码中（添加方法参加显示文档类型的属性内容），最终代码如下图所示：

为了在内容树中的homepage节点下创建联系我们页面，首先要设置homepage文档类型的Structure， 在允许的子项节点类型部分选中Simple Content Page，保存该文档类型。

回到内容>Homepage,在弹出的菜单中，可以看到我们新创建的Simple Content Page文档类型，点击它，输入名字Contact Us，并填充pageTitle和bodyText属性，如下图所示：

点击保存并发布，联系我们页面创建成功，也可以点击预览查看我们新创建的页面。

接下来我们将完成导航栏，导航栏可以根据创建的内容树动态生成，这样当编辑人员添加新的内容节点时，导航栏可以动态更新，以后的章节中会介绍如何创建动态导航栏，这里我们的导航栏是硬编码的，更改master模板页中的nav部分代码如下：

<pre style="font-family: Consolas; font-size: 10pt; background: white;"><span style="color:#4f76ac;"><</span><span style="color:#823125;">nav</span><span style="color:#4f76ac;">></span>
				<span style="color:#4f76ac;"><</span><span style="color:#823125;">ul</span><span style="color:#4f76ac;">></span>
                    <span style="color:#4f76ac;"><</span><span style="color:#823125;">li</span><span style="color:#4f76ac;">><</span><span style="color:#823125;">a</span> <span style="color:#cf4820;">href</span><span style="color:#4f76ac;">=</span><span style="color:#4f76ac;">"/"</span><span style="color:#4f76ac;">></span>首页<span style="color:#4f76ac;"></</span><span style="color:#823125;">a</span><span style="color:#4f76ac;">></</span><span style="color:#823125;">li</span><span style="color:#4f76ac;">></span>
                    <span style="color:#4f76ac;"><</span><span style="color:#823125;">li</span><span style="color:#4f76ac;">><</span><span style="color:#823125;">a</span> <span style="color:#cf4820;">href</span><span style="color:#4f76ac;">=</span><span style="color:#4f76ac;">"/contact-us"</span><span style="color:#4f76ac;">></span>联系我们<span style="color:#4f76ac;"></</span><span style="color:#823125;">a</span><span style="color:#4f76ac;">></</span><span style="color:#823125;">li</span><span style="color:#4f76ac;">></span>
                    <span style="color:#4f76ac;"><</span><span style="color:#823125;">li</span><span style="color:#4f76ac;">><</span><span style="color:#823125;">a</span> <span style="color:#cf4820;">href</span><span style="color:#4f76ac;">=</span><span style="color:#4f76ac;">"/news-main"</span><span style="color:#4f76ac;">></span>新闻<span style="color:#4f76ac;"></</span><span style="color:#823125;">a</span><span style="color:#4f76ac;">></</span><span style="color:#823125;">li</span><span style="color:#4f76ac;">></span>
                <span style="color:#4f76ac;"></</span><span style="color:#823125;">ul</span><span style="color:#4f76ac;">></span>
			<span style="color:#4f76ac;"></</span><span style="color:#823125;">nav</span><span style="color:#4f76ac;">></span>