Share via

Архитектура Orchard CMS. Основные понятия. Концепции компоновки (cont)

  • Article

Это продолжение второй части руководства “Как создать свой сайт с нуля с помощью Orchard CMS”. С первой частью руководства вы можете познакомиться здесь: начало и продолжение. Начало “Архитектура Orchard CMS. Основные понятия” можно найти и прочитать здесь.

Введение

Для того чтобы начать работать с Orchard CMS необходимо изучить базовые понятия, которые применяются в этой CMS для работы с содержимым. В этой части руководства мы познакомимся с элементами компоновки Orchard CMS, которые составляют архитектуру CMS.

Напомню, что автоматическая загрузка Orchard доступна из галереи приложений с помощью средства быстрого доступа к веб-инструментам Web Platform Installer (нажмите на эту ссылку, чтобы начать установку ).

Концепции компоновки Orchard CMS

Система управления контентом Orchard обладает богатыми возможностями по формированию и управлению компоновкой веб-страниц, расположению контента, оформлению внешнего вида (темы). При работе с компоновкой Orchard CMS оперирует набором концепций, которые важно знать и понимать.

Ниже представлен краткий обзор концепций, в последующих статьях им будет дан подробный обзор.

Темы оформления (Themes)

Для любой системы управления контентом важной частью является механизм настройки внешнего вида веб-страниц. Orchard CMS предлагает функционал тем оформления. Вместе с системой поставляется одна тема оформления (под названием The Theme Machine), но через панель управления можно получить доступ к онлайн-галереи и загрузить одну из тем, созданных сообществом разработчиков (рисунок 2.6).

clip_image002

Рис. 2.6. Галерея тем оформления Orchard CMS

В Orchard CMS тема оформления представлена комбинацией стилей CSS, изображений, файлов описывающих компоновку разметки, шаблонов и исходного кода. Тема оформления по умолчанию использует новые семантические теги HTML5. Важным качеством механизм тем Orchard является возможность создавать темы на основе других тем, то есть наследовать темы оформления.

Компоновка (Layout)

Файл компоновки разметки описывает то, как каждый из компонентов веб-страницы должен быть расположен. Компоновка страницы в Orchard CMS оперирует понятиями «зоны», «виджеты», «слои».

На рисунке 2.7 представлена компоновка темы доступной в Orchard CMS по умолчанию со всеми доступными зонами, в которые добавлено содержимое.

clip_image004

Рис. 2.7. Зоны компоновки темы оформления Orchard CMS по умолчанию

Шаблон (Template)

Каждая часть контента (content part), каждое поле контента (content field) и каждый виджет должны иметь графическое представление данных, которые они представляют. Шаблон – это код, который создает HTML-представление данных для разного типа контента.

В Orchard CMS по умолчанию используется движок представлений Razor и соответствующий синтаксис. Более подробно узнать про Razor можно из этого видео-руководства https://www.techdays.ru/videos/3307.html.

Например, шаблон для отображения наименования сайта в заголовке выглядит следующим образом:

@{

var homeUrl = Href("~/");

}
<h1 id="branding"><a href="@homeUrl">@WorkContext.CurrentSite.SiteName</a></h1>

Вы можете обнаружить его в теме оформления по умолчанию. Этот шаблон представлен файлом Branding.cshtml и расположен в папке Themes\TheTimeMachine\Views.

В Orchard CMS существует два особенных шаблона: шаблон компоновки и шаблон документа.

Шаблон компоновки Layout .cshtmlсодержит структуру расположения компонентов веб-страницы. Благодаря этому шаблону и примененным стилям оформления элементы страницы располагаются там, где это требуется.

Шаблон документа Document .cshtml содержит шаблон формирования итоговой разметки документа на базе шаблона компоновки элементов. На рисунке 2.8 представлен шаблон документа, который используется в проектах Orchard CMS по умолчанию:

image

Рис. 2.8. Код шаблона документа по умолчанию

Вы можете убедиться, что шаблон документа описывает структуру веб-страницы с помощью тегов <!DOCTYPE>, <html>, <body> и других.

Форма (Shape)

Форма – это концепция компонентов, которая используются Orchard CMS для построения дерева элементов информации.

Перед тем, как вывести контент с помощью шаблона на страницу, этот контент конвертируется в форму. Из всех подобных форм строится дерево всей веб-страницы. Формами будут представлены: файл компоновки, зоны, виджеты и части документов (content parts).

Формы можно представить как компоненты, которые имеют контент и шаблон, отвечающий за отображение этого контента. Формы можно создавать и добавлять в разметку динамически по мере надобности.

Например, чуть выше мы рассмотрели шаблон Branding.cshtml, который отвечает за вывод названия сайта в заголовке страницы. В шаблоне компоновки этот шаблон используется как форма. И это форма динамически добавляется в заголовок страницы с помощью следующего кода:

WorkContext.Layout.Header.Add(New.Branding(), "5" );

Вы будете работать с формами, как с простейшими элементами дерева веб-страницы.

Размещение (Placement)

Для того чтобы система управления контентом Orchard знала в каком порядке необходимо размещать поля или части контента, должны быть определены правила размещения.

Такие правила формируются с помощью специального файла Placement.info, который содержит информацию о размещении в виде XML . Например, файл Placement.info для модуля Navigation содержит следующее правило:

<Placement>

<Place Parts_Navigation_Menu_Edit="Content:9"/>

</Placement>

Этот код означает, что форму под именем Parts_Navigation_Menu_Edit следует размещать на странице в разделе Content в девятой позиции (то есть после элементов, которым проставлена позиция от 1 до 8).

С помощью файла размещений можно гибко настраивать расположение частей контента. Более того, вы можете указывать различные местоположения на странице для разных форм модуля. Такая возможность позволяет максимально гибко создавать компоновку страниц и добавление модулей.

С помощью правил Placement.info можно указывать расположение не только в зависимости от части страницы, но и от других параметров, например, от текущего типа отображения контента, от типа контента и даже от текущего URL (будет добавлено в Orchard 1.1).

Зона (Zone)

Зоны – это части страниц, которые могут содержать контент. Компоновка веб-страниц в Orchard CMS строится на базе зон. Например, на рисунке 2.7 представлены все доступные зоны при работе с темой оформления по умолчанию The Time Machine.

Зоны определяются в теме оформления и используются в шаблоне компоновки Layout.cshtml. Например, в теме The Time Machine определены следующие зоны (в файле Theme.txt): Header, Navigation, Featured, BeforeMain, AsideFirst, Messages, BeforeContent, Content, AfterContent, AsideSecond, AfterMain, TripelFirst, TripelSecond, TripelThird, FooterQuadFirst, FooterQuadSecond, FooterQuadThird, FooterQuadFourth, Footer.

После определения в теме оформления зоны автоматически становятся доступны для размещения в них виджетов через панель администрирования (рисунок 2.9).

clip_image004[4]

Рис. 2.9. Список доступных зон при добавлении виджета

Виджет (Widget)

Виджет – это небольшой элемент пользовательского интерфейса, который может быть добавлен на одну или несколько страниц сайта. Примерами виджетов могут служить облака тегов, карты, форма поиска и так далее. На рисунке 2.10 выделены некоторые элементы страницы, которые являются виджетами.

clip_image006

Рис. 2.10. Виджеты на странице Orchard CMS

Виджеты должны быть представлены кодом и разметкой, при этом код может быть довольно сложным и содержать свои собственные контроллеры MVC. Кроме того виджеты могут быть созданы на основе частей контента.

Виджеты создаются разработчиком. Несколько виджетов поставляется вместе с Orchard CMS. Самый простой и распространенный виджет, который входит в поставку Orchard CMS – это Html widget, с помощью которого легко добавить в зону страницы произвольную HTML-разметку (рисунок 2.11).

clip_image008

Рис. 2.11. Добавление в зону Header виджета HTML widget через панель администрирования Orchard CMS

Всего в поставке Orchard CMS представлено четыре виджета (рисунок 2.12): для вывода контейнера элменетов, вывода HTML-разметки, вывода списка последних записей блога и вывода элемента «архив блога».

clip_image010

Рис. 2.12. Доступные виджеты в Orchard CMS

Позднее в этом руководстве мы познакомимся с тем, как создать свои виджеты и использовать их на страницах сайта.

Слой (Layer)

Слои – это концепция Orchard CMS по группировке виджетов в зависимости от различных сценариев. Например, вы можете создать набор виджетов, которые отображаются только для авторизованных пользователей, но не видны анонимным посетителям страницы.

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

Создание собственного слоя для сайта производится через интерфейс в панели администрирования (рисунок 2.13).

clip_image012

Рис. 2.13. Добавление нового слоя виджетов в Orchard CMS

При добавлении виджета в зону на страницу вы обязательно должны указать слой, на котором этот виджет будет доступен. По умолчанию существует слой Default, виджеты которого отображаются всегда вне зависимости от условий.

продолжение следует…

Comments

  • Anonymous
    September 30, 2011
    спасибо