Umbraco(6)-Creating More Pages Using the Master - Part 2(翻译文档)
创建一个Contact Us页面
我们将创建一个新的”联系我们“页面,在该页面我们将放置简单的联系信息。对于添加这个功能你可能想替换为一个完全成熟的形式。
一些有效的解决方案:
- 使用表面控制器构建自己的接触形式:
http://our.umbraco.org/documentation/Reference/Templating/Mvc/forms或者是
http://umbraco.tv/videos/developer/fundamentals/surface-controllers/
- 如果你不是一个程序员,可以使用现成的包:
http://umbraco.com/products/more-add-ons/contour.aspx
现在让我们创建一个简单的页面 - 一个用户可以提供一个标题和一些富文本的页面。这非常类似于我们的主页文档类型,但是,目前假设我们你要去开发非常具体的这个东西(例如。添加了文章和其他内容块条。)
打开Settings > Document Types (hover) > ... > + Create。我们创建一个页面命名为"Simple Content Page"。选择Master Document Type为"none..."(使用主文档类型允许我们从父级继承文档类型)但是我们将创建一个匹配的模板,所以默认那个选择。
首先让我们选择一个图标 - 输入单词"Content"来进行筛选和选择这个文件的图标。在描述类型简单写"A simple content page",默认Allowed Templates(例如,只有Simple Content页面被选择)。点击Save按钮。
现在点击Settings > Templates (hover) > ... ,然后单击Reload Nodes。选择Simple Content Page节点,进入Properties选项卡。改变Master Template下拉选择Master这个模板 - 这将意味着就像我们Homepage模板一样,我们从master模板中得到页眉和页脚。
单击Save保存,然后重新加载Template选项卡,你将会看到Razor语言被更新为:Layout="Master.cshtml"。如果它没有更新,点击其他不同的节点,然后重新加载。现在需要给这个模板加上HTML,然后保存。
<div id="main-container">
<div id="main" class="wrapper clearfix">
<section>
<h2>Header goes here</h2>
<p>Content goes here</p>
</section>
</div> <!-- #main -->
</div> <!-- #main-container -->
现在我们使用刚刚创建的Document Type和Template来创建一个新的页面 - Content > Homepage (hover) > ... > Create. 。但是我们发现出现了下面的错误:
【Umbraco Content 发生了错误:没有可用的文档类型】
这是通过设计——Umbraco的限制是编辑者只能够创建内容编辑,对于开发者是允许的。这将阻止用户在主页下创建一个新的新闻内容节点时,打破一个网站设计(或整个网站)!不幸地是,这个功能也混淆了许多新的Umbraco使用者——因此,我们在这里向您展示了这个错误的原因。
打开Settings > Document Types > Homepage ,在Structure选项卡中,在标签Allowed child nodetypes后边你将会看到一列复选框(不要混淆在Info选项卡中的Allowed template - 稍后我们将讨论)。所以我们需要允许用户能够创建子节点,主页类型为Simple Content Page。选择复选框然后保存。
【Homepage - Allowed Child Nodetypes允许创建子节点】
这里还有一些困惑 - 首先我们要创建一个Simple Content Page,但是我们必须允许创建文档类型 - 例如,我们创建了一个新的文档类型,然后随后我们更新主页的设置来能够使用它。当我们创建一个Articles container 和 Article item后,我们再这样做。我么需要在Articles container 下允许Article item。简单 - 也许对你来说不简单,但是你会习惯它的。
现在返回Content > Homepage (hover) > ... > Create 现在我们已经创建Simple Content Page成功!选择并输入一个名称(文本顶部红色区域)。你可以看到我们仅仅只有一个Properties选项卡-没有数据。这是不同的文档类型创建的主页,我们没有创建任何的标签和数据属性(例如:没有bodyText或pageTitle)。点击Save and Publish。
【创建我们的Contact页面】
我们重新加载Content,将会看到在homepage下有Contact Us页面。这是大多数网站的推荐结构 - 你的一级页面将在主页下。现在去看看这个页面 - 如果你在Properties这个选项卡,你将会看到Link To document一行 - 点击它。你可能会再一次发现没有样式的页面。这是因为这个模板的设计者认为你的网站将是一个平面结构 - 例如,所有页面建立在相同的一级,所以浏览器不能发现在homepage这一级的CSS和JS。你需要更新Master模板修改CSS和JS文件的引入方式:
<link rel="stylesheet" href="/css/style.css">
<script src="/js/libs/modernizr-2.0.6.min.js"></script>
保存模板的修改,之后加载Contact Us页面。我们现在有一个空的页面。
我们来添加两个简单的字段 - pageTitle (type = Textstring) 和 bodyText (type Rich Text Editor)。如果你不知道如何添加字段,你可以按照创建主页面文档类型的说明来创建。然后连接这些字段 - 如果这不是你的第二天性,可以通过编辑Homepage下的模板。
【Contact Us Generic Properties(通用属性)】
【Contact Us Template with Data Fields】
现在添加一些内容Content > Homepage node > Contact Us node。 点击Save and Publish,然后在重新加载时,你会看到更有趣的页面。
【Contact Us with Some Data】
从主页使用文档类型属性
你可能注意到我们页脚部分现在还是空的 - 我们没有从Homepage节点中得到内容。我们需要告诉Umbraco去父节点Homepage中得到content。现在我们开始编辑这个Master模板。
在Umbraco页脚字段中有<h3>标签,点击Insert Umbraco page field按钮
在这里的选项我们忽略所有选项的早期发挥的作用 - 再一次从Choose field 下拉选项中选择footerText,但这一次我们还要选择Recursive这个复选框。这是在告诉Umbraco,如果这个级别不存在我们请求的节点字段的话(例如Contact Us),它将会查找内容节点(在我们的例子中这个内容在Homepage中) - 这意味着如果你想要编辑来覆盖默认,你可以在Contact Us页面中创建一个footerText元素,但是在这个领域是不经常使用的。点击Insert,你将会看到不同的Razor语言被加上:
@Umbraco.Field("footerText", recursive: true)
点击Save,然后重新加载Contact Us页面。
Umbraco(6)-Creating More Pages Using the Master - Part 2(翻译文档)的更多相关文章
- Umbraco(2) - Creating Your First Template and Content Node(翻译文档)
创建(编辑)你的第一个模板(Template) 展开 Settings > Templates文件夹 - 然后你应该看到子节点名为"Homepage" - 这是我们在创建Do ...
- 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 ...
- Umbraco(5)-Creating Master Template Part 1(翻译文档)
原文地址:http://www.ncloud.hk/%E6%8A%80%E6%9C%AF%E5%88%86%E4%BA%AB/umbraco5-creating-master-template-par ...
- Umbraco(1) - Document Types(翻译文档)
Document Types Data first nothing in = nothing out! 任何网站的第一步是创建一个"Document Type"-几次安装后你会熟悉 ...
- 管理后台-第一部分:Creating custom sections in Umbraco 7 - Part 1(翻译文档)
在Umbraco上每个部分都可以被称为一个应用程序,所以这些部分和应用程序基本上是一样的.我们首先要做的事情是需要创建应用程序.在这个例子中,我不会去摆弄xml文件或是数据库——我将使用类来创建我的内 ...
- Umbraco(3) - CSS & Javascript(翻译文档)
原文地址:http://www.ncloud.hk/%E6%8A%80%E6%9C%AF%E5%88%86%E4%BA%AB/umbraco3css-javascript/ CSS & Jav ...
- 管理后台-第二部分:Custom sections in Umbraco 7 – Part 2 the views(翻译文档)
在上一篇文章中我们讨论了怎样在我们Umbraco7.0版本中去添加一个新的自定义的应用程序(或部分)和如何去定义一个树.现在我将给你展示你改何如添加视图,来使你的内容可以做一些更有意义的事情. The ...
- ASP.NET MVC- VIEW Creating Page Layouts with View Master Pages Part 4
In this tutorial, you learn how to create a common page layout for multiple pages in your applicatio ...
- Creating Help Pages for ASP.NET Web API -摘自网络
When you create a web API, it is often useful to create a help page, so that other developers will k ...
随机推荐
- 操作Cookie的一个陷阱服务器端获取不了maxAge或其它属性
搞了几天终于弄明白了这个问题: 在读取Cookie,然后操作时,除了getName(),getValue()外,不要妄图得到其他信息,如下方法不会得到值的:cookie.getMaxAge();=== ...
- jsp转发action的问题找不到acton
-----------------------------jsp转发action的问题找不到acton------------------------------------------- jsp: ...
- JavaScript一些不常用的写法
如何写JavaScript才能逼格更高呢?怎样才能组织JavaScript才能让别人一眼看出你不简单呢?是否很期待别人在看完你的代码之后感叹一句“原来还可以这样写”呢?下面列出一些在JavaScrip ...
- android Notification和NotificationManager的使用
Notification和NotificationManager 1.Broadcast Receiver组件没有提供可视化的界面来显示广播信息.这里我们可以使用Notification和Notifi ...
- [hihoCoder]#1039 : 字符消除
Description 小Hi最近在玩一个字符消除游戏.给定一个只包含大写字母"ABC"的字符串s,消除过程是如下进行的: 1)如果s包含长度超过1的由相同字母组成的子串,那么这些 ...
- Nginx (基于linux)综合
重启Nginx服务:centos:测试NGINX配置文件是否有效:/usr/local/nginx/sbin/nginx -t 平滑重启:/usr/local/nginx/sbin/nginx -s ...
- Java浮点值拒绝服务漏洞危害分析
By 空虚浪子心 http://www.inbreak.net/ JAVA出了漏洞,CVE-2010-4476,会导致拒绝服务攻击.大家能从公告上,看到这样一段代码,挺长的.意思是只有开发人员写出这样 ...
- 全面认识jQuery.fn,菜鸟总结
今天想做树形导航栏,查找了资料,找到了一个框架,比较小所以研究其中的代码,发现第一句话就把我难住了,主角是——jQuery.fn. 在此,再次停住,只好继续找资料,现在整理下自己所理解到的知识. 一, ...
- WEB的相关知识总结
JS-->OOP/Module, DOM, JSON, AJAX------------------><script>, script.js的内容 HTML/JS/CSS HT ...
- STM32F103定时器输出PWM波控制直流电机
这个暑假没有回家,在学校准备九月份的电子设计竞赛.今天想给大家分享一下STM32高级定时器输出PWM波驱动直流电机的问题.. 要想用定时器输出的PWM控制直流电机,,首先要理解“通道”的概念..一个定 ...