В прошлом сообщении мы рассмотрели создание Razor-шаблона в административной консоли Composite C1.
Я обратил ваше внимание на то, что в создаваемый шаблон будет добавлен код по умолчанию. Давайте рассмотрим, что именно добавляется в такой шаблон, чтобы знать наверняка, что можно менять, а что - не стоит.
Но перед этим давайте рассмотрим минимум кода, который должен включать любой шаблон на основе Razor в Composite C1 версии 4.0 и выше.
Зная, что включает в себя минимальный код, вы сможете создавать Razor-шаблоны в любимом редакторе кода (например, Visual Studio), не только в админке Composite C1.
Чтобы Composite C1 признал .cshtml-файл в качестве полноценного шаблона страниц, этот файл должен:
Рассмотрим этот код.
Любой шаблон в Composite C1 имеет:
Я обратил ваше внимание на то, что в создаваемый шаблон будет добавлен код по умолчанию. Давайте рассмотрим, что именно добавляется в такой шаблон, чтобы знать наверняка, что можно менять, а что - не стоит.
Но перед этим давайте рассмотрим минимум кода, который должен включать любой шаблон на основе Razor в Composite C1 версии 4.0 и выше.
Минимальный код для Razor-шаблона в Composite C1
Зная, что включает в себя минимальный код, вы сможете создавать Razor-шаблоны в любимом редакторе кода (например, Visual Studio), не только в админке Composite C1.
Чтобы Composite C1 признал .cshtml-файл в качестве полноценного шаблона страниц, этот файл должен:
- находится в папке ~/App_Data/PageTemplates
- содержать как минимум такой код:
@inherits RazorPageTemplate
@functions {
public override void Configure()
{
TemplateId = new Guid("bed582d3-d604-4858-a3a7-5b01d39d11e1");
TemplateTitle = "My First Razor Template";
}
Placeholder(Id = "content", Title = "Content", IsDefault = true)]
public XhtmlDocument Content { get; set; }
}
<!DOCTYPE html>
<html>
<head></head>
<body>
@Markup(Content)
</body>
</html>
@functions {
public override void Configure()
{
TemplateId = new Guid("bed582d3-d604-4858-a3a7-5b01d39d11e1");
TemplateTitle = "My First Razor Template";
}
Placeholder(Id = "content", Title = "Content", IsDefault = true)]
public XhtmlDocument Content { get; set; }
}
<!DOCTYPE html>
<html>
<head></head>
<body>
@Markup(Content)
</body>
</html>
Рассмотрим этот код.
Любой шаблон в Composite C1 имеет:
- идентификатор
- название
- "заглушку" (заполнитель) для контента (редактируемого в редакторе страниц в разделе "Контент")
- В переопределяемом методе Configure присваиваются значения идентификатора в свойстве TemplateId и названия в свойстве TemplateTitle.
- Для создания "заглушки" - а их может быть несколько, но минимум одна - нужно:
- Объявить свойство типа XhtmlDocument.
- Воспользоваться атрибутом Placeholder для этого свойства.
- С помощью этого атрибута нужно задать идентификатор (Id) и название "заглушки" (Title) и указать является ли она выбранной по умолчанию (IsDefault).
- С помощью вспомогательного метода Markup который обрабатывает содержимое "заглушки", нужно добавить последнюю куда нужно в HTML-коде, передавая ее как свойство в качестве входного параметра.
Кроме указанных выше моментов нужно также дать директиву наследовать этот шаблон от RazorPageTemplate. Полное имя Composite.AspNet.Razor.RazorPageTemplate писать не нужно, так как пространство имен уже прописано в ~/App_Data/PageTemplates/web.config.
Остальная часть кода должна быть понятно. Переопределение метода Configure и объявление свойства, служащего "заглушкой" для контента, помещены в @functions {}. На выходе мы получаем HTML5-документ благодаря директиве <!DOCTYPE html> и далее уже идет HTML-код, с Razor-синтаксисом.
Теперь давайте рассмотрим, что по умолчанию содержится в шаблоне, создаваемом в админке Composite C1.
Кроме элементов перечисленных выше в качестве минимального кода, здесь имеются такие особенности:
Далее: "Создание Razor-шаблонов для Composite C1 в Visual Studio"
(Написано для Composite C1 версии 4.0)
Теперь давайте рассмотрим, что по умолчанию содержится в шаблоне, создаваемом в админке Composite C1.
Код Razor-шаблона по умолчанию
@inherits RazorPageTemplate
@functions {
public override void Configure()
{
TemplateId = new Guid("e4524668-ed50-4b7e-bf8f-be99528029ea");
TemplateTitle = "My Razor Template";
// Layout = "MasterLayout.cshtml";
}
[Placeholder(Id="content", Title="Content", IsDefault=true)]
public XhtmlDocument Content { get; set; }
[Placeholder(Id="bottom", Title="Bottom")]
public XhtmlDocument Bottom { get; set; }
}
<!DOCTYPE html>
<html lang="@Lang" xmlns="http://www.w3.org/1999/xhtml" xmlns:f="http://www.composite.net/ns/function/1.0" xmlns:lang="http://www.composite.net/ns/localization/1.0" xmlns:asp="http://www.composite.net/ns/asp.net/controls">
<head>
<title>@CurrentPageNode.Title</title>
@if (!string.IsNullOrEmpty(CurrentPageNode.Description)) {
<meta name="description" content="@CurrentPageNode.Description" />
}
<f:function name="Composite.Web.Html.Template.CommonMetaTags" />
<link rel="stylesheet" type="text/css" href="~/Frontend/Styles/VisualEditor.common.css" />
</head>
<body>
<h1>@CurrentPageNode.Title</h1>
<h2>@CurrentPageNode.Description</h2>
<div>
@Markup(Content)
</div>
<h2>Bottom Placeholder</h2>
<div>
@Markup(Bottom)
</div>
</body>
</html>
@functions {
public override void Configure()
{
TemplateId = new Guid("e4524668-ed50-4b7e-bf8f-be99528029ea");
TemplateTitle = "My Razor Template";
// Layout = "MasterLayout.cshtml";
}
[Placeholder(Id="content", Title="Content", IsDefault=true)]
public XhtmlDocument Content { get; set; }
[Placeholder(Id="bottom", Title="Bottom")]
public XhtmlDocument Bottom { get; set; }
}
<!DOCTYPE html>
<html lang="@Lang" xmlns="http://www.w3.org/1999/xhtml" xmlns:f="http://www.composite.net/ns/function/1.0" xmlns:lang="http://www.composite.net/ns/localization/1.0" xmlns:asp="http://www.composite.net/ns/asp.net/controls">
<head>
<title>@CurrentPageNode.Title</title>
@if (!string.IsNullOrEmpty(CurrentPageNode.Description)) {
<meta name="description" content="@CurrentPageNode.Description" />
}
<f:function name="Composite.Web.Html.Template.CommonMetaTags" />
<link rel="stylesheet" type="text/css" href="~/Frontend/Styles/VisualEditor.common.css" />
</head>
<body>
<h1>@CurrentPageNode.Title</h1>
<h2>@CurrentPageNode.Description</h2>
<div>
@Markup(Content)
</div>
<h2>Bottom Placeholder</h2>
<div>
@Markup(Bottom)
</div>
</body>
</html>
Кроме элементов перечисленных выше в качестве минимального кода, здесь имеются такие особенности:
- Объявлены два заполнителя ("заглушки") для контента: Content и Bottom.
- В элементе <html/> указаны пространства имен для XML-которые используются или могут использоваться в шаблоне.
- В <head/> добавлены:
- название страницы - с помощью @CurrentPageNode.Title
- если есть описание у страницы (заполнено поле "Описание" в редакторе страниц), то оно будет добавлено в качестве meta-описания - с помощью @CurrentPageNode.Description
- Также с помощью XML-кода функции Composite.Web.Html.Template.CommonMetaTags добавляются несколько дополнительных мета-тега
- Добавлена ссылка на список стилей - стандартно по-XHTMLовски
- В <body/> кроме внедрения и обработки двух "заглушек" для контента с помощью вспомогательного метода Markup, еще добавлены:
- название страницы - с помощью того же самого @CurrentPageNode.Title, и
- описание - с помощью того же @CurrentPageNode.Description
Далее: "Создание Razor-шаблонов для Composite C1 в Visual Studio"
(Написано для Composite C1 версии 4.0)
Комментариев нет:
Отправить комментарий