Developing a Web site with Umbraco [2]: Create a base site with Umbraco (top)

With the previous preparation, we have fully developed the conditions for a Umbraco site, let's go on~~~

Umbraco Official website provides a learning static template resource pack, quite a lot of people are really not easy to find, address in the following:

Https://github.com/verekia/initializr-template/archive/master.zip

One, create the first document type

1. The 1th step in making any site is to create a "document Type". The document type is the container for the data, where you can add the Edit data Field/property, the user can enter the data and then Umbraco can use it to output to the appropriate location of the "template" (More information we will step into).

Document types can be infinitely extensible, but generally include the following data fields:

• Page Title
• Sub Heading
• Body Text
• Meta Title
• Meta Description

Click on the "Setting" section on the left, you will see a long list in the tree area, do not control the other content, on the right side of the "Document Type node", click on the three dots ..., the menu will appear, with three options to choose from, click "Document type" option, the system will automatically create the corresponding template page for you. By choosing "Folder", you can organize your document types better, but not for the time being.

2, give a name to the newly created document type, for example: homepage, you can see, aliases will be created automatically, it is very important! Very IMPORTANT! Very IMPORTANT! Enter a description in Description, which facilitates selecting the correct document type later. Then click on the "Save" button to save

3. Now the first document type has been created under the tree structure node. Continue to help document type setting an easy-to-identify icon, click the White icon to the left of the document type name, enter "Home" in the popup panel to search

4. Next, click on the Permissions icon and tick "allow as root". This will allow us to create the content of the homepage type at the root level of the content node.

5. Click on the "Design" button above to return to the layout. Create a new tab named "Contents" and remember to click the "Save" button later.

6. Now we click on the "Add Property" link below to add the necessary data attributes for the document type homepage, which will be used to enter the content contained in the Content section. Enter "Page Title" in the first column, and when the text box loses focus, you will find that the system has helped you generate the alias "PageTitle". Next click on the "ADD Editor" link, you can see a long edit list, select the "Textbox"

7, the system will generate a long name for this type, now do not care about him, click on the lower right corner of the "Submit" button, and then in "Description" to enter the description of the property

8. Repeat 6-7 steps to create the following properties

9. Finally, the type of document that you create should look like the following:

10. Now we have created the first document type. Umbraco development site requires the most basic three elements: Document type, template, content, and this is the most important. It binds its corresponding instance data to the template for output.

Second, create the first "template" and "Content node" contents nodes

After creating the first document type, we then create the corresponding template and content.

1, expand the "Setting" section of the "Templates" directory, you will find that there is already a template called "homepage" exists, Umbraco in the creation of the document type has helped us to automatically create the corresponding template. When you create a document type, you select another option "... Without template does not automatically create the corresponding templates.

Click on the generated template node, the system will automatically load the template file, in addition to a small amount of Razor code, is an empty file.

2. Now we open the HTML style file that we downloaded earlier, copy the code in the Index.html, and then, in the above coded editor, note the position, after closing the curly brace}. Looks like the following:

Click the "Save" button.

Now we have finished the second step of making a page.

3. Our third and final step is to create a page that can be edited in the content node, with the corresponding document type and template, to render the final HTML page to the browser.

Click the section area on the left, select Content, and in the expanded tree area, click the three dots to the right of the gray Content menu bar ..., and if the previous steps are correct, you will see an option to create the homepage.

If you don't see the contents of the panel here, go back to check Settings> Document Types > homepage node > Permissions > Allow at root is checked status.

4, you can see the document type description previously set, click on icon to create the first page, the document type will create a corresponding Content based on the attributes, while the fields need to fill out the editing.

After entering the information you need to enter, click on the "Save and Publish" button in the lower right corner. The menu will refresh automatically, and then we will see that the homepage node has been created under the Content menu. Next we can enter the website domain name in the address bar to visit. Just now see the page bare, because no style information has been introduced.

Third, CSS and Javascript

Umbraco system can create, manage CSS and JS, but for the Division of labor and efficiency considerations, it is recommended that the style work to the front-end, in the Umbraco template page directly referenced.

The code might look like this:

Iv. output "Document Type" property
When we browse the page, we find that the actual output of the page is not directly related to the type and content of the document we created earlier. is because we simply copied the HTML code into the template, and did not add any output statements.
What we are going to do now is to output the contents of the previous entry.
1. Return to the previous template Editing page: Setting-->templates-->homepage, and then select the placeholder character that you want to output the property, about 27 rows
2. Click on the template Editor's first button "Insert Umbraco page field", after opening the panel, select PageTitle in the "Choose Field" dropdown
3. Next, replace the H1 and P code segments in the template with the pagebody in the same way, replacing the H3 label at the bottom with the Footertitle
4. After completing the above operation, click "Save" button to save the template. Then go to refresh the homepage, we can see the page data has been removed from the content, we completed the first step goal. Now we're simulating the real page condition, adding two section tags and footer tags to the template's article tag, and now our template code looks similar to:
@inherits umbraco.web.mvc.umbracotemplatepage@{Layout = null;} <!doctype html><!--[if Lt IE 7]> 
We will continue to learn later if you manage your organization templates to make your code more reusable, and if you use node relationships, you make the association between content more flexible.
Developing a Web site with Umbraco [2]: Create a base site with Umbraco (top)