Thursday, December 13, 2007 by Niels Hartvig

If you've followed the past tutorials you've learned about storing data using Document Types and presenting content using Templates. In this tutorial we'll look at have you can use Master Templates to store central parts of your site markup in one place and re-use it in others.

 

Master Templates

A master template is the exact same thing as ordinary Templates and they're created in the same way as we created our "Home Page" template in the previous tutorials. The only difference is that a Master Template includes a bit of information about where Child Templates should be inserted. This is a very simple, but efficient way to ensure that you don't repeat yourself and only need to make modifications in one place. You can even nest multiple master templates for maximum flexibility.

For a start we'll create a Master template based on the markup in our "Home Page" template. Then we'll update our "Home Page" template to use our new master template and at last we'll do the same for our "Text Page" templates. So head over to the "Settings" section of umbraco and let's get started.

 

Creating a Master Template

To create a Master Template, simply right click "Templates" and choose create:

dec9-create-template

In the Dialog, call the new Master Template "Master" and click "Create:

dec9-create

As you can see in the tree view, a new template has been created, so let's copy the markup from our "Home Page" template to the master.

Click the "Home Page" template in the tree view and copy the markup (by either using the mouse or keyboard short-cuts: CTRL+A and CTRL+C):

dec9-copy

Now, click the "Master" template in the tree view and paste the contents into the text area.

The next step is to make a little modification to our markup which will turn this template into a Master Template. We'll replace the <?UMBRACO_GETITEM field="bodyText"/> with an instruction to insert a child template instead. That instruction is called "<?UMBRACO_TEMPLATE_LOAD_CHILD/>" and remember that you can always get a list of template elements by clicking the little blue help icon in the toolbar. Remember to click the "Save" icon and then your final markup should look like this:

dec9-master

 

Using the Master Template

The next step is to modify our "Home Page" template so it uses our Master Template. It's very simple, all you need to do is to choose the Master Template from the "Master Template" dropdown. Once that's done, we can remove all the markup from the "Home Page" template which now is stored in our Master Template. So edit the "Home Page" template, choose "Master" as the Master Template and modify the template markup so it looks like this (and remember to save):

dec9-new-homepage

As you can see our Home Page template is much cleaner and because we can repeat this technique on all the other templates we'll use on our site, future changes in the central markup will be very easy to maintain, as it's stored in one single template instead of being spread across all.

So that was Master Templates. The next step is to learn about "Macros" which are used for dynamic lists and forms in umbraco and we'll use it to create a dynamic navigation for our tutorial site. But that's not until a couple of days.

The next couple of Christmas Calendar chapters will be some tips and tricks for power users - they also need a little love from umbraco Santa, don't they :-)

0 comment(s) for “Dec 9: Using Master Templates”

    Leave comment:

    Comments are disabled for older posts