原文地址：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（）。

如果你没有任何内容（页眉或页脚），你检查你的模板匹配如下：

 @inherits Umbraco.Web.Mvc.UmbracoTemplatePage

 @{

     Layout = null;

 }<!doctype html>

 <!--[if lt IE 7]> <html class="no-js ie6 oldie" lang="en"> <![endif]-->

 <!--[if IE 7]>    <html class="no-js ie7 oldie" lang="en"> <![endif]-->

 <!--[if IE 8]>    <html class="no-js ie8 oldie" lang="en"> <![endif]-->

 <!--[if gt IE 8]><!--> <html class="no-js" lang="en"> <!--<![endif]-->

 <head>

     <meta charset="utf-8">

     <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

     <title></title>

     <meta name="description" content="">

     <meta name="author" content="">

     <meta name="viewport" content="width=device-width,initial-scale=1">

     <link rel="stylesheet" href="css/style.css">

     <script src="js/libs/modernizr-2.0.6.min.js"></script>

 </head>

 <body>

     <div id="header-container">

         <header class="wrapper clearfix">

             <h1 id="title">@Umbraco.Field("pageTitle")</h1>

             <nav>

                 <ul>

                     <li><a href="#">nav ul li a</a></li>

                     <li><a href="#">nav ul li a</a></li>

                     <li><a href="#">nav ul li a</a></li>

                 </ul>

             </nav>

         </header>

     </div>

     @RenderBody()

     <div id="footer-container">

         <footer class="wrapper">

             <h3>@Umbraco.Field("footerText")</h3>

         </footer>

     </div>

 </body>

 </html>

【这是完整的主模板】

 @inherits Umbraco.Web.Mvc.UmbracoTemplatePage

 @{

     Layout = "Master.cshtml";

 }

 <div id="main-container">

     <div id="main" class="wrapper clearfix">

         <article>

             <header>

                 @Umbraco.Field("bodyText")

             </header>

             <section>

                 <h2>article section h2</h2>

                 <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>

             </section>

             <section>

                 <h2>article section h2</h2>

                 <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>

             </section>

             <footer>

                 <h3>article footer h3</h3>

                 <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>

             </footer>

         </article>

         <aside>

             <h3>aside</h3>

             <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>

         </aside>

     </div> <!-- #main -->

 </div> <!-- #main-container -->

【这是完整的主模板】

如果你是刚开始这些概念，那么我不认为我们刚刚做的是有多大的意义，知道我们做我们的下一个页面。

【原文：https://our.umbraco.org/documentation/using-umbraco/creating-basic-site/Creating-Master-Template-Part-1】

Umbraco（5）-Creating Master Template Part 1（翻译文档）的更多相关文章

  1. Umbraco（6）-Creating More Pages Using the Master - Part 2（翻译文档）

    创建一个Contact Us页面 我们将创建一个新的”联系我们“页面,在该页面我们将放置简单的联系信息.对于添加这个功能你可能想替换为一个完全成熟的形式. 一些有效的解决方案: 使用表面控制器构建自己 ...

  2. Umbraco（1） - Document Types（翻译文档）

    Document Types Data first nothing in = nothing out! 任何网站的第一步是创建一个"Document Type"-几次安装后你会熟悉 ...

  3. Umbraco（3） - CSS & Javascript（翻译文档）

    原文地址:http://www.ncloud.hk/%E6%8A%80%E6%9C%AF%E5%88%86%E4%BA%AB/umbraco3css-javascript/ CSS & Jav ...

  4. 管理后台-第二部分：Custom sections in Umbraco 7 – Part 2 the views（翻译文档）

    在上一篇文章中我们讨论了怎样在我们Umbraco7.0版本中去添加一个新的自定义的应用程序(或部分)和如何去定义一个树.现在我将给你展示你改何如添加视图,来使你的内容可以做一些更有意义的事情. The ...

  5. Umbraco（2） - Creating Your First Template and Content Node（翻译文档）

    创建(编辑)你的第一个模板(Template) 展开 Settings > Templates文件夹 - 然后你应该看到子节点名为"Homepage" - 这是我们在创建Do ...

  6. Umbraco（4）-Outputting the Document Type Properties（翻译文档）

    翻译原文地址:http://www.ncloud.hk/%E6%8A%80%E6%9C%AF%E5%88%86%E4%BA%AB/umbraco4outputting-the-document-typ ...

  7. 管理后台-第一部分：Creating custom sections in Umbraco 7 - Part 1（翻译文档）

    在Umbraco上每个部分都可以被称为一个应用程序,所以这些部分和应用程序基本上是一样的.我们首先要做的事情是需要创建应用程序.在这个例子中,我不会去摆弄xml文件或是数据库——我将使用类来创建我的内 ...

  8. Flask-Babel 使用简介(翻译文档)

    最近用flask-bable翻译一个项目,在网站上查找到有一个示例文档,地址:http://translations.readthedocs.io/en/latest/flask-babel.html ...

  9. maven私服 nexus2.x工作目录解读（翻译文档）

    安装nexus repository manager oss 或pro版本时,会创建两个目录:一个目录包含运行环境及应用,通常符号链接为nexus:一个目录包含所有的配置和数据,通常为sonatype ...

