We've seen how to create a Document Type and its corresponding Template. If you want to create a three-page site containing; Home, News and Contact Us pages, you would create a Document Type with a corresponding Template and copy the same HTML code into each template.
If you see yourself repeating the same HTML multiple times in your templates, you might want to consider creating a new master template.
To create a new master template:
Go to Settings.
Select Templates from the Templating section.
Select the ... next to the Templates folder and click Create.
A template opens up in the content editor. Enter a Name for the master template. Let's call it Master.\
Click Save.
To use the master template:
Go to Settings.
Select Templates from the Templating section and open the Homepage template.
Select Master Template: No Master. The Master template dialog opens on the right-side of the browser.
Select the template called Master. This will update the Razor code section from Layout = null; to Layout = "Master.cshtml"; \
Click Save.
We now need to move the parts of our HTML template that are common across all templates into the Master. It might be slightly different for different websites and you'll need to consider if all pages contain a <div id="main"> section so that you can update it in the master.
To update templates with the new master template, follow these steps:
Go to Settings.
Select Templates from the Templating section and open the Homepage template.
For this tutorial, we will cut everything from the <html> (around line 9) to the end of the </div> tag (around line 44) which is the header and navigation of the site to the master template.\
Click Save.
Go to the Master template and paste this HTML markup after the closing curly brace (around line 9).\
At the end of this markup, we need to tell Umbraco to insert the child template's content. To do so, add the code @RenderBody() at the end.\
Click Save.
Repeat the same process for the footer content:
Go to Settings > Templates > Homepage template and cut everything from the <!-- Footer --> tag (around line 110) to the end of the </html> tag (around line 124) and click Save.
Go to the Master template and paste this HTML markup after the @RenderBody field we've added.\
Click Save.
Now we've done a lot of work. When we refresh our localhost page, nothing has changed. If you have a compilation error you have perhaps mistyped @RenderBody().
If you are missing any content (header or footer), check that the templates matches the following:
