Skip to content

Commit f13b3df

Browse files
sofietoftsofietoft
committed
Update and remove existing article
1 parent 9e51f2a commit f13b3df

18 files changed

+100
-184
lines changed

‎14/umbraco-cms/.gitbook.yaml

+1
Original file line numberDiff line numberDiff line change
@@ -130,3 +130,4 @@ redirects:
130130
fundamentals/backoffice/property-editors/built-in-umbraco-property-editors/block-editor/label-property-configuration: reference/umbraco-flavored-markdown.md
131131
customizing/property-editors/build-a-block-editor: fundamentals/backoffice/property-editors/built-in-umbraco-property-editors/block-editor/README.md
132132
tutorials/creating-and-distributing-a-package: extending/packages/creating-a-package.md
133+
fundamentals/design/templates/named-sections: fundamentals/design/templates/README.md

‎14/umbraco-cms/SUMMARY.md

-1
Original file line numberDiff line numberDiff line change
@@ -103,7 +103,6 @@
103103
* [Design](fundamentals/design/README.md)
104104
* [Templates](fundamentals/design/templates/README.md)
105105
* [Basic Razor Syntax](fundamentals/design/templates/basic-razor-syntax.md)
106-
* [Named Sections](fundamentals/design/templates/named-sections.md)
107106
* [Razor Cheatsheet](fundamentals/design/templates/razor-cheatsheet.md)
108107
* [Rendering Content](fundamentals/design/rendering-content.md)
109108
* [Rendering Media](fundamentals/design/rendering-media.md)

‎14/umbraco-cms/fundamentals/design/templates/README.md

