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

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

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

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

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

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

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

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

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




Установка пакета расширения 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

Скачивание разных вариантов Bootstrap

Я предлагаю скачать исходники (Source code), так как:
  • Во-первых, если вы хотите ограничится дистрибутивом, то он все равно входит в состав этого набора.
  • Во-вторых, я предлагаю не ограничиваться дистрибутивом. Мы же хотим не просто Bootstrap, а возможность кастомизировать его, т.е., например, изменить цветовую гамму и т.п. Для этого необходимо редактирование исходных LESS файлов, из которых потом собирается bootstrap.css, или уже из последнего делается bootstrap.min.css (минимизированый).
Итак:
  1. Скачайте исходники Download source.
  2. Распакуйте содержимое.
Вникать в состав архива не будем. Я лишь скажу, что:
  • сам дистрибутив находится в папке /dist/
  • а нужные нам LESS файлы в папке /less/


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


Теперь на вашем сайте создайте папку для Бутстрапа и скопируйте туда все, что распаковали. Лучше всего это сделать, используя FTP-клиент, если вы работаете с удаленным сайтом.
  1. В папке /Frontend сайта создайте папку Bootstrap.
  2. Загрузите содержимое распакованного архива исходников в эту папку.
(Можно конечно и через админку - в разделе "Система" или в разделе "Макет" создать папку по указанному выше пути и загрузить файлы в нее, создавая нужные подпапки. Но это будет долго и неприятно.

Теперь обратите внимание, что нам понадобятся такие файлы в дальнейшем:
  • bootstrap.less
  • bootstrap.min.js
Если вы установили Бутстрап по указанному выше пути, то относительный путь к этим файлам будет такой
  • ~/Frontend/Bootstrap/less/bootstrap.less
  • ~/Frontend/Bootstrap/dist/js/bootstrap.min.js
Запомните эти пути. Мы их будем использовать дальше.


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


Как я и предлагал, мы создадим еще один макет, но ссылки на бустраповские файлы, необходимые для его корректной работы мы проставим локальные.
  1. В разделе "Система" раскройте папки /App_Data/PageTemplates
  2. Добавьте новый файл, назвав его MasterLayout2.cshtml (прозаично, согласен, но вы можете придумать более поэтичное название)
  3. Нажмите ОК, чтобы сохранить его.
Теперь:
  1. В разделе "Макет", раскройте папки "Шаблоны страниц" / "Общий код".
  2. Откройте на редактирование файл MasterLayout2.cshtml
  3. Добавьте в него следующий код:

    @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’а^

<link rel="stylesheet" href="~/Frontend/Bootstrap/less/bootstrap.less"/>
...
<script src="~/Frontend/Bootstrap/dist/js/bootstrap.min.js"></script>


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


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

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

Зато теперь вы получаете доступ к 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.)

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

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