随机推荐

  1. .NET/C#- EPPLUS DEMO

    强大的导出EXCEL,比NPOI更好用,更强大,可惜只有4.0版本的. 记录一下DEMO var sheet = p.Workbook.Worksheets.Add("My Sheet&qu ...

  2. 创建维护计划时，提示“代理XP”组件已作为此服务器安全配置的一部分被关闭

    一.问题在Management Studio中新建维护计划时,提示以下错误信息:“代理XP”组件已作为此服务器安全配置的一部分被关闭.系统管理员可以使用sp_configure来启用“代理XP”.有关 ...

  3. [转]Kerberos简介

    Kerberos协议: Kerberos协议主要用于计算机网络的身份鉴别(Authentication), 其特点是用户只需输入一次身份验证信息就可以凭借此验证获得的票据(ticket-grantin ...

  4. MySQL 错误代码和消息

    本章列出了当你用任何主机语言调用MySQL时可能出现的错误.首先列出了服务器错误消息.其次列出了客户端程序消息. B.1. 服务器错误代码和消息 服务器错误信息来自下述源文件: ·         错 ...

  5. cdoj 65 CD Making 水题

    CD Making Time Limit: 20 Sec  Memory Limit: 256 MB 题目连接 http://acm.uestc.edu.cn/#/problem/show/65 De ...

  6. Linux内存管理学习笔记 转

    https://yq.aliyun.com/articles/11192?spm=0.0.0.0.hq1MsD 随着要维护的服务器增多,遇到的各种稀奇古怪的问题也会增多,要想彻底解决这些“小”问题往往 ...

  7. 【iOS开发必备指南合集】申请企业级IDP、真机调试、游戏接入GameCenter 指南（实现仿官方的成就提示）、游戏接入OpenFeint指南；

    本站文章均为李华明Himi原创,转载务必在明显处注明:(作者新浪微博:@李华明Himi) 转载自[黑米GameDev街区] 原文链接: http://www.himigame.com/iphone-c ...

  8. smartPtr指针的实现

    编写一个智能指针类.智能指针是一种数据类型,一般用模板实现,模拟指针行为的同时还提供自动来及回收机制.它会自动记录SmartPointer<T*>对象的引用计数,一旦T类型对象的引用计数为 ...

  9. careercup-高等难度 18.2

    18.2 编写一个方法,洗一副牌.要求做到完美洗牌,换言之,这幅牌52!种排列组合出现的概率相同.假设给定一个完美的随机发生器. 解法:假定有个数组,含有n个元素,类似如下: [1][2][3][4] ...

  10. C++删除字符串中特定的字符

    原文:https://snipt.net/aolin/c-6/ //处理string类型的方法del_sp(string &str)待测试 //处理C-Style的方法可用,可以考虑将该方法改 ...