Document Types and Templates
In the Content section of Umbraco, we can store content items that do not yet have a representation (apart from some markup in the Rich Text Editor). In order to turn a content item into a web page (or, actually, into any other type of representation) we will start out with a template.
A template will contain placeholders, that will be replaced by actual values coming from the content item during the rendering process. So, a basic template for a web page would start out with some HTML.
In order to enrich the HTML with values and logic, we will use the much appreciated Razor language. Razor code is processed at rendering time and will be substituted by its output. Razor is an ASP.NET programming syntax, designed particularly to provide dynamic templates. The embedded code is C# in most cases, although VB.NET is also supported. A line of Razor code begins with a @ symbol. If code extends over multiple lines, it is grouped in @{ ... }.
The rendering template for a Document Type is defined as a property of a document type.
A Template for each Document Type?
As Document Types differ from one to another, it seems obvious that each Document Type should have its own Template. However, often a significant part of a Document Type (and its representation in HTML) will be similar to other Document Types.
As an example, each page in the website will contain a logo, some meta data and a navigation structure. This should be specified in a reusable way rather that duplicating code, which would lead to maintenance issues.
That is where inheritance comes in. We can extract the core essentials of a template and turn that into a master template. Only the variations between the Document Types need to be specified in their own templates.
In Umbraco implementations you will often see a template structure like this:
- Master template
- Template for Document Type A
- Template for Document Type B
- ...
This is just a hierarchical storage of templates. The key is that the "Template for Document Type A" has a reference to "Master template". This wires the master template into the specific template:
@Layout = "Master template.cshtml"
Multiple Templates for a Document Type
There may be reasons to have multiple templates for a single document type. If multiple templates are available, the editor of the content may select the appropriate template.
The Master Template
The master template contains the code that is common to all active Document Types. We will start building the Master Template.
First of all, notice the HTML section. This is static code for now, without any placeholders in it. In order to be able to reference a Model (remember, we are using MVC, Model - View - Controller technology), we declare inheritance of the template:
@inherits Umbraco.Web.Mvc.UmbracoTemplatePage
This means that from this point on, we can reference the methods and properties of UmbracoTemplatePage.
One of the dynamic properties of UmbracoTemplatePage is CurrentPage. This returns the content of the content item as a dynamic object.
In the example below you can see the some uses of this object, setting the values of the variables home, language, curNode and nodeLang. We may refer to these variables in the HTML that follows, as is shown for the nodeLang property in the HTML tag.
Now we can start building up the rest of the template. In order to prevent endlessly long templates, we can cut up the code into different sections. These code sections are called Partial Views. Obvious candidates for partial views are main navigator, doormat navigation, search functions, error handling functions et cetera.
We can use the MVC Html helper to render these partial views.
@inherits Umbraco.Web.Mvc.UmbracoTemplatePage
@{
Layout = null;
var home = @CurrentPage.Site();
var language = @CurrentPage.GetCulture().ToString();
var curNode = Umbraco.TypedContent(Model.Content.Id);
string nodeLang = curNode.GetCulture().ToString();
}
<!DOCTYPE html>
<html lang="@nodeLang">
<head>
<!-- Meta tags -->
<!-- CSS -->
<link rel="stylesheet" type="text/css" href="/css/style.css">
</head>
<body>
@{
Html.RenderPartial("MainNavigation");
...
...
}
...
</body>
</html>
