Umbraco 官方技术文档翻译八、Templates 模板

来源：互联网发布：单桂敏淘宝店铺编辑：程序博客网时间：2024/06/06 02:44

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模板编辑器中出现的默认模板标记

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”
使用一个模板文件,您必须首先使其在内容类型中被允许。打开您想要使用模板的文档类型,查看“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 calledmasterview, 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的模板:

Inherit template

This changes the Layoutvalue 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 addrequired: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 -您可以选择使用一个预制的模板。

Create partial

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")

Find More information:

Basic Razor syntax
Rendering content

Tutorials

Creating a basic website with Umbraco

Umbraco.TV

Chapter: Templating

0 0

Umbraco 官方技术文档 翻译 八、Templates 模板