Сначала это были пробные попытки создать шаблон страницы с поддержкой устаревшей на данный момент версией 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 код / разметку, которые могут повторяться от одного шаблона к другому. (Мы это сделаем в другом сообщении.)Итак, план таков:
- Создать шаблон страницы в Composite C1.
- Добавить в шаблон необходимые ссылки для подключения Bootstrap'а из CDN'а.
- Добавить в шаблон простой макет страницы (верхний и нижний колонтитулы, панель навигации слева) с помощью "сетки" / "грида" (Grid) из Bootstrap'а.
- Добавить в шаблон минимум один заполнитель для контента (placeholder), чтобы пользователь мог редактировать страницу, созданную с помощью этого шаблона.
- (необязательно) Добавить фрагменты шаблона в сам шаблон для повторяющегося контента на страницах.
Создание шаблона страницы
Как я уже говорил, сначала мы создадим шаблон на основе Razor.
(В принципе шаги для двух других типов шаблонов, поддерживаемых в Composite C1 - Master Page и XML-шаблон, - будут аналогичны, поэтому я не буду их рассматривать.)
- В разделе "Макет" выберите папку "Шаблоны страниц" и нажмите кнопку "Добавить шаблон" на тулбаре.
- В визарде в списке "Тип шаблона" выберите Razor и нажмите "ОК".
- Далее:
- в поле "Название шаблона" укажите название шаблона.
- в списке "Копировать из" выберите пункт "(Новый шаблон)"
- Нажмите "ОК".
Подробнее: "Создание шаблонов страниц с помощью Razor"
Добавление ссылок в шаблон для поддержки 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" />
<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>
<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 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-шаблоне заполнитель добавляется в два шага:
- Сначала добавляется переменная с необходимым атрибутом в @functions {...}.
- А затем обработчик этой переменной где-то в элемент <body/>.
(Когда вы только создали шаблон - выше, у вас уже было два "заполнителя": Content и Aside с обработчиками. Но после удаления дефолтного содержимого <body/>, мы удалили обработчики. А для простоты этого примера нам хватит одного заполнителя.)
Итак:
- В @functions {} добавьте переменную Content для заполнителя (если она там еще не объявлена) и удалите другие переменные заполнителей (т. е. в нашем случае это Aside):
[Placeholder(Id = "content", Title = "Content", IsDefault = true)]
public XhtmlDocument Content { get; set; } - Добавьте между тегами <div class="col-md-8" id="main"> и </div> обработчик:
<div class="col-md-8" id="main">
@Markup(Content)
</div> - Сохраните ваши изменения в шаблоне.
Добавление в шаблон фрагментов для повторяющегося контента
Непосредственно в сам шаблон можно добавить такие "шаблонные" элементы, как изображение, логотип, поле для поиска, меню - в соответствующие области грида.
Но для удобства редактирования, а также в случае если вы будет использовать те же самые элементы и в других шаблонах (которые отличаются, например, макетом страницы), логичнее помещать такие элементы во фрагменты шаблона страниц.
А в сам шаблон добавить обработчики этих фрагментов.
Опять же простоты ради сами элементы мы добавлять не будем, а вот фрагменты и их обработчики - добавим.
Итак, добавляем сначала фрагменты. У нас и будет 3: назовем их Header (верхний колонтитул, Nav (навигация, [боковое] меню) и Footer (нижний колонтитул).
- В разделе "Макет", выберите папку "Фрагменты шаблонов" и нажмите кнопку "Добавить фрагмент шаблона" на тулбаре.
- В поле "Название фрагмента", укажите название для фрагмента шаблона: Header.
- В поле "Тип редактора", выберите "Визуальный редактор".
- Нажмите кнопку "Готово".
- Повторите шаги 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>
<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>
@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-коде страницы вы можете, например, использовать многочисленные стили Бутстрапа для ваших элементов. Экспериментируйте :)
Далее я бы хотел отталкиваясь от этого "вводного урока" усложнить пример:
- Сначала я бы хотел показать как можно воспользоваться Master Layout'ом для шаблонов - главным образом, чтобы собрать в нем все повторяющиеся в разных шаблонах элементы.
- А потом перейти от использования CDN к использованию локальных файлов Bootstrap'а. Ведь мы же не просто хотим использовать Bootstrap, и еще кастомизировать его под свои нужды, например, изменяя значения его многочисленных переменных.
Комментариев нет:
Отправить комментарий