创建主页面和子页面

接下来我们实现网站的新闻模块，为了实现该模块，首先要创建两个文档类型，分别命名为News Main和News Item，其中News Main作为新闻模块的主页面存在，News Item对应相应的单个新闻，编辑人员可以在主页面下创建任意多个子页面。具体操作流程如下:

创建文档类型News Main，并保证创建相关模板页的复选框为选中状态，添加新的选项卡“简介”，并创建从属于该选项卡的两个属性：“新闻主页标题”和“新闻主页内容”，如下图所示：

接下来创建文档类型News Item，并保证创建相关模板页的复选框为选中状态，添加新的选项卡“内容”，并创建从属于该选项卡的两个属性：“新闻标题”和“新闻内容”，如下图所示：

接下来设置文档类型的层级机构，在Homepage的structure选项卡下的允许子项节点类型中选中New Main，同样在News Main的允许子项节点类型中选中News Item，保存后就可以在内容树中创建相应的节点，如下图所示：

为了在页面上显示内容，接下来我们要编辑模板代码，首先分别选中News Main模板和News Item模板，在属性选项卡下，将他们的母版设置成Master，保存后节点将自动移动到Master节点下面。下一步将Simple Content Page中的代码分别拷贝到News Main和News Item模板中，并替换相应的显示属性，例如将@Umbraco.Field("pageTitle")替换成@Umbraco.Field("newsMainTitle")，同样的方法替换newsMainContent、newsTitle和newsContent。现在打开页面，可以看到我们内容正确的显示了出来。

最后一步就是在新闻主页上显示所有的新闻列表。选择开发菜单，选中局部视图宏，点击创建，输入文件名ListNews，Snippet选择List Child Pages Ordered By Date，这样我们创建的新闻类表将按照创建时间排序，Create Macro保持选中状态，最后点击创建。创建成功后，我们要将创建的宏添加到新闻主页面上，首先选中News Main模板，将鼠标定位到要显示新闻列表的位置，点击Insert Marco按钮，选择ListNews，添加完成后代码如下：

@inherits Umbraco.Web.Mvc.UmbracoTemplatePage
@{
    Layout = "Master.cshtml";
}

<div id="main-container">
    <div id="main" class="wrapper clearfix">
        <section>
            <h2>@Umbraco.Field("newsMainTitle")</h2>
            <p>@Umbraco.Field("newsMainContent")</p>
		@Umbraco.RenderMacro("ListNews")
        </section>  
    </div> <!-- #main -->
</div> <!-- #main-container -->

此时重刷页面，可以看到新闻的一个链接类表，为了更详细的显示新闻列表的内容，我们将ListNews宏的代码更改如下：

@inherits Umbraco.Web.Macros.PartialViewMacroPage

@* OrderBy() takes the property to sort by and optionally order desc/asc *@

@foreach (var page in CurrentPage.Children.Where("Visible").OrderBy("CreateDate desc"))
{ 
    <div class="article">
        <div class="articletitle"><a href="@page.Url">@page.NewsTitle</a></div>
        <div class="articlepreview">@Umbraco.Truncate(@page.NewsContent,100) <a href="@page.Url">了解更多..</a></div>
    </div>
    <hr/>
}

重刷后，新闻主页面最终显示如下：