Umbraco (6)-creating more Pages Using the Master-part 2 (translate document)

Source: Internet
Author: User
Tags contact form umbraco

Create a Contact Us page

We will create a new "Contact us" page where we will place simple contact information. For adding this feature you may want to replace it with a fully fledged form.

Some effective solutions:

    • Use the surface controller to build your own contact form:

Http://our.umbraco.org/documentation/Reference/Templating/Mvc/forms or Yes.

http://umbraco.tv/videos/developer/fundamentals/surface-controllers/

    • If you are not a programmer, you can use ready-made packages:

Http://umbraco.com/products/more-add-ons/contour.aspx

Now let's create a simple page-a user can provide a title and some rich text page. This is very similar to our home page document type, but, for now, let's assume that you're going to develop something very specific (for example. Added articles and other content block bars. )

Open Settings > Document Types (hover) > ... > + Create. We create a page named "Simple Content page". Select the master document type of "None ..." (using the main documentation type allows us to inherit the document type from the parent) but we will create a matching template, so the default choice.

First let's Select an icon-enter the word "Content" to filter and select the icon for this file. In the description type, simply write "A Simple content page", the default allowed Templates (for example, just the simple content page is selected). Click the Save button.

Now click Settings > Templates (hover) > ... , and then click Reload Nodes. Select the Simple Content page node and go to the Properties tab. Change master Template drop-down to select master-this will mean, like we homepage templates, we get headers and footers from the master template.

Click Save and reload the Template tab, and you will see that the razor language is updated to: layout= "master.cshtml". If it is not updated, click on a different node and reload it. Now you need to add HTML to the template and save it.

<div id="main-container">    <div id="main" class="wrapper clearfix">        <section>            
 Content > Homepage (hover) > ... > Create. 。但是我们发现出现了下面的错误:

"Umbraco Content Error: No document type available"

This is through the design--umbraco limit is that the editor can only create content editing, for the developer is allowed. This will prevent users from creating a new news content node under the home page when breaking a website design (or the entire site)! Unfortunately, this feature also confuses many new Umbraco users-so we're here to show you the cause of the error.

Open Settings > Document Types > Homepage , on the Structure tab, in the label allowed child NodeTypes behind you will see a list of checkboxes (don't confuse allowed template in the Info tab-we'll discuss it later). So we need to allow users to create child nodes, and the page type is simple Content page. Select the check box and save.

"homepage-allowed child nodetypes allows creation of subnodes "

There's some confusion here-first we're going to create a simple Content Page, but we have to allow the creation of a document type-for example, we created a new document type, and then we update the page's settings to be able to use it. When we create a articles container and article item, we do it again. I need to allow article item under articles container. Simple-maybe it's not easy for you, but you'll get used to it.

now back to Content > homepage (hover) > ... > Create Now we have created simple Content page success! Select and enter a name (the red area at the top of the text). You can see that we only have one properties tab-no data. This is the home page created by different document types, and we did not create any labels and data attributes (for example: no BodyText or PageTitle). Click Save and Publish.

"Create our Contact page"

We reload the content and will see a contact Us page under homepage. This is the recommended structure for most sites-your first-level page will be under the home page. Now go to this page-if you are in the Properties tab, you will see the link to document line-click on it. You might find a page without a style again. This is because the designer of this template thinks your site will be a flat structure-for example, all pages are built on the same level, so the browser cannot find CSS and JS at homepage this level. You need to update the master template to modify the way CSS and JS files are introduced:

<link rel= "stylesheet" href= "/css/style.css" >

<script src= "/js/libs/modernizr-2.0.6.min.js" ></script>

Save the changes to the template, and then load the contact Us page. We now have an empty page.

Let's add two simple fields- pagetitle (type = textstring) and bodyText (type Rich Text Editor). If you don't know how to add a field, you can create it by following the instructions for creating the document type for the master page. Then connect these fields-if this is not your second nature, you can edit the template under homepage.

"ContactUs Generic Properties (Common attributes)"

"ContactUs Template with Data fields"

Now add something Content > Homepage node > Contact Us node. Click Save and Publish, and then when you reload, you'll see more interesting pages.

"ContactUs with Some Data"

Use document type properties from the home page

You may notice that our footer section is still empty-we did not get the content from the homepage node. We need to tell Umbraco to get the content in the parent node homepage. Now let's start editing this master template.

In the Umbraco footer field There are

@Umbraco. Field ("Footertext", Recursive:true)

Click Save, and then reload the contact Us page.

"Original: 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 (translate document)

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.