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

Вкладки с помощью Boostrap в Composite C1 CMS

В прошлом сообщении мы начали создавать что-то вроде Bootstrap CMS, то есть систему управления контентом сайта с поддержкой Bootstrap, используя Composite C1 - бесплатную .NET-систему с открытым исходным кодом - в качестве платформы.

В нашем примере сам Bootstrap (и все что ему нужно) мы получаем из CDN'а, поэтому никаких файлов, с ним связанных, мы в нашу CMS не устанавливаем и не копируем.

Для использования Bootstrap'а мы создали шаблон страниц с использованием Razor-синтаксиса. А в этом сообщении мы все немного улучшим. То, что мы сделаем, понадобится нам для следующего сообщения, в котором мы уже будем использовать локальные файлы Bootstrap'а.

Что именно мы будем улучшать?

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

Для того чтобы при создании других шаблонов - а ведь мы не ограничимся одним шаблоном, правда? - нам не нужно было бы подключать поддержку Bootstrap в каждом из них, мы вынесем всю эту повторяющуюся информацию "за скобки". Тем, кто знаком с Razor'ом, тот наверняка знает, что "за скобками" - это значит в "главном макете" (Master Layout).

Итак, как вы помните у нас получился такой шаблон:

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

Вынесем в Master Layout мы, в первую очередь, то, что мы подгружаем из CDN'ов.

Ну, и гулять так гулять, туда же мы вынесем еще часть кода / разметки, которые у нас имеется в шаблоне и которые, скорее всего, будут повторяться от шаблона к шаблону. (Это главным образом то, что содержится у нас в <head/>.)

Сам файл Master Layout должен находится в папке, где хранятся или будут хранится шаблоны страниц сайта - а это у нас такой путь: ~/App_Data/PageTemplates.

Так как он используется шаблонами, но сам не является шаблоном, то создавать его в разделе "Макет" не нужно. Однако все файлы cshtml, которые находятся по указанному выше пути, но не включают в себя признаки Razor-шаблона, в админке становятся доступными в разделе "Макет", в папке "Общий код" (Shared Code).

Поэтому создадим его в файловой системе сайта, а редактировать уже его можно будет из раздела "Макет". А добавлять файлы в файловую систему в Composite C1 лучше всего из раздела "Система".

Создание начального файла главного макета (Master Layout)

Итак, в разделе "Система":

Раскройте папки по такому пути /App_Data/PageTemplates
Добавьте новый файл.
Назовите его MasterLayout.cshtml
Нажмите ОК, чтобы сохранить его.

Добавление файла cshtml на сайт на Composite C1 CMS

Вот мы и создали пустой файл Razor-страницы.

Добавление минимального кода в главный макет (Master Layout)

Теперь перейдите в раздел "Макет" и все манипуляции с этим файлом и шаблонами осуществляйте здесь.

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

@inherits CompositeC1WebPage
<!DOCTYPE html>
<html >
<head>
<title></title>
</head>
<body>
</body>
</html>
Сохраните ваши изменения.

Редактирование главного макета для Razor-шаблона в Composite C1 CMS

Перенесение повторяющегося кода из шаблона в главный макет (Master Layout)

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

Итак, переместите следующее содержимое элементов <head/> и <body/> из шаблона в главный макет, чтобы в главном макете получилось такое:

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

@RenderBody()

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

Красным цветом я выделил то, что относится к непосредственно Bootstrap, синим - то, что желательно добавить (и для Bootstrap'a и для Composite C1'а), чтобы все работало еще лучше. Это:

и атрибуты в <html/>,
и переменная для <title/> чтобы для заголовка бралось значение заголовка страницы, которую вы создадите на основе шаблона,
и описание, которое будет добавляться как мета-тег, только если у страницы будет описание,
и еще несколько мета-тегов,
и стили визуального редактора

Об этом я писать сейчас не буду. Сосредоточимся на главном.

А главное у нас то, что после создание главного макета, его нужно подключить в шаблон.

Обратите кстати внимание на Razor-овское @RenderBody() . Именно в этом месте будет добавляться содержимое шаблона, которое будет использовать этот главный макет.

Подключение главного макета (Master Layout) в шаблон страниц

И последний важный шаг. Вернем все что мы забрали из шаблона (и даже больше! :) ) с помощью подключения главного макета. Делается это в методе Configure в переменной Layout, которой присваивается название файла главного макета. В нашем случае - это MasterLayout.cshtml:

public override void Configure()
{
TemplateId = new Guid("55b43599-fc81-4c9b-94bf-9095ad400a6b");
TemplateTitle = "MyBootstrapTemplate";
Layout = "MasterLayout.cshtml";
}

И в итоге наш шаблон с поддержкой Bootstrap'a будет выглядеть вот так:

Обратите внимание, что он стал более компактным и менее перегруженным. В принципе если те части этого шаблона, в которых используются фрагменты шаблонов, не будут меняться от шаблона к шаблону, то имеет смысл их вынести в главный макет тоже. Решайте сами.

А теперь вы можете создать еще несколько шаблонов, точно также подключив главный макет. В этих шаблонах можно главным образом сосредоточится на макете грида Bootstrap'а, добавив новые ряды и колонки - в зависимости от потребностей.

Ну, и начните создавать страницы, используя стили и компоненты Bootstrap'а.

Bootstrap-компоненты в визуальном редакторе Composite C1 CMS

Да, кстати я в самом макете грида использовал "фиксированный" контейнер (.container) и колонки ориентировал на использование на экранах обычных ПК (.col-md-, можно еще .col-lg-). Для мобильных устройств вы можете использовать соответствующие классы колонок (.col-xs-, .col-sm-). При использовании "фиксированного" грида размеры его определены специфически для каждого типа устройств:

для смартфонов - нет (определяется автоматически)
для планшетов - 750 пикселей
для обычных дисплеев ПК - 970 пикселей
для больших экранов - 1170 пикселей

Вместо фиксированного контейнера можно использовать "текучий" контейнер (.fluid-container), который будет "растекаться" на весь экран.

Но это я уже стал углубляться в нюансы самого Bootstrap'а. О них вы можете почитать в его справке.

А в следующем сообщении воспользуемся Bootstrap'ом установленным на самом сайте, вместо того, чтобы подключать его из CDN'а.

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

C1 CMS по-русски

Страницы

пятница, 10 октября 2014 г.