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

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

时间: 2024-10-12 17:11:28

Umbraco(7)-The Navigation Menu And A Parent Page with Infinite Children的相关文章

.net的建站步骤(官网实例)

代码特色: Entity Framework Code First CodeFirst是EntityFramework 4.1后新增的一种映射方式 ,在这种方式下,开发人员只需要编写代码,由ORM框架自动动创建模型和数据库 数据库则可看作类似于XML一样序列化的方式,非常简洁(由于开发人员可以无需关心数据库的具体结构,最初也有叫做CodeOnly的). Entity Framework Code First 试了下安装不成功: 提示针对的解决方案框架不符合. 而在2011四月发布的Entity

15个menu菜单设计资源(css|psd)

今天给大家介绍15个菜单设计方面的资源,没一个资源都是可以直接下载到的,其中有的是css,有的仅仅是psd设计图片. Collapsing Vertical Nav (CSS)  Web前端框架最佳选择! 3-Level Navigation Menu (CSS) Ribbon Banner Navigation (CSS) CSS Menu Pack (12 Menus) Simple Tabbed Navigation (PSD)Web前端框架最佳选择! Dark Menu (PSD) PS

[NHibernate]Parent/Child

系列文章 [Nhibernate]体系结构 [NHibernate]ISessionFactory配置 [NHibernate]持久化类(Persistent Classes) [NHibernate]O/R Mapping基础 [NHibernate]集合类(Collections)映射  [NHibernate]关联映射 引言 刚刚接触NHibernate的人大多是从父子关系(parent/child type relationship)的建模入手的.父子关系的建模有两种方法.比较简便.直观

MVC+Bootstrap 企业通用框架搭建--左侧导航菜单的实现--导航菜单的增删改查(3)

补充上面的点击菜单表信息: using System;using System.Collections.Generic;using System.Linq;using System.Text;using System.Threading.Tasks; namespace SqlServer.Entity{ public class Menu_Operation { private int _operation_id; public int Operation_id { get { return

旅游网站首页

经过几天的思考与不断的实践,做一个具体的作品时,应在动手之前先设计好开发项目的模型以及所要实现的功能,觉不能一边在做一边去思考,否则,你会感觉到在做的过程中老是觉得对自己实现的样式感觉不满意,会对它不断地修改,不断地尝试,此时,你会觉得很无奈,不仅无法使作品更好的完成,还会使自己变得浮躁.导致中途放弃.就拿我做的页面来说吧!开始就只想简简单单的做一个网页,可是后面在做的过程中,感觉就想完善以下页面的功能以及美化一下页面,可是导致后面困难重重,一时之间没法进行下去.总之困难还有的.希望大家一起完善

五中常用简洁后台导航菜单(一级导航,二级导航,手风琴式导航,左或右悬浮式导航,树状导航)

首先附上源码,可以下载! http://yunpan.cn/cd9ivPcL4ayQT (提取码:d8a5) 在建立导航菜单的时候,我们首先布局一个(" 头"+[左,右(自适应)]+”尾“)的HTML页面: 来看一下HTML页面的编写: <div id="container"> <div id="head"></div> <div id="mainContent"> <di

MVC+BootStrap 企业通用型框架搭建 ---(2)框架布局及模板页的创建

模板页面介绍 _Header.cshtml头部页面 ,_Footer.cshtml底部页面 ,Main.cshtml框架主页面, _Theme.cshtml(主题页面),_Menu.cshtml(左侧菜单页面),_Style.cshtml(通用样式页面) _Header.cshtml 代码: @{ ViewBag.Title = "_Header";}<script type="text/ecmascript"> $(function () { $(&q

一个简单的导航菜单切换显示

一直都在用导航栏菜单选项的切换,使用js,jquery实现过相应的代码.下面展示一下用js实现切换: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Test</title> <style type="text/css"> #container{width: 1100px;

selenium docs

Note to the Reader - Docs Being Revised for Selenium 2.0! Introduction Test Automation for Web Applications To Automate or Not to Automate? Introducing Selenium Brief History of The Selenium Project Selenium’s Tool Suite Choosing Your Selenium Tool S