понедельник, 6 октября 2014 г.

Composite C1 CMS + Bootstrap = Bootstrap CMS

Сайт Bootstrap
Теме Bootstrap'а я уже посвящал несколько сообщений. В разное время Composite C1 CMS по-разному интегрировала Bootstrap.

Сначала это были пробные попытки создать шаблон страницы с поддержкой устаревшей на данный момент версией Twitter Bootstrap'а. Затем уже стартовые сайты начали использовать Bootstrap (уже без Twitter), в частности, Open Cph, а теперь Venus.

Так как Bootstrap неплохо интегрируется в Composite C1, то можно даже утверждать, что Composite C1 - это Bootstrap CMS :) , или хотя бы, что Composite C1 - это CMS, дружественная Bootstrap.

Но главное то, что вы просто можете добавить Bootstrap на сайт Composite C1 и начать его использовать в шаблонах страниц с нуля, без каких-либо стартовых сайтов.

Понятно, что для этого вам нужно знать, собственно, Bootstrap, а также уметь создавать шаблоны страниц в Composite C1.

В этом сообщении я пойду самым простым путем.

Вы, наверняка знаете, что Bootstrap доступен из CDN. Поэтому в этом сообщении я рассмотрю именно этот вариант.

То есть, в данном случае вам не нужно будет закачивать, распаковывать и добавлять файлы Bootstrap'а на сайт Composite C1. Вам просто нужно будет добавить несколько ссылок в шаблон страницы, который мы и создадим сейчас.

Читайте также:
Для создания шаблона страницы я буду использовать Razor. Причем, простоты ради, в данном сообщении, мой шаблон будет самодостаточным. Я имею в виду, что я не буду выносить в Master Layout код / разметку, которые могут повторяться от одного шаблона к другому. (Мы это сделаем в другом сообщении.)

Итак, план таков:
  1. Создать шаблон страницы в Composite C1.
  2. Добавить в шаблон необходимые ссылки для подключения Bootstrap'а из CDN'а.
  3. Добавить в шаблон простой макет страницы (верхний и нижний колонтитулы, панель навигации слева) с помощью "сетки" / "грида" (Grid) из Bootstrap'а.
  4. Добавить в шаблон минимум один заполнитель для контента (placeholder), чтобы пользователь мог редактировать страницу, созданную с помощью этого шаблона.
  5. (необязательно) Добавить фрагменты шаблона в сам шаблон для повторяющегося контента на страницах.





Создание шаблона страницы


Как я уже говорил, сначала мы создадим шаблон на основе Razor.

(В принципе шаги для двух других типов шаблонов, поддерживаемых в Composite C1 - Master Page и XML-шаблон, - будут аналогичны, поэтому я не буду их рассматривать.)
  1. В разделе "Макет" выберите папку "Шаблоны страниц" и нажмите кнопку "Добавить шаблон" на тулбаре.
  2. В визарде в списке "Тип шаблона" выберите Razor и нажмите "ОК".
  3. Далее:
    1. в поле "Название шаблона" укажите название шаблона.
    2. в списке "Копировать из" выберите пункт "(Новый шаблон)"
  4. Нажмите "ОК".



Добавление ссылок в шаблон для поддержки Bootstrap


Итак, простоты ради мы не будем загружать файлы Бутстрапа и подключать их в новосозданный шаблон. Мы воспользуемся тем, что доступно через CDN.

Откройте шаблон - если он у вас не открыт и добавьте в <head/> (в конец) две ссылки на стили Bootstrap (минимизированные):

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

Теперь все что находится между <body> и </body> удалите. (Опять же я предлагаю удалить все для упрощения задачи. Вы можете оставить дефолтный код и использовать его на свое усмотрение - если вы понимаете, как он работает.)

А теперь перед закрывающим тегом </body> (т. е. в конце) добавьте ссылки на скрипты (тоже минимизированные):

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

Заметьте, что первым идет скрипт jQuery из гугловского CDN. Он необходим для работы определенных компонентов Бутстрапа.

Вот собственно и все. Вы создали шаблон и подключили в него Бутстрап. Если вы ориентируетесь и в Bootstrap и в шаблонах Composite C1, то дальше можете сами :). А также создавайте страницы по этому шаблону и используйте стили и компоненты Бутстрапа.

Я же предлагаю проделать еще следующие несколько шагов.


Создание макета страницы с помощью "грида" Boostrap


Bootstrap дает возможность создать макет страницы с помощью "грида". Я предлагаю ограничится простеньким макетом (верхний и нижний колонтитул, левая панель - для меню и основная часть).

Кроме того, для разметки мы воспользуемся стилями Бутстрапа только для обычных ПК - без поддержки мобильных устройств и т.п. Но вы, начитавшись справки по гриду Бутстрапа можете также добавить необходимые стили для поддержки правильного и приятного отображения страниц по этому шаблону на разных девайсах.

