вторник, 22 октября 2013 г.

Razor-шаблон по умолчанию в Composite C1

В прошлом сообщении мы рассмотрели создание Razor-шаблона в административной консоли 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>

Рассмотрим этот код.

Любой шаблон в Composite C1 имеет:
  • идентификатор
  • название
  • "заглушку" (заполнитель) для контента (редактируемого в редакторе страниц в разделе "Контент")
В Razor-шаблоне все это реализуется так:
  1. В переопределяемом методе Configure присваиваются значения идентификатора в свойстве TemplateId и названия в свойстве TemplateTitle.
  2. Для создания "заглушки" - а их может быть несколько, но минимум одна - нужно:
    1. Объявить свойство типа XhtmlDocument.
    2. Воспользоваться атрибутом Placeholder для этого свойства.
    3. С помощью этого атрибута нужно задать идентификатор (Id) и название "заглушки" (Title) и указать является ли она выбранной по умолчанию (IsDefault).
    4. С помощью вспомогательного метода Markup который обрабатывает содержимое "заглушки", нужно добавить последнюю куда нужно в HTML-коде, передавая ее как свойство в качестве входного параметра.
Кроме указанных выше моментов нужно также дать директиву наследовать этот шаблон от RazorPageTemplate. Полное имя Composite.AspNet.Razor.RazorPageTemplate писать не нужно, так как пространство имен уже прописано в ~/App_Data/PageTemplates/web.config.

Остальная часть кода должна быть понятно. Переопределение метода Configure и объявление свойства, служащего "заглушкой" для контента, помещены в @functions {}. На выходе мы получаем HTML5-документ благодаря директиве <!DOCTYPE html> и далее уже идет HTML-код, с Razor-синтаксисом.

Теперь давайте рассмотрим, что по умолчанию содержится в шаблоне, создаваемом в админке 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>

Кроме элементов перечисленных выше в качестве минимального кода, здесь имеются такие особенности:
  • Объявлены два заполнителя ("заглушки") для контента: 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)

Комментариев нет:

Отправить комментарий