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

Итак, мы воспользовались Composite C1 CMS и создали шаблон страниц, основанный на Boostrap.

Теперь мы можем создавать макеты страниц на основе “сетки” / “грида” Bootstrap, да и сами страницы и использовать стили и компоненты Bootstrap.

Мы даже упростили себе задачу. Теперь, создавая новый шаблон в системе (на основе Razor, в нашем случае) нам всего лишь нужно указать, что данный шаблон “наследуется” от главного макета (MasterLayout) - и весь Bootstrap будет к вашим услугам.

Но если вы помните, то необходимые для Bootstrap’а файлы мы загружаем из CDN. Одним из недостатков такого подхода является, то что всякие манипуляции с Bootstrap’ом невозможны. Файлы находятся не на вашем сайте - и изменить, скажем, главный цвет шрифта и сам шрифт (тип и размер) в этом случае не получится.

Для этого вам необходимо хранить файлы на вашем сайте и подключать именно их вместо CDN-овских. В них-то вы и сможете “поиграться” с переменными, которые как раз и задают внешний вид страниц на основе Bootstrap’а.

Читайте также:

Однако вместо того, чтобы вносить изменения в MasterLayout.cshtml, мы создадим его копию и изменения внесем в него. И таким образом у нас будет выбор для наших Bootstrap-овских шаблонов: использовать тот, который в CDN (ванильный) или наш, локальный (который скорее всего будет кастомизированным).

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

Установить на сайте расширение CSS LESS.
Скачать и...
... установить на сайт Bootstrap.
Создать еще один главный макет на Razor’е, в котором подключить локальный Bootstrap.
Проверить работу Boostrap’а, подключенного локально.
Профит! (да-да, это возможно)

Установка пакета расширения Less CSS

Так как мы будем работать с LESS файлами, нам нужно добавить поддержку этих файлов в Composite C1 CMS.

Для этого нужно установить пакет расширения Less CSS. Установить пакет вы можете стандартным способом:

Раздел "Система" / Пакеты / Доступные пакеты / Composite.Web / Composite.Web.Css.Less

После установки пакета вы теперь можете создавать свои собственные произвольные LESS-файлы и использовать их на сайте наравне с CSS.

Скачивание Boostrap'а

Итак, давайте загрузим и установим на сайт Bootstrap. В данном сообщении рассматривается версия 3.20 - текущая на данный момент.

Скачать его можно с официальной страницы. Там есть три варианта:

Bootstrap: готовый к употреблению дистрибутив - компилированный и минимизированый набор CSS, JS файлов и шрифты
Source code: исходники (JS и LESS файлы и др.), которые включают в себя и дистрибутив
Sass: и версия под SASS

Я предлагаю скачать исходники (Source code), так как:

Во-первых, если вы хотите ограничится дистрибутивом, то он все равно входит в состав этого набора.
Во-вторых, я предлагаю не ограничиваться дистрибутивом. Мы же хотим не просто Bootstrap, а возможность кастомизировать его, т.е., например, изменить цветовую гамму и т.п. Для этого необходимо редактирование исходных LESS файлов, из которых потом собирается bootstrap.css, или уже из последнего делается bootstrap.min.css (минимизированый).

Итак:

Скачайте исходники Download source.
Распакуйте содержимое.

Вникать в состав архива не будем. Я лишь скажу, что:

сам дистрибутив находится в папке /dist/
а нужные нам LESS файлы в папке /less/

Установка Boostrap'а на Composite C1 CMS

Теперь на вашем сайте создайте папку для Бутстрапа и скопируйте туда все, что распаковали. Лучше всего это сделать, используя FTP-клиент, если вы работаете с удаленным сайтом.

В папке /Frontend сайта создайте папку Bootstrap.
Загрузите содержимое распакованного архива исходников в эту папку.

(Можно конечно и через админку - в разделе "Система" или в разделе "Макет" создать папку по указанному выше пути и загрузить файлы в нее, создавая нужные подпапки. Но это будет долго и неприятно.

Теперь обратите внимание, что нам понадобятся такие файлы в дальнейшем:

bootstrap.less
bootstrap.min.js

Если вы установили Бутстрап по указанному выше пути, то относительный путь к этим файлам будет такой

~/Frontend/Bootstrap/less/bootstrap.less
~/Frontend/Bootstrap/dist/js/bootstrap.min.js

Запомните эти пути. Мы их будем использовать дальше.

Создание главного макета и подключение Bootstrap’а

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

В разделе "Система" раскройте папки /App_Data/PageTemplates
Добавьте новый файл, назвав его MasterLayout2.cshtml (прозаично, согласен, но вы можете придумать более поэтичное название)
Нажмите ОК, чтобы сохранить его.

Теперь:

В разделе "Макет", раскройте папки "Шаблоны страниц" / "Общий код".
Откройте на редактирование файл MasterLayout2.cshtml
Добавьте в него следующий код:

@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="~/Frontend/Bootstrap/less/bootstrap.less"/>
</head>
<body>
@RenderBody()
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
  <script src="~/Frontend/Bootstrap/dist/js/bootstrap.min.js"></script>
</body>
</html>

Обратите внимание, что мы подключили для работы Bootstrap’а^

Проверка работы Boostrap’а, подключенного локально.

Откройте Razor-шаблон, созданный ранее.
И замените значение переменной Layout на MasterLayout2.cshtml

public override void Configure()
{
TemplateId = new Guid("55b43599-fc81-4c9b-94bf-9095ad400a6b");
TemplateTitle = "MyBootstrapTemplate";
Layout = "MasterLayout2.cshtml";
}
Обновите страницу, созданную на основе этого шаблона, в браузере.

По логике - ничего не должно изменится.

Зато теперь вы получаете доступ к LESS-файлам Boostrap’а и можете редактировать его стили и LESS-переменные и т.п.

Редактировать их можно как и в админке: раздел "Макет" / Frontend / Bootstrap / less /, так и в любом другом удобном для вас редакторе.

Важно, что после изменения LESS-файлов нужно заставить систему пересоздать CSS файл из этих LESS файлов. Для этого либо удалите bootstrap.css, который находится в той же папке less, где и bootstrap.css, либо перезапустите сервер - и обновите страницу в браузере.

И все должно получится.

(Кстати, если вам нужна минификация стилей и т.п. обратите внимание на еще один пакет расширения, который о подробно рассмотрел в сообщении "Ускорение работы сайта с помощью минификации и объединения в Composite C1".)

Профит!

И тут перед нами открываются определенные возможности. Что мешает нам создать свой набор шаблонов страниц на основе Bootstrap’а, а затем экспортировать это в пакет расширения?

Ничего.

А что мешает нам создавать набор тем под определенный набор шаблонов на основе Bootstrap’а, а затем экспортировать это в пакет расширения?

Тоже ничего.

Ну, и так далее… :)

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

C1 CMS по-русски

Страницы

вторник, 14 октября 2014 г.