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.
Umbraco中的模板是建立在asp.net MVC Razor的视图概念上的——如果你已经知道这个,那么你就已经可以创建您的第一个模板,如果没有,下面这是一个快速和方便的指南。
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
默认情况下所有文档类型应该附加一个模板——但如果你需要一个替代模板或一个新的模板,你也可以创建一个:
在Umbraco backoffice中,打开设置部分,并右键单击templates文件夹。然后选择create。输入模板名称,然后单击create按钮。现在,您将看到在backoffice模板编辑器中出现的默认模板标记
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”
使用一个模板文件,您必须首先使其在内容类型中被允许。打开您想要使用模板的文档类型,查看“allowed templates”下的模板。
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:
一个模板可以通过使用asp.net视图布局功能,从主模板继承内容。假设我们有一个叫做masterview的模板,包含以下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:
然后我们在properties选项卡下面的模板编辑器中, 创建一个名为textpage的新模板, 将它的主模板设置为叫masterview的模板:
This changes the Layout
value in the template markup, so textpage looks like this:
这改变了模板标记中的Layout
的值,所以textpage是这样的:
@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:
当一个页面使用textpage模板来显示的时候, 最终html将取代占位符@renderBody()
,合并起来, 变成以下的代码:
@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:
很高兴知道,你没有局限于单个部分。模板部分允许继承主模板布局的子模板,插入到主要布局模板的HTML代码中。例如,一个孩子模板可以将代码插入到主模板的<head>
标签。
为此,您可以使用已命名的部分。已命名的部分通过下面的代码添加到您的主模板:
@RenderSection("SectionName")
For instance, if you want to be able to add HTML to your <head>
tags write:
例如,如果您希望能够在标签<head>
中添加html,如下:
@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
.
默认情况下,当定义一个部分的时候这是必需的。要让这变成可选的,简单的加一句要求: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.
在你的子页面上调用@section Head {}
,然后输入您的需要被放到主模板中的标记。
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.
重用html的另一种方法,是使用partials —— 一个小的可重用的视图,可以注入另一个视图中。
比如模板,创建一个partial,通过点击“partial views”并选择create -您可以选择使用一个预制的模板。
the created partial can now be injected into any template by using the @Html.Partial()
method like so:
创建的partial现在可以通过@Html.Partial()
的方法注入任何模板,如下:
@inherits Umbraco.Web.Mvc.UmbracoTemplatePage
@{
Layout = "MasterView.cshtml";
}
<h1>My new page</h1>
@Html.Partial("a-new-view")