创建一个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页面。

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

Umbraco(6)-Creating More Pages Using the Master - Part 2(翻译文档)的更多相关文章

  1. Umbraco(2) - Creating Your First Template and Content Node(翻译文档)

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

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

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

  4. Umbraco(1) - Document Types(翻译文档)

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

  5. 管理后台-第一部分:Creating custom sections in Umbraco 7 - Part 1(翻译文档)

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

  6. Umbraco(3) - CSS & Javascript(翻译文档)

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

  7. 管理后台-第二部分:Custom sections in Umbraco 7 – Part 2 the views(翻译文档)

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

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

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

随机推荐

  1. extjs表格下的分页条——Ext.grid.Panel 的 pagingtoolbar

    两种分页条:每页固定条数的分页条 和 自定义选择每页内容条数的分页条 一.每页固定条数的分页条 这种样式的-- dockedItems: [{ xtype: 'pagingtoolbar', stor ...

  2. embed 隐藏播放器显示

    昨天在页面做音频播放的时候,客户要求仅仅有声音.不显示播放器. 百度搜到解决方法: <embed id="embed_sound_id" src="test.mp3 ...

  3. 由“大数据量Excel入库高效方式”瞥见“并联系统”之优势

    使用场景:         当你有一个Excel文件,需要把其中的数据高速录入到数据库中,文件中包含10万条以上数据. 设计方案:        我们将整个过程分成三个阶段,A(装载Excel文件). ...

  4. 【M29】引用计数

    1.引用计数这项技术,是为了让等值对象对象共享同一实体.此技术的发展有两个动机:a.记录堆上分配的对象,是垃圾回收机制的简单原理:b.节省内存,多个对象具有相同的值,存储多次很笨.速度更快,等值对象避 ...

  5. 【S17】使用“swap技巧”除去多余的容量

    1.考虑下面的需求,对于vec开始的时候有1000个元素,后来只有10个元素,那么vec的capacity至少还是1000,后面的990个内存单元,没有使用,但是还被vec霸占着.如何释放这些内存呢? ...

  6. 从零开始学android开发-项目重命名

    --修改项目名称 选中项目-[refactor]-[rename] --修改package名称 选中需要重命名的包-[refactor]-[rename] --修改gen下面的名称 打开Android ...

  7. 【MongoDB】mongoimport and mongoexport of data (一)

    In the software development, we usually are faced with a common question of exporting or importing d ...

  8. C++ Code_ImageList

    主题 1.  创建图像列表 2.  使用图像列表绘图 3. 4. 5.     代码::创建图像列表 双击 Cproject03Dlg在     下面添加 1 句 ////////////////// ...

  9. sql server常用知识点

    --删除表 use [20130823_Recource] go drop table my_table1,my_table2,My_table3 --创建表 use [20130823_Recour ...

  10. CGI,FastCGI,PHP-CGI与PHP-FPM(转)

    http://www.cnblogs.com/zl0372/articles/php_4.html CGI CGI全称是“公共网关接口”(Common Gateway Interface),HTTP服 ...