Umbraco(7)-The Navigation Menu And A Parent Page with Infinite Children

原文链接：http://www.ncloud.hk/%E6%8A%80%E6%9C%AF%E5%88%86%E4%BA%AB/umbraco7the-navigation-menu-and-a-parent-page-with-in-finite-children/

Master Template - The Navigation Menu

现在让我们开始解决导航菜单-这里有两个方法，你可以动态创建一个导航菜单的页面内容树中，这样当一个编译器创建了一个页面会自动出现，或者可以更简单的写硬编码。现在我们准备写硬编码（当你开始建立一个网站编写硬编码，你可以移动替换这个，这是一个好的办法）我们之后会让给你之后作为练习。编辑你的Master template编写<nav>标签:

<nav>
    <ul>
        <li><a href="/">Home</a></li>
        <li><a href="/contact-us">Contact Us</a></li>
        <li><a href="/articles">Articles</a></li>
    </ul>
</nav>

保存你的更改，然后测试我们的菜单。你将会发现点击文章链接抛出Umbraco错误说我们没有创建这个页面。现在我们开始创建这些页面。

Articles Parent and Article Items - A Parent Page with Infinite Children

拥有一个父页面的文章和一些有关子文章的编译器可以自由添加一些很好例子页面。假设我们虚构的公司，小部件有限公司，一个月写十篇文章，希望文章页面就像一个博客（例如：只用这个功能你可以为你的博客添加一个新闻和事件页面）。

创建新的文档类型“Article Main”和“Article Item”。Document Types Settings > Document Types (hover) > ... > + Create。记得Master Document Type = "none.."

创建以下的Tabs和数据类型：

Articles Main

Tab = Intro

"Articles Title" - Type = Textstring

"Articles Body Text" - type = Rich Text Editor**

【图38】Article Main的文档类型和数据类型

Articles Item

Tab = Contents

"Article Title" - Type = Textstring

"Article Contents" - type = Rich Text Editor**

【图39】Article Item的文档类型和数据类型

现在到Settings > Document Types >Articles Main node > Structure tab > Allowed child nodetypes ，然后选择Article Item。这会允许我们在该目录下创建它的Item（它作为父容器）。当然我们还需要在Acticle Main的节点下创建Homepage node（Settings > Document Types > Homepage node > Structure tab > Allowed child nodetypes --不要选择Article Item 仅仅在主节点水平就可以）。

现在到Content > Homepage node (hover)> ... 创建一个新的节点是Articles Main类型的“Articles”（如果你发现没有这个选项，你需要返回检查你是否允许子节点--你忘记了点击保存）。给这篇文章节点添加一些内容和标题，然后创建几条内容节点在这个节点上（Content > Homepage node > Articles node (hover) > ...）。

现在你应该有一个内容树看起来类似下图（很明显这里显示的都是自己页面节点的名字）。接着让我们去更新我们刚刚创建的模板（当我们创建文档类型时会自动更新）。第一次更新他用Master作为主节点Settings > Templates > Articles Main node > Properties tab > Master template dropdown = "Master"  -记得做类似Articles Item的事情，点击保存Save。

【图40】文章内容树节点

复制简单的内容页面模板，粘贴到每一个新建的模板中（记得点击保存）。然后替换页面字段相关的例句，比如：articlesTitle 和 articlesBodyText 替换为Articles Main 和 articleTitle ；articleContents 替换为Article Item。

如果我们现在去浏览器中检查我们的文章主页面，我们应该可以看到内容了。现在我们需要列出页面下的子节点，这样我们就可以看到我们的文章列表。Umbraco使这项任务变得很简单，但是我们需要使用Razor语言。

从左侧的菜单上选择Developer菜单，悬浮在Partial View Macros Files node 来获得更多的菜单...点击+ Create 。名称为“listArticles”，接着在Choose a snippet片段中选择“List Child Pages Ordered By Date”后点击Create。

【图41 模板父级文章和宏代码】

现在我们要做的就是连接文章主页列出我们的子文章。编辑主文章节点模板Settings > Templates node > Master node > Articles Main node > Template tab. 根据段落标签输入回车后点击Insert Macro按钮，然后点击保存按钮。

现在来检查我们的文章页面--编辑刚才创建的部分（宏）-Developer > Partial View Macro Files > listArticles.cshtml ，改变其内容为：

@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.Name</a></div>
        <div class="articlepreview">@Umbraco.Truncate(@page.ArticleContents,100) <a href="@page.Url">Read More..</a></div>
    </div>
    <hr/>
}

现在去浏览器看一下我们的页面。