We've seen how to create a Document Type and its corresponding Template. If you want to create a website containing Home, News, and Contact Us pages, you will need to create a Document Type with a corresponding Template.
You may end up copying the same HTML code into each of these templates, which can be time-consuming and repetitive. In such scenario, you might want to consider creating a new master template.
To create a new master template:
Go to Settings.
Select the ... next to the Templates folder. Alternatively, click + to open a blank template.
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.
Expand the Templates folder from the Templating section.
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.
Click Choose. The Razor code section is updated 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. 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.
Expand the Templates folder from the Templating section.
Navigate to the Homepage template.
Cut everything from the <!DOCTYPE HTML>
(around line 7) to the end of the </div>
tag (around line 43) 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 7).
Add @RenderBody()
at the end of the markup. This will tell Umbraco to insert the child template's content.
Click Save.
Repeat the same process for the footer content:
Go to the Homepage template and cut everything from the <!-- Footer -->
tag (around line 108) to the end of the </html>
tag (around line 122) 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 such as header or footer, ensure that the templates matches the following: