Templates

Templating in Umbraco builds on the concept of Razor Views from asp.net MVC - if you already know this, then you are ready to create your first template - if not, this is a quick and handy guide.

Creating your first template

By default all document types should have a template attached - but in case you need an alternative template or a new one, you can create one:

Open the settings section inside the Umbraco backoffice and right-click the templates folder. then choose create. Enter a template name and click the create button. You will now see the default template markup in the backoffice template editor

Created template

Allowing a template on a document type

To use a template on a document, you must first allow it on the content's type. Open the document type you want to use the template and check the template under "allowed templates"

Allowing template

Inheriting a master template

A template can inherit content from a master template by using the asp.net views Layout feature. Lets say we have a template called masterview, containing the following html:

@inherits Umbraco.Web.Mvc.UmbracoTemplatePage
@{
    Layout = null;
}
<!DOCTYPE html>
<html lang="en">
    <body>
        <h1>Hello world</h1>
        @RenderBody()
    </body>
</html>

We then create a new template called textpage and in the template editor, under the properties tab, sets its master template to the template called masterview:

Inherit template

This changes the Layoutvalue in the template markup, so textpage looks like this:

@inherits Umbraco.Web.Mvc.UmbracoTemplatePage
@{
    Layout = "MasterView.cshtml";
}
<p>My content</p>

When a page using the textpage template renders, the final html will be merged together replacing the @renderBody() placeholder and produce the following:

@inherits Umbraco.Web.Mvc.UmbracoTemplatePage
@{
    Layout = null;
}
<!DOCTYPE html>
<html lang="en">
    <body>
        <h1>Hello world</h1>
        <p>My content</p>
    </body>
</html>

Template Sections

What's good to know, is that you are not limited to a single section. Template sections allow child templates that inherit the master layout template to insert HTML code up into the main layout template. For example a child template inserting code into the <head> tag of the master template.

You can do this by using named sections. Add named sections to your master template with the following code:

@RenderSection("SectionName")

For instance, if you want to be able to add HTML to your <head> tags write:

@inherits Umbraco.Web.Mvc.UmbracoTemplatePage
@{
    Layout = null;
}

<html>
    <head>
        <title>Title</title>
        @RenderSection("Head")
    </head>

    <body>
    </body>
</html>

By default, when defining a section it is required. To make the section optional, simply add required:false.

@RenderSection("Head", required: false)

On your child page call @section Head {} and then type your markup that will be pushed into the Master Template.

Injecting partial template

Another way to reuse html is to use partials - which are small reusable views which can be injected into another view.

Like templates, create a partial, by clicking "partial views" and selecting create - you can then optionally use a pre-made template.

Create partial

the created partial can now be injected into any template by using the @Html.Partial() method like so:

@inherits Umbraco.Web.Mvc.UmbracoTemplatePage
@{
    Layout = "MasterView.cshtml";
}

<h1>My new page</h1>
@Html.Partial("a-new-view")

Find More information:

Tutorials

Umbraco.TV