Создание шаблонов на основе Twitter Bootstrap

(Эта статья устарела. Более новая информация: Composite C1 CMS + Bootstrap = Bootstrap CMS)

Если вы не знаете, что такое Twitter Bootstrap, то ознакомьтесь с информацией на неофициальном сайте на русском или официальном на английском.

В двух словах, это набор настраиваемого "инструментария" (HTML/CSS/JavaScript) для быстрого создания сайтов и веб-приложений.

Он идеально подходит для создания шаблонов сайтов для Composite C1 CMS и будет использоваться официально для создание новых стартовых сайтов.

Представляю вашему вниманию краткое руководство по созданию сайта на основе Twitter Bootstrap в Composite C1 CMS по мотивам сообщения Say Hello to Twitter Bootstrap в официальном блоге. (Для более подробной информации читайте оригинал сообщения.)

Подготовка сайта

Установите Composite C1 CMS. Самый простой способ - из веб-галереи в WebMatrix.
При прохождении мастера начальной загрузки, выберите шаблон сайта Bare Bones.

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

В разделе "Макет", добавьте тип страниц, назвав его "Content page".
Там же, добавьте шаблон страниц, назвав его "Bootstrap".

(Если вы используете версию 4.0 или выше - при создании шаблона выберите тип "XML Template".)

Поддержка .LESS

В разделе "Система", установите пакет Composite.Web.Config.Html5MimeTypes версии 1.0.1 (или выше)

Этот пакет "научит" веб-сервер отдавать файлы .LESS, которые по умолчанию не поддерживаются.

Обратите внимание, что вам не нужно устанавливать другой пакет Composite.Web.Css.Less, только указанный выше. Если пакет Composite.Web.Css.Less уже был установлен, удалите его.

Создание сайта / главной страницы

В разделе "Контент", выберите "Веб-сайты".
Нажмите "Добавить веб-сайт" на панели кнопок, назвав его "Мой сайт".
В открывшемся редакторе странице на вкладке Контент, добавьте какой-нибудь заголовок и текст. Вы можете воспользоваться любым генератором lorem ipsum текстов (напр., http://baconipsum.com/ со вкусом бекона :))
Сохраните и опубликуйте страницу.

(На вкладке "Настройки" страницы вы можете удалить значение в поле "Название для URL" - но только для одного сайта.)

Создание шаблона Twitter Bootstrap

Откройте сайт http://www.initializr.com/
На шаге "1 – Pre-configuration", выберите "Bootstrap".
На шаге "2 – Fine tuning", оставьте все значения по умолчанию. Но простоты ради, можете отключить все опции, кроме "Responsive Bootstrap 2.0.4" и "LESS".
Нажмите "Download it!".

Вы закачаете ZIP-файл (напр., initializr-less-verekia-3.0.zip)

Копирование шаблона на сайт

Распакуйте ZIP-файл.
Скопируйте все папки из архива (img, js, less) в папку ~/Frontend вашего сайта.

Адаптация шаблона Twitter Bootstrap для Composite C1 CMS

Вы можете пропустить этот шаг и воспользоваться готовым содержимым шаблона для Composite C1 CMS.

Если же вы создали в предыдущих шагах шаблон с другими настройками, вам нужно его адаптировать. В двух словах, вам нужно превратить HTML-код в валидный XML-код, а также добавить XML-элементы, используемые Composite C1 CMS.

Для этого измените содержимое файла index.html из распакованного ZIP-архива так:

Используйте закрытые одиночные теги: <hr> --> <hr />, <meta charset="utf-8"> --> <meta charset="utf-8" />
Добавьте в корневой элемент <html /> объявление таких пространств имен: <html xmlns="http://www.w3.org/1999/xhtml" xmlns:f="http://www.composite.net/ns/function/1.0" xmlns:rendering="http://www.composite.net/ns/rendering/1.0" />
Используйте объявление HTML5 как <!DOCTYPE html>
Замените все относительные пути в атрибутах src and href на абсолютные: href="less/style.less" to href="~/Frontend/less/style.less"
Добавьте хотя бы один заполнитель контента: <rendering:placeholder id="content" title="Content" default="true" />

Создание шаблона в Composite C1 CMS

Шаблон в Composite C1 CMS вы уже создали и скопировали нужные файлы из шаблона Twitter Bootstrap. Теперь замените содержимое шаблона в Composite C1 CMS на содержимое адаптированного шаблона Twitter Bootstrap.

В разделе "Макет", откройте шаблон Bootstrap на редактирование.
Удалите все его содержимое.
Скопируйте XML-код указанный ниже или свой, адаптированный в предыдущем шаге.
Сохраните шаблон.
Откройте ваш сайт в браузере и посмотрите как теперь выглядит страница.

Готовый адаптированный XML-код для шаблона в Composite C1 CMS:

<html class="no-js" xmlns="http://www.w3.org/1999/xhtml" xmlns:f="http://www.composite.net/ns/function/1.0" xmlns:rendering="http://www.composite.net/ns/rendering/1.0">
<f:function name="Composite.Web.Html.Template.LangAttribute" />
<head>
<title>
<rendering:page.title />
</title>
<f:function name="Composite.Web.Html.Template.CommonMetaTags" />
<rendering:page.metatag.description />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta name="viewport" content="width=device-width" />
<link rel="stylesheet/less" href="~/Frontend/less/style.less" />
<script src="~/Frontend/js/libs/less-1.3.0.min.js"></script>

<script src="~/Frontend/js/libs/modernizr-2.5.3.min.js"></script>
</head>
<body>
<div class="navbar navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
<a class="brand" href="#">Project name</a>
<div class="nav-collapse">
<ul class="nav">
<li class="active">
<a href="#">Home</a>
</li>
<li>
<a href="#about">About</a>
</li>
<li>
<a href="#contact">Contact</a>
</li>
</ul>
</div>

</div>
</div>
</div>
<div class="container">

<div class="hero-unit">
<rendering:placeholder id="content" title="Content" default="true" />
<p>
<a class="btn btn-primary btn-large">Learn more »</a>
</p>
</div>

<div class="row">
<div class="span4">
<h2>Heading</h2>
<p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui.</p>
<p>
<a class="btn" href="#">View details »</a>
</p>
</div>
<div class="span4">
<h2>Heading</h2>
<p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui.</p>
<p>
<a class="btn" href="#">View details »</a>
</p>
</div>
<div class="span4">
<h2>Heading</h2>
<p>Donec sed odio dui. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Vestibulum id ligula porta felis euismod semper. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p>
<p>
<a class="btn" href="#">View details »</a>
</p>
</div>
</div>
<hr />
<footer>
<p>© Company 2012</p>
</footer>
</div>

<script src="~/Frontend/js/libs/bootstrap/bootstrap.min.js"></script>
<script src="~/Frontend/js/script.js"></script>
</body>
</html>

Далее

Можно видоизменить получившийся шаблон, заменив значения в файле ~/Frontend/less/bootstrap/variables.less (О LESS используемом в Bootstrap читайте http://bootstrap.veliovgroup.com/less.php (рус.) или http://twitter.github.com/bootstrap/less.html (англ.)ю)
С http://bootswatch.com/ можно загрузить другие темы (вам нужно будет заменить ~/Frontend/less/bootstrap/variables.less, поместить второй .less файл в папку ~/Frontend/less/ и в variables.less включить использование второго .less файла).
На http://www.boottheme.com/ можно создать произвольный шаблон. (Полученный LESS-код нужно будет скопировать в свой variables.less на сайте.)

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

C1 CMS по-русски

Страницы

вторник, 21 августа 2012 г.