четверг, 10 февраля 2011 г.

Шаблоны и темы в C1. Введение

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

В других системах управления сайтами существует понятие “тема”, которая часто включает в себя не просто набор макетов для страниц, но и функционал, например, меню навигации, элементы боковых панелей, цветовые схемы и т.п.

Грубо говоря: установил, переключил тему - и сайт поменял свой внешний вид и поведение.

Темы в таком смысле в C1 на данный момент не существуют, однако компоненты тем (в традиционном смысле), в принципе, присутствуют. К тому же, все эти компоненты можно экспортировать в пакет (модуль расширения) и распространять в сети - как пакет темы для C1.

То есть, в С1 все есть для создания тем. Но никто их не делает :).

Я собираюсь когда-нибудь коснуться вопроса тем в C1 более подробно, а пока укажу на основные компоненты, которые вам понадобятся, если вы решите создавать свои “темы” под C1.


Шаблоны страниц

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

Шаблон написан на XHTML. К шаблону можно подключать использовать стили (CSS) и скрипты (JS). Хранятся они, как правило, в папке /Frontend.

Общий функционал (например, меню навигации, поиск) или контент (информация о компании, сайте) следует выносить в C1 функции, прежде всего XSLT функции.

Шаблон можно экспортировать в пакет расширения (потенциальный пакет темы).

Место для редактирования контента страницы

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

Редактируемая “пустота” - это особый элемент в шаблоне: т.н. “заполнитель” (placeholder). Если в вашем шаблоне нет этого элемента, то вы не сможете редактировать страницу после ее создания. Редактор попросту ничего не откроет. Поэтому создавая шаблон, не забудьте добавить в него этот элемент:

<rendering:placeholder id="contentplaceholder" title="Content" default="true" />

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

У каждого элемента должен быть:
  • а) уникальный идентификатор (id)
  • б) название, которое появиться в редакторе страниц (title)
  • в) один из таких элементов должен быть выбран по умолчанию (default="true")

Функции

Другой часто встречающийся элемент в шаблонах - это функции.

<f:function name="Omnicorp.Navigation.Top" />

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

Функции - это удобный способ модуляризации шаблона. Например, можно разбить шаблон на такие части:
  • Верхний колонтитул (header)
  • Логотип
  • Меню (например в виде вкладок)
  • Левая панель
  • Основная часть
  • Правая панель
  • Нижний колонтитул (footer)
И каждую часть, можно вынести в отдельную функцию. (Основная часть обычно представлена в шаблоне заполнителем <rendering:placeholder /> - см. выше)

Каждую используемую в шаблоне функцию можно экспортировать в пакет расширения.

Стили и скрипты

Если скрипт и стиль являются частью некоего пакета расширения, то для их стилей и скриптов (по-хорошему) создается иерархия папок в папке /Frontend, которая соответствует полному названию пакета с пространствами имен и далее - папки Styles и Scripts.

Думаю, что стоит придерживаться этой условности и при создании пакетов с темами.

Например, если ваш пакет тем для C1 будет называться MyCompany.Themes.SuperCoolTheme, то скрипты и стили нужно будет поместить по таким путям

/Frontend/MyCompany/Themes/SuperCoolTheme/Scripts
/Frontend/MyCompany/Themes/SuperCoolTheme/Styles

Файлы и папки с файлами можно экспортировать в пакет расширения.

Графика

Обычно графические файлы в C1 хранятся в  Медиа-архиве (раздел Мультимедиа).

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

И нам ничто не мешает размещать их в папке /Frontend, как и в случае со скриптами и стилями:

/Frontend/MyCompany/Themes/SuperCoolTheme/Images

Таким образом используемые в шаблоне графические файлы можно экспортировать в пакет расширения.

Типы страниц

Напоследок я хочу еще упомянуть типы страниц, которые могут вам понадобится, если вы захотите в своих темах воспользоваться дополнительными компонентами C1, например, мета-полями и папками данных для страниц.

Страница в C1 создается на основе т.н. “типа страниц” (раздел Макет).

Тип страниц может добавлять к странице нужные мета-поля и папки данных, а также т.н. “приложения”. При помощи типа страниц можно добавлять на создаваемую страницу контент по умолчанию.

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

В принципе, это все, что нужно знать для создания своих тем в C1.

На сайте C1 на английском языке можно почитать:

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

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