Для создания нужного нам макета добавьте в <body/>, но перед элементами скриптов (чтобы они были в конце), следующий XHTML-код:

<div class="container">
  <div class="row">
    <div class="col-md-12" id="header"></div>
  </div>
  <div class="row">
    <div class="col-md-4" id="nav"></div>
    <div class="col-md-8" id="main"></div>
  </div>
  <div class="row">
    <div class="col-md-12" id="footer"></div>
  </div>
</div>

Как видите в div-элемент класса "контейнер" (container) мы помещаем три элемента класса "ряд" (row), а в сами ряды помещаем элементы типа "столбец" (col...) указывая их размерность: 12 - на весь ряд, и 4+8 - для создания узкого и широкого столбцов в гриде (наши боковое меню и главная часть).

Но добавление грида - это еще не все. Это то, что необходимо было сделать со стороны Бутстрапа. А теперь упростим себе жизнь, добавив несколько элементов со стороны Composite C1.


Добавление в шаблон заполнителя для контента страницы


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

А вот основная часть - контент страницы будет каждый раз свой, уникальный. Поэтому в Composite C1 для выделения такой области в шаблоне используется т. н. "заполнитель" для контента (content placeholder).

Когда пользователь будет редактировать страницу в визуальном редакторе, он будет добавлять свой уникальный контент именно в эту область.

Поэтому логично было бы добавить такой заполнитель в нужное место в гриде, а именно в div-элемент c идентификатором main.

В Razor-шаблоне заполнитель добавляется в два шага:
  1. Сначала добавляется переменная с необходимым атрибутом в @functions {...}.
  2. А затем обработчик этой переменной где-то в элемент <body/>.
(Когда вы только создали шаблон - выше, у вас уже было два "заполнителя": Content и Aside с обработчиками. Но после удаления дефолтного содержимого <body/>, мы удалили обработчики. А для простоты этого примера нам хватит одного заполнителя.)

Итак: 
  1. В @functions {} добавьте переменную Content для заполнителя (если она там еще не объявлена) и удалите другие переменные заполнителей (т. е. в нашем случае это Aside):
    [Placeholder(Id = "content", Title = "Content", IsDefault = true)]
    public XhtmlDocument Content { get; set; }
  2. Добавьте между тегами <div class="col-md-8" id="main"> и </div> обработчик:
    <div class="col-md-8" id="main">
      @Markup(Content)
    </div>
  3. Сохраните ваши изменения в шаблоне.


Добавление в шаблон фрагментов для повторяющегося контента


Непосредственно в сам шаблон можно добавить такие "шаблонные" элементы, как изображение, логотип, поле для поиска, меню - в соответствующие области грида.

Но для удобства редактирования, а также в случае если вы будет использовать те же самые элементы и в других шаблонах (которые отличаются, например, макетом страницы), логичнее помещать такие элементы во фрагменты шаблона страниц.

А в сам шаблон добавить обработчики этих фрагментов.

Опять же простоты ради сами элементы мы добавлять не будем, а вот фрагменты и их обработчики - добавим.

Итак, добавляем сначала фрагменты. У нас и будет 3: назовем их Header (верхний колонтитул, Nav (навигация, [боковое] меню) и Footer (нижний колонтитул).
  1. В разделе "Макет", выберите папку "Фрагменты шаблонов" и нажмите кнопку "Добавить фрагмент шаблона" на тулбаре.
  2. В поле "Название фрагмента", укажите название для фрагмента шаблона: Header.
  3. В поле "Тип редактора", выберите "Визуальный редактор".
  4. Нажмите кнопку "Готово".
  5. Повторите шаги 1-4 для Nav и Footer.
Подробнее: "Фрагменты шаблонов: 2. Создание"

Если такие такие названия уже используйте, придумайте свои, но не забудьте использовать именно их вместо тех, которые предложил я.

А теперь в нашем шаблоне добавьте с помощью функции PageTemplateFeature обработку этих шаблонов -  в нужных областях грида:

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




Итоги


В итоге у вас должен получится примерно такой шаблон:

@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>

И вы, я надеюсь, теперь понимаете, зачем нужен тот или иной элемент, который мы в него добавили.

Далее вы можете добавить шаблонные элементы типа логотипа или меню в соответствующий фрагмент шаблона и, наконец, создать страницу на основе этого шаблона.

В XHTML-коде страницы вы можете, например, использовать многочисленные стили Бутстрапа для ваших элементов. Экспериментируйте :)

Далее я бы хотел отталкиваясь от этого "вводного урока" усложнить пример:
(Статья актуальна на момент написания для версии Composite C1 4.2 Update 1 и Bootstrap 3.2.0 + JQuery 1.11.1.)
Темы: ,

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

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

Подписаться на: Комментарии к сообщению (Atom)