Каждый сайт должен быть аутентичный. Вы согласны? Поэтому пришло время изменить дизайн нашего сайта с дефолтного (стандартного, шаблонного) на другой.
За что дизайнеры любят 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> </div> {{footer-bar}} </div> </div> {{footer}} </body> </html>Теперь сайт будет отличаться от сотен одинаковых и при желании вы сможете изменить его дизайн на любой другой.
К сожалению пока что не зависимо от страницы мы будем видеть одно и то же. Именно поэтому в следующей статье я рассмотрю работу со стандартными тегами и покажу как автоматизируется меню.