пятница, 10 октября 2014 г.

Bootstrap CMS (Часть 2-ая)

Вкладки с помощью Boostrap в Composite C1 CMS
В прошлом сообщении мы начали создавать что-то вроде Bootstrap CMS, то есть систему управления контентом сайта с поддержкой Bootstrap, используя Composite C1 - бесплатную .NET-систему с открытым исходным кодом - в качестве платформы.

В нашем примере сам Bootstrap (и все что ему нужно) мы получаем из CDN'а, поэтому никаких файлов, с ним связанных, мы в нашу CMS не устанавливаем и не копируем.

Для использования Bootstrap'а мы создали шаблон страниц с использованием Razor-синтаксиса. А в этом сообщении мы все немного улучшим. То, что мы сделаем, понадобится нам для следующего сообщения, в котором мы уже будем использовать локальные файлы Bootstrap'а.

Что именно мы будем улучшать?

Для того чтобы при создании других шаблонов - а ведь мы не ограничимся одним шаблоном, правда? - нам не нужно было бы подключать поддержку Bootstrap в каждом из них, мы вынесем всю эту повторяющуюся информацию "за скобки". Тем, кто знаком с Razor'ом, тот наверняка знает, что "за скобками" - это значит в "главном макете" (Master Layout).

Итак, как вы помните у нас получился такой шаблон:

@inherits RazorPageTemplate

@functions {

  public override void Configure()
  {
    TemplateId = new Guid("55b43599-fc81-4c9b-94bf-9095ad400a6b");
    TemplateTitle = "MyBootstrapTemplate";
  }

  [Placeholder(Id = "content", Title = "Content", IsDefault = true)]
  public XhtmlDocument Content { 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" />

      <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" />
      <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css" />
  </head>

  <body>

    <div class="container">
      <div class="row">
        <div class="col-md-12" id="header">
          @PageTemplateFeature("Header")
        </div>
      </div>
      <div class="row">
        <div class="col-md-4" id="nav">
          @PageTemplateFeature("Nav")
        </div>
        <div class="col-md-8" id="main">
          @Markup(Content)
        </div>
      </div>
      <div class="row">
        <div class="col-md-12" id="footer">
          @PageTemplateFeature("Footer")
        </div>
      </div>
    </div>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>

  </body>
</html>

Вынесем в Master Layout мы, в первую очередь, то, что мы подгружаем из CDN'ов.

Ну, и гулять так гулять, туда же мы вынесем еще часть кода / разметки, которые у нас имеется в шаблоне и которые, скорее всего, будут повторяться от шаблона к шаблону. (Это главным образом то, что содержится у нас в <head/>.)

Сам файл Master Layout должен находится в папке, где хранятся или будут хранится шаблоны страниц сайта - а это у нас такой путь: ~/App_Data/PageTemplates.

Так как он используется шаблонами, но сам не является шаблоном, то создавать его в разделе "Макет" не нужно. Однако все файлы cshtml, которые находятся по указанному выше пути, но не включают в себя признаки Razor-шаблона, в админке становятся доступными в разделе "Макет", в папке "Общий код" (Shared Code).

Поэтому создадим его в файловой системе сайта, а редактировать уже его можно будет из раздела "Макет". А добавлять файлы в файловую систему в Composite C1 лучше всего из раздела "Система".


Создание начального файла главного макета (Master Layout)


Итак, в разделе "Система":
  1. Раскройте папки по такому пути /App_Data/PageTemplates
  2. Добавьте новый файл.
  3. Назовите его MasterLayout.cshtml
  4. Нажмите ОК, чтобы сохранить его.
Добавление файла cshtml на сайт на Composite C1 CMS

Вот мы и создали пустой файл Razor-страницы.


Добавление минимального кода в главный макет (Master Layout)


Теперь перейдите в раздел "Макет" и все манипуляции с этим файлом и шаблонами осуществляйте здесь.
  1. В разделе "Макет", раскройте папку "Шаблоны страниц" и далее "Общий код".
  2. Откройте на редактирование файл MasterLayout.cshtml
  3. Добавьте в него следующий код:

    @inherits CompositeC1WebPage
    <!DOCTYPE html>
    <html >
      <head>
        <title></title>
      </head>
      <body>
      </body>
    </html>
  4. Сохраните ваши изменения.
Редактирование главного макета для Razor-шаблона в Composite C1 CMS


Перенесение повторяющегося кода из шаблона в главный макет (Master Layout)


А теперь мы сделаем то, ради чего мы это все затеяли - перенесем код (который мы будем использовать в других шаблонах) из нашего шаблона в главный макет.

Итак, переместите следующее содержимое элементов <head/> и <body/> из шаблона в главный макет, чтобы в главном макете получилось такое:

@inherits CompositeC1WebPage

<!DOCTYPE html>
<html  xmlns="http://www.w3.org/1999/xhtml" 
 xmlns:f="http://www.composite.net/ns/function/1.0" class="no-js" lang="@Lang">
<head>
  <title>@CurrentPageNode.Title</title>

  @if (!string.IsNullOrEmpty(CurrentPageNode.Description))
  {
    <meta name="description" content="@CurrentPageNode.Description" />
  }

  <meta charset="utf-8"/>
  <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
  <meta name="viewport" content="width=device-width, initial-scale=1"/>
  <f:function name="Composite.Web.Html.Template.CommonMetaTags" />

  <link rel="stylesheet" type="text/css" href="~/Frontend/Styles/VisualEditor.common.css" />

  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css"/>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css"/>
</head>
<body>

    @RenderBody()

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
</body>
</html>

Красным цветом я выделил то, что относится к непосредственно Bootstrap, синим - то, что желательно добавить (и для Bootstrap'a и для Composite C1'а), чтобы все работало еще лучше. Это:
  • и атрибуты в <html/>,
  • и переменная для <title/> чтобы для заголовка бралось значение заголовка страницы, которую вы создадите на основе шаблона,
  • и описание, которое будет добавляться как мета-тег, только если у страницы будет описание,
  • и еще несколько мета-тегов,
  • и стили визуального редактора
Об этом я писать сейчас не буду. Сосредоточимся на главном.

А главное у нас то, что после создание главного макета, его нужно подключить в шаблон.

Обратите кстати внимание на Razor-овское @RenderBody() . Именно в этом месте будет добавляться содержимое шаблона, которое будет использовать этот главный макет.


Подключение главного макета (Master Layout) в шаблон страниц


И последний важный шаг. Вернем все что мы забрали из шаблона (и даже больше! :) ) с помощью подключения главного макета. Делается это в методе Configure в переменной Layout, которой присваивается название файла главного макета. В нашем случае - это MasterLayout.cshtml:

public override void Configure()
{
  TemplateId = new Guid("55b43599-fc81-4c9b-94bf-9095ad400a6b");
  TemplateTitle = "MyBootstrapTemplate";
  Layout = "MasterLayout.cshtml";
}

И в итоге наш шаблон с поддержкой Bootstrap'a будет выглядеть вот так:

@inherits RazorPageTemplate

@functions {

  public override void Configure()
  {
    TemplateId = new Guid("55b43599-fc81-4c9b-94bf-9095ad400a6b");
    TemplateTitle = "MyBootstrapTemplate";
    Layout = "MasterLayout.cshtml";
  }

  [Placeholder(Id = "content", Title = "Content", IsDefault = true)]
  public XhtmlDocument Content { get; set; }
}

<html 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></head>

  <body>

    <div class="container">
      <div class="row">
        <div class="col-md-12" id="header">
          @PageTemplateFeature("Header")
        </div>
      </div>
      <div class="row">
        <div class="col-md-4" id="nav">
          @PageTemplateFeature("Nav")
        </div>
        <div class="col-md-8" id="main">
          @Markup(Content)
        </div>
      </div>
      <div class="row">
        <div class="col-md-12" id="footer">
          @PageTemplateFeature("Footer")
        </div>
      </div>
    </div>

  </body>
</html>

Обратите внимание, что он стал более компактным и менее перегруженным. В принципе если те части этого шаблона, в которых используются фрагменты шаблонов, не будут меняться от шаблона к шаблону, то имеет смысл их вынести в главный макет тоже. Решайте сами.

А теперь вы можете создать еще несколько шаблонов, точно также подключив главный макет. В этих шаблонах можно главным образом сосредоточится на макете грида Bootstrap'а, добавив новые ряды и колонки - в зависимости от потребностей.

Ну, и начните создавать страницы, используя стили и компоненты Bootstrap'а.

Bootstrap-компоненты в визуальном редакторе Composite C1 CMS

Да, кстати я в самом макете грида использовал "фиксированный" контейнер (.container) и колонки ориентировал на использование на экранах обычных ПК (.col-md-, можно еще .col-lg-). Для мобильных устройств вы можете использовать соответствующие классы колонок (.col-xs-, .col-sm-). При использовании "фиксированного" грида размеры его определены специфически для каждого типа устройств:
  • для смартфонов - нет (определяется автоматически)
  • для планшетов - 750 пикселей
  • для обычных дисплеев ПК - 970 пикселей
  • для больших экранов - 1170 пикселей
Вместо фиксированного контейнера можно использовать "текучий" контейнер (.fluid-container), который будет "растекаться" на весь экран.

Но это я уже стал углубляться в нюансы самого Bootstrap'а. О них вы можете почитать в его справке.

А в следующем сообщении воспользуемся Bootstrap'ом установленным на самом сайте, вместо того, чтобы подключать его из CDN'а.

(Статья актуальна на момент написания для версии Composite C1 4.2 Update 1 и Bootstrap 3.2.0 + JQuery 1.11.1.)

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

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