+24-24
Original file line numberDiff line numberDiff line change
@@ -99,11 +99,11 @@ The code from the Template replaces the `@RenderBody()` tag in the Master Templa
9999
</html>
100100
```
101101

102-
## Template Sections
102+
## Named Sections
103103

104104
Template Sections give you added flexibility when building your templates. Use the Template Section together with a Master Template setup, to decide where sections of content is placed.
105105

106-
If a Child Template needs to add code to the `<head>` tag a Section must be defined and then used in the Master Template. This is made possible by [Named Sections](https://www.youtube.com/watch?v=lrnJwglbGUA).
106+
If a Child Template needs to add code to the `<head>` tag a Section must be defined and then used in the Master Template. This is made possible by [Named Sections](https://www.youtube.com/watch?v=lrnJwglbGUA).
107107
108108
The following steps will guide you through defining and using a Named Section:
109109

@@ -112,23 +112,26 @@ The following steps will guide you through defining and using a Named Section:
112112
3. Choose **Define a named section**.
113113
4. Give the section a name and click **Submit**.
114114

115-
On your child page template call `@section Head {}` and then type your markup that will be pushed into the Master Template:
115+
![Define a named section by giving it a name](images/defined-named-section.png)
116+
117+
The following code will be added to your Template:
116118

117119
```csharp
118-
@section Head {
119-
<style>
120-
body {
121-
background: #ff0000;
122-
}
123-
</style>
120+
@section SectionName {
121+
124122
}
125123
```
126124

127-
```csharp
128-
@RenderSection("SectionName")
129-
```
125+
5. Add whichever code you need between the curly brackets.
126+
6. Save the changes.
127+
7. Open the Master Template.
128+
8. Choose a spot for the section, and set the cursor there.
129+
9. Select the **Sections** option.
130+
10. Choose **Render a named section**.
131+
11. Enter the name of the section you want to add.
132+
12. Click **Submit**.
130133

131-
For instance, if you want to be able to add HTML to your `<head>` tags write:
134+
For instance, if you want to be able to add HTML to your `<head>` tags, you would add the tag there:
132135

133136
```csharp
134137
@inherits Umbraco.Web.Mvc.UmbracoViewPage
@@ -139,23 +142,26 @@ For instance, if you want to be able to add HTML to your `<head>` tags write:
139142
<html>
140143
<head>
141144
<title>Title</title>
142-
@RenderSection("Head")
145+
@RenderSection("SectionName")
143146
</head>
144147

145148
<body>
146149
</body>
147150
</html>
148151
```
149152

150-
By default, when rendering a named section, the section is not mandatory. To make the section mandatory, add `true` or enable **Section is mandatory** field in the **Sections** option.
153+
You can decide whether a section should be mandatory or not. Making a section mandatory means that any templates using the Master Template is required to have the section defined.
154+
155+
To make the section mandatory, you have two options:
156+
157+
* Check the **Section is mandatory** field when using the **Sections** dialog in the backoffice.
158+
* Add `true` to the code tag like shown in the example below.
151159

152160
```csharp
153161
@RenderSection("Head", true)
154162
```
155163

156-
![Create partial](../../../../../10/umbraco-cms/fundamentals/design/templates/images/render-named-sections-v10.png)
157-
158-
164+
![Create partial](images/render-named-section-mandatory.png)
159165

160166
## Injecting Partial Views
161167

@@ -186,9 +192,3 @@ The created partial view can now be injected into any template by using the `@Ht
186192
### Tutorials
187193

188194
* [Creating a basic website with Umbraco](../../../tutorials/creating-a-basic-website/)
189-
190-
### Umbraco Learning Base
191-
192-
{% embed url="https://www.youtube.com/playlist?ab_channel=UmbracoLearningBase&list=PLgX62vUaGZsFmzmm4iFKeL41CZ5YFw09z" %}
193-
Playlist: Templates in Umbraco
194-
{% endembed %}

‎14/umbraco-cms/fundamentals/design/templates/images/Define-named-section.png

-47.7 KB
Binary file not shown.

‎14/umbraco-cms/fundamentals/design/templates/images/Render-named-sections.png

-57 KB
Binary file not shown.

‎14/umbraco-cms/fundamentals/design/templates/images/defined-named-section.png

64.9 KB
Loading

‎14/umbraco-cms/fundamentals/design/templates/images/render-named-section-mandatory.png

68.3 KB
Loading

‎14/umbraco-cms/fundamentals/design/templates/images/render-named-sections-v10.png

-35.2 KB
Binary file not shown.

‎14/umbraco-cms/fundamentals/design/templates/named-sections.md

-60
This file was deleted.

‎15/umbraco-cms/.gitbook.yaml

+1
Original file line numberDiff line numberDiff line change
@@ -112,3 +112,4 @@ redirects:
112112
fundamentals/backoffice/property-editors/built-in-umbraco-property-editors/block-editor/label-property-configuration: reference/umbraco-flavored-markdown.md
113113
customizing/property-editors/build-a-block-editor: fundamentals/backoffice/property-editors/built-in-umbraco-property-editors/block-editor/README.md
114114
tutorials/creating-and-distributing-a-package: extending/packages/creating-a-package.md
115+
fundamentals/design/templates/named-sections: fundamentals/design/templates/README.md

‎15/umbraco-cms/SUMMARY.md

-1
Original file line numberDiff line numberDiff line change
@@ -112,7 +112,6 @@
112112
* [Design](fundamentals/design/README.md)
113113
* [Templates](fundamentals/design/templates/README.md)
114114
* [Basic Razor Syntax](fundamentals/design/templates/basic-razor-syntax.md)
115-
* [Named Sections](fundamentals/design/templates/named-sections.md)
116115
* [Razor Cheatsheet](fundamentals/design/templates/razor-cheatsheet.md)
117116
* [Rendering Content](fundamentals/design/rendering-content.md)
118117
* [Rendering Media](fundamentals/design/rendering-media.md)

‎15/umbraco-cms/fundamentals/design/templates/README.md

+74-38
Original file line numberDiff line numberDiff line change
@@ -1,32 +1,46 @@
11
---
2-
description: Templating in Umbraco including inheriting from master template
2+
description: Templating in Umbraco builds on the concept of Razor Views from ASP.NET MVC.
33
---
44

55
# Templates
66

7-
_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._
7+
Templates are the files that control the look and feel of the frontend of your Umbraco websites. Building on the concept of MVC Razor Views, template files enables you to structure your websites using HTML, CSS and JavaScript. When tied to a Document Type, templates are used to render your Umbraco content on the frontend.
88

9-
## Creating your first Template
9+
You can manage and work with your templates directly from the Settings section in the Umbraco backoffice. Each Template can also be found as `cshtml` files in the `Views` folder in your project directory.
1010

11-
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:
11+
## Creating Templates
12+
13+
When you are building an Umbraco website you can choose to automatically generate Templates when you create a new Document Type. This will ensure the connection between the two and you can jump straight from defining the content to structuring it.
14+
15+
Choose the option called **[Document Type with Template](../../data/defining-content/README.md)** when you create a new Document Type to automatically create a Template as well.
16+
17+
In some cases, you might want to create independent Templates that doesn't have a direct connection to a Document Type. You can follow the steps below to create a new blank Template:
1218

1319
1. Go to the **Settings** section inside the Umbraco backoffice.
1420
2. Click **...** next to the **Templates** folder.
1521
3. Choose **Create**.
1622
4. Enter a template name.
17-
5. Click the **Save** button. You will now see the default template markup in the backoffice template editor.
23+
5. Click the **Save** button.
24+
25+
You will now see the default template markup in the backoffice template editor.
1826

1927
![Created template](images/create-template.png)
2028

2129
## Allowing a Template on a Document Type
2230

23-
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, go to the Templates tab and select the template under the **Allowed Templates** section.
31+
To use a Template on your content, you must first allow it on the content Document Type type.
32+
33+
1. Open the Document Type you want to use the template.
34+
2. Open the Templates Workspace View.
35+
3. Select your Template under the **Allowed Templates** section.
2436

2537
![Allowing template](images/allow-template.png)
2638

27-
## Inheriting a Master Template
39+
## Inheriting a Template
40+
41+
A Template can inherit content from what is called a "Master Template". This is done by using the ASP.NET views Layout feature.
2842

29-
A template can inherit content from a master template by using the ASP.NET views Layout feature. Let's say we have a template called **MasterView**, containing the following HTML:
43+
Let's say you have a Template called **MainView**, containing the following HTML:
3044

3145
```csharp
3246
@inherits Umbraco.Cms.Web.Common.Views.UmbracoViewPage
@@ -42,21 +56,34 @@ A template can inherit content from a master template by using the ASP.NET views
4256
</html>
4357
```
4458

45-
We then create a new template called **textpage** and in the template editor, click on the **Master Template** button and set its master template to the template called **MasterView**:
59+
This file contains the structural HTML tags for your website but not much else.
60+
61+
By using the Template as the "Master Template" on your other Templates, you can ensure that they inherit the same structural HTML.
62+
63+
Follow these steps to use a Template file as a Master Template:
64+
65+
1. Open one of your Template files.
66+
2. Select the **Master template: No master** button above the editor.
67+
3. Select the Template that should be defined as the Master Template.
68+
4. Click **Choose**.
4669

4770
![Inherit template](images/inherit-template.png)
4871

49-
This changes the `Layout`value in the template markup, so **textpage** looks like this:
72+
Alternatively, you can manually change the value of the `Layout` variable in the Template using the name of the Template file.
73+
74+
The updated markup will look something like the snippet below and the Template is now refered to as a *Child Template*:
5075

5176
```csharp
5277
@inherits Umbraco.Web.Mvc.UmbracoViewPage
5378
@{
54-
Layout = "MasterView.cshtml";
79+
Layout = "MainView.cshtml";
5580
}
5681
<p>My content</p>
5782
```
5883

59-
When a page using the textpage template renders, the final HTML will be merged replacing the `@renderBody()` placeholder, and produce the following:
84+
When a page that uses a Template with a Master Template defined is rendered, the HTML of the two template is merged.
85+
86+
The code from the Template replaces the `@RenderBody()` tag in the Master Template. Following the examples above, the final HTML will look like the code in the snippet below:
6087

6188
```csharp
6289
@inherits Umbraco.Web.Mvc.UmbracoViewPage
@@ -72,17 +99,39 @@ When a page using the textpage template renders, the final HTML will be merged r
7299
</html>
73100
```
74101

75-
## Template Sections
102+
## Named Sections
103+
104+
Template Sections give you added flexibility when building your templates. Use the Template Section together with a Master Template setup, to decide where sections of content is placed.
105+
106+
If a Child Template needs to add code to the `<head>` tag a Section must be defined and then used in the Master Template. This is made possible by [Named Sections](https://www.youtube.com/watch?v=lrnJwglbGUA).
76107
77-
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.
108+
The following steps will guide you through defining and using a Named Section:
78109

79-
You can do this by using [named sections](https://www.youtube.com/watch?v=lrnJwglbGUA). Add named sections to your master template with the following code:
110+
1. Open your Template.
111+
2. Select the **Sections** option.
112+
3. Choose **Define a named section**.
113+
4. Give the section a name and click **Submit**.
114+
115+
![Define a named section by giving it a name](images/defined-named-section.png)
116+
117+
The following code will be added to your Template:
80118

81119
```csharp
82-
@RenderSection("SectionName")
120+
@section SectionName {
121+
122+
}
83123
```
84124

85-
For instance, if you want to be able to add HTML to your `<head>` tags write:
125+
5. Add whichever code you need between the curly brackets.
126+
6. Save the changes.
127+
7. Open the Master Template.
128+
8. Choose a spot for the section, and set the cursor there.
129+
9. Select the **Sections** option.
130+
10. Choose **Render a named section**.
131+
11. Enter the name of the section you want to add.
132+
12. Click **Submit**.
133+
134+
For instance, if you want to be able to add HTML to your `<head>` tags, you would add the tag there:
86135

87136
```csharp
88137
@inherits Umbraco.Web.Mvc.UmbracoViewPage
@@ -93,34 +142,27 @@ For instance, if you want to be able to add HTML to your `<head>` tags write:
93142
<html>
94143
<head>
95144
<title>Title</title>
96-
@RenderSection("Head")
145+
@RenderSection("SectionName")
97146
</head>
98147

99148
<body>
100149
</body>
101150
</html>
102151
```
103152

104-
By default, when rendering a named section, the section is not mandatory. To make the section mandatory, add `true` or enable **Section is mandatory** field in the **Sections** option.
153+
You can decide whether a section should be mandatory or not. Making a section mandatory means that any templates using the Master Template is required to have the section defined.
105154

106-
```csharp
107-
@RenderSection("Head", true)
108-
```
155+
To make the section mandatory, you have two options:
109156

110-
![Create partial](../../../../../10/umbraco-cms/fundamentals/design/templates/images/render-named-sections-v10.png)
111-
112-
On your child page template call `@section Head {}` and then type your markup that will be pushed into the Master Template:
157+
* Check the **Section is mandatory** field when using the **Sections** dialog in the backoffice.
158+
* Add `true` to the code tag like shown in the example below.
113159

114160
```csharp
115-
@section Head {
116-
<style>
117-
body {
118-
background: #ff0000;
119-
}
120-
</style>
121-
}
161+
@RenderSection("Head", true)
122162
```
123163

164+
![Create partial](images/render-named-section-mandatory.png)
165+
124166
## Injecting Partial Views
125167

126168
Another way to reuse HTML is to use partial views - which are small reusable views that can be injected into another view.
@@ -150,9 +192,3 @@ The created partial view can now be injected into any template by using the `@Ht
150192
### Tutorials
151193

152194
* [Creating a basic website with Umbraco](../../../tutorials/creating-a-basic-website/)
153-
154-
### Umbraco Learning Base
155-
156-
{% embed url="https://www.youtube.com/playlist?ab_channel=UmbracoLearningBase&list=PLgX62vUaGZsFmzmm4iFKeL41CZ5YFw09z" %}
157-
Playlist: Templates in Umbraco
158-
{% endembed %}

‎15/umbraco-cms/fundamentals/design/templates/images/Define-named-section.png

-47.7 KB
Binary file not shown.

‎15/umbraco-cms/fundamentals/design/templates/images/Render-named-sections.png

-57 KB
Binary file not shown.

‎15/umbraco-cms/fundamentals/design/templates/images/defined-named-section.png

64.9 KB
Loading

‎15/umbraco-cms/fundamentals/design/templates/images/render-named-section-mandatory.png

68.3 KB
Loading

‎15/umbraco-cms/fundamentals/design/templates/images/render-named-sections-v10.png

-35.2 KB
Binary file not shown.

0 commit comments

Comments
 (0)