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

Каждый сайт должен быть аутентичный. Вы согласны? Поэтому пришло время изменить дизайн нашего сайта с дефолтного (стандартного, шаблонного) на другой.

За что дизайнеры любят MODx? За то, что здесь нет никаких блоков и дизайн может быть ограничен лишь полетом фантазии.

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

Этот я думаю выглядит прилично:

Подготовка шаблона

Загружаем этот шаблон к себе на компьютер или используем любой другой. Внутри архива есть три элемента которые нас интересуют: папка images, style.css и index.html.

Для того чтобы не перегружать корень сайта кучей разных файлов мы копируем рисунки и css-файл в соответствующее место. Оно находится здесь /assets/templates/.

Также здесь находятся 2 папки с шаблонами default (Minimal Template) и modxhost — можете смело удалять если стандартный дизайн вам не подходит. Я удаляю только modxhost чтобы можно было сравнить стандартный и новый шаблон в дальнейшем.

Создаем свою тему. Не будем мудрить и назовем ее terrafirma2 (/assets/templates/terrafirma2/) так как это задумал ее автор. Копируем туда, как уже было сказано, рисунки и css-файл.

Переходим в главном меню админпанели к Элементы -> Управление элементами. Выбираем вкладку Шаблоны и жмем Новый шаблон.

Даем шаблону (дизайну) имя в поле Имя шаблона и в поле Код шаблона (HTML) вставляем содержимое файла index.html из нашего архива. Сохраняем.

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

Текст, тот же что и был в дизайне, но выглядит отнюдь не хорошо. Ничего страшного! Пока мы не прописали правильный путь к файлу с стилями и изображениям.
Это делается довольно просто. Заходим в наш новообразованный шаблон в админпанели и немного меняем его следующим образом:

Для css-файла:
Было: <link rel="stylesheet" type="text/css" media="screen" href="style.css" />
Стало: <link rel="stylesheet" type="text/css" media="screen" href="/assets/templates/terrafirma2/style.css" />

Для изображений:
Было: <img src="images/img01.jpg" />
Стало: <img src="/assets/templates/terrafirma2/images/img01.jpg" />

Сохраняем изменения в шаблоне и снова смотрим на результат. Ура — заработало! Теперь наша страница выглядит также как и сверстан дизайн.

Деление на чанки (chunks)

Чанк (chunk) — блок html-кода, который может быть включен в шаблон. Вызов чанка осуществляется с помощью фигурных скобок и его имени, например {{имя чанка}}. Во время вывода страницы, строка {{имя чанка}} будет заменена на содержимое чанка.

Для чего это нужно? Для удобства. С опытом вы убедитесь что это оптимальный вариант для работы с шаблоном. Хотя конечно можно оставить шаблон в таком виде как он есть.

Как создать чанк? Переходим в главном меню админпанели к Элементы -> Управление элементами. Выбираем вкладку чанки и жмем Новый чанк.

Как же разделить наш шаблон на части. Поскольку дизайн сверстан div-ами то их и будем считать логичными блоками. В результате нашей работы должны выйти такие чанки: content, footer, footer-bar, header, menu, sidebar, top-bar. Также код между тегами <head> …</ head> переносим в чанк head.

После такой порезки шаблон будет выглядеть так:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
{{head}}
<body>
<div id="wrapper">

	{{header}}
	{{menu}}
	{{top-bar}}

	<div id="page">
		{{content}}
		{{sidebar}}
		<div>&nbsp;</div>
		{{footer-bar}}
	</div>

</div>
{{footer}}
</body>
</html>

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

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

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *