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

Установка MODx CMS…что, снова? Да!

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

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

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

Запускаем установку системы заново. Как установить и что для этого нужно… всем поленившимся в первой статье – прошу таки пройти на Wiki. Хотя у меня будет пара замечаний, которые я, к сожалению, упустил в первой статье:

• Чтобы использовать кодировку UTF-8 на все 100, на вашем сервере должен быть установлен PHP с расширением mbstring. Чтобы проверить наличие этого расширения на вашем сервере, загрузите на свой сервер файл info.php (переименуйте .txt в .php) и откройте его в своем браузере. Откроется длинная страница с описанием настроек вашего PHP, в том числе должен встретиться заголовок с названием “mbstring”. Если нашли, то все в порядке. Если нет, проще всего попросить поддержку хостинга включить это расширение. На домашнем сервере, извините, придется разобраться самому.
• Версия сервера баз данных MySQL должна быть не менее 4.1, т.к. только начиная с этой версии MySQL корректно работает с кодировкой UTF-8.

Итак, дойдя до страницы “Дополнительные элементы/Optional Items”, предлагаю выбрать только самые необходимые элементы. Кроме того, если установлен флажок “Пример веб-сайта”, - снимите его. Итак, нажмем сначала кнопку “Ни один/None”, чтобы очистить все выбранные по умолчанию флажки, а затем выберем только нужные нам:

• Модуль “Doc Manager” (модуль для гибкого управления документами внутри MODx)
• Модуль “QuickEdit” (модуль для быстрого доступа к редактированию страницы)
• Плагин “Bottom Button Bar” (модуль, добавляющий дополнительные кнопки внизу страницы в MODx)
• Плагин “Forgot Manager Login” (добавляет ссылку для восстановления пароля для доступа к системе управления)
• Плагин “Inherit Parent Template” (плагин автоматически назначает каждому дочернему документу родительский шаблон)
• Плагин “QuickEdit” (плагин, работающий в паре с одноименным модулем)
• Плагин “TinyMCE” (плагин, добавляющий графический редактор TinyMCE для работы с текстом внутри MODx)

И… все. Как вы заметили, ни один стандартный сниппет я не выбрал. В предыдущих статьях я говорил о том, что чаще всего (для меня) проще написать свой код для реализации небольшой функциональности, нежели подыскивать готовое и пытаться переделать это на свой лад. Хотя вполне возможно, что какие-то готовые решения мы все же используем.

Будем считать, что установка завершена.

Заходим в систему управления по адресу “/manager/” с введенными ранее логином и паролем. При первом входе в систему необходимо сделать следующие настройки:

1. На закладке “Сайт”/“Site”:
   • Установить “Заголовок сайта”/“Site name”: Демонстрационный сайт MODx CMS.
   • Выбрать “Язык системы управления”/ “Language”: Russian-UTF8 (обязательно проверить, что выбран именно этот языковый пакет, а не просто Russian).
2. На закладке “Семантические URL”/“Friendly URLs”:
   • Выбрать “Использовать семантические URL ”/“Use friendly URLs ”: “Да” (включаем дружественные/семантические ссылки).
   • Выбрать “Использовать псевдонимы в URL”/“Use friendly aliases”: “Да” (включаем алиасы/псевдонимы).
   • Выбрать “Использовать вложенные URL”/“Use friendly alias path”: “Да” (разрешаем создавать вложенные ссылки).

Все остальные параметры пока оставляем без изменений и жмем кнопку “Сохранить”/“Save”. На этом шаге можно считать систему управления установленной и настроенной для дальнейшей работы.

Установка своего шаблона в MODx CMS

При установке MODx, даже если не выбирать установку демонстрационного сайта, автоматически устанавливается шаблон по умолчанию, называемый “Minimal Template”. Этот шаблон доступен здесь: закладка “Ресурсы” -> “Управление ресурсами” -> Закладка “Шаблоны”.

Откроем сайт для просмотра через закладку “Сайт” -> “Предпросмотр” и увидим что-то похожее на следующий рисунок:

Хм… не совсем то, что хотелось бы. Но это уже кое-что, не так ли? Так давайте продолжим и сделаем все еще круче.

Итак, вставим подготовленный шаблон в MODx. Взглянем еще раз на него – что шаблон из себя представляет? Один HTML файл “index.html”, две папки “css” и “design”, содержащие набор CSS файлов и набор изображений для нашего дизайна соответственно. Файл “index.html” собственно и будет основой для шаблона внутри MODx.

Теперь нам необходимо загрузить все составные части нашего шаблона в рабочую директорию MODx. Практически не имеет разницы, куда именно мы загрузим свои файлы, т.е. мы могли бы загрузить эти файлы прямо в основную папку, где установлена система управления MODx. И даже более того, если мы так сделаем, как ни странно, все будет замечательно работать. Однако теоретически подразумевается, что для шаблонов в MODx должна использоваться специальная директория по адресу “/assets/templates/”.

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

Зайдя по указанному выше адресу, мы увидим пару папок, называемых “default” и “modxhost”. Это папки, содержащие набор файлов, которые используются для шаблонов демонстрационных сайтов. В том числе директория “default” используется для той зелененькой странички, которую мы видели ранее при предпросмотре.

Смело удаляем обе директории “default” и “modxhost”, поскольку они нам больше не понадобятся. И создаем новую, назовем ее “crystalx” по названию нашего HTML шаблона. Теперь скопируем папки “css” и “design” в эту новую директорию.

И вновь вернемся к системе управления. Снова откроем закладку “Ресурсы” -> “Управление ресурсами” -> Закладка “Шаблоны” и кликнем по ссылке с названием шаблона “Minimal Template”. Нам откроется новая страница для редактирования этого шаблона, где мы увидим несколько полей ввода. Но сейчас нас будут интересовать только следующие поля, которые мы будем сразу редактировать:

• Имя шаблона – назовем наш шаблон “Основной шаблон”.
• Описание – пусть будет что-то в этом духе: “Основной шаблон, используемый для сайта”. Не очень креативно, согласен… кому не нравится, может просто оставить это поле пустым.
• Код шаблона (html) – большое поле ввода, в котором находится основной код HTML шаблона вместе с некоторыми управляющими конструкциями MODx, например, [(site_name)] или [*#content*]. Бесстрашно удаляем отсюда весь старый код, копируем содержимое файла “index.html” и вставляем его в это поле, после чего жмем кнопку “Сохранить”.

Посмотрим, что же у нас получилось. Открываем закладку “Сайт” -> “Предпросмотр” и… ой, какой ужас!.. Мы видим, что вроде бы что-то изменилось, но на первый взгляд – “шеф, все пропало!”. Т.е. наблюдаем мы примерно такую картинку:

Да, действительно не совсем то, что ожидали. Но не все так плохо, как то могло показаться на первый взгляд. Когда мы готовили шаблон для сайта, не учитывали, что пути к картинкам и CSS файлам могут измениться. А они изменились! Как вы помните, мы перенесли эти файлы в папку “assets\templates\crystalx”, поэтому сейчас нам нужно заменить все пути с учетом этого переноса.

Снова открываем шаблон для редактирования (“Ресурсы” -> “Управление ресурсами” -> Закладка “Шаблоны”). Теперь он у нас называется “Основной шаблон”. И меняем все пути к CSS файлам и картинкам на новые, например, так для CSS файлов:

• Было: <link rel="stylesheet" media="screen,projection" type="text/css" href="/./css/main.css" />
• Стало: <link rel="stylesheet" media="screen,projection" type="text/css" href="/./assets/templates/crystalx/css/main.css" />

Или так для картинок:

• Было: <input type="image" src="/design/search_submit.gif" id="search-submit" title="Найти" value="Найти" />
• Стало: <input type="image" src="/./assets/templates/crystalx/design/search_submit.gif" id="search-submit" title="Найти" value="Найти" />

Сделали? Отлично. Тогда сохраняем измененный шаблон в MODx и заново открываем главную страницу сайта… Ну вот теперь получилось то, что нужно, ага? Для крайне ленивых нетерпеливых вот готовый шаблон index-modified.html с уже измененными путями к файлам.

Деление на чанки (chunks)… или на первый-второй рассчитайсь!

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

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

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

Но мы себя с самого начала приучаем к порядку. Разделив свой готовый шаблон на отдельные кирпичики – чанки , мы сможем лепить новые шаблоны на его основе, просто добавляя или удаляя этот строительный материал без какого-либо дополнительного создания кода. Кроме того, такое логическое разделение на части реально помогает в дальнейшей работе над сайтом (объяснить сложно, это нужно просто почувствовать).

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

Начнем с того, что у нашего шаблона имеется хорошо заметный темно-синий заголовок сайта, в коде шаблона он представлен в блоке с id=“header”. Создадим новый чанк с аналогичным названием “HEADER” здесь: “Ресурсы” -> “Управление ресурсами” -> Закладка “Чанки” (мы используем сейчас только поле “Название чанка”), а после скопируем сюда код всего блока с id=“header” (header-chunk.txt). Сохраняем новый чанк “HEADER” и заменяем весь код блока с id=“header” в шаблоне конструкцией {{HEADER}}, чтобы получился такой шаблон (index-modified2.html).

Аналогично мы можем выделить отдельный блок с id=“tabs”, содержащий верхнее навигационное меню. Создадим для него еще один чанк {{TOPMENU}} (topmenu-chunk.txt).

И так мы пройдем до последнего логического блока. Так, например, блок основного содержимого (id=“content”) перейдет в отдельный чанк {{CONTENT}}(content-chunk.txt). Хочу обратить внимание на способ называния чанков – полезно, хотя и совсем необязательно, давать им название по логическому расположению в шаблоне или по названию блоков, которые они должны замещать.

Также следует иметь ввиду, что название чанка может быть даже на русском языке. Например, чанк {{CONTENT}} мы вполне могли переименовать в {{ОСНОВНОЙ-ТЕКСТ-САЙТА}}, при этом , конечно, не забывая указать в своем шаблоне точно такое же название чанка. Однако я рекомендую все же использовать унифицированный английский язык, как это, например, обычно делается с названиями идентификаторов id для блоков в шаблоне (div=“content”, div=“tabs” и т.д.).

В результате у нас получится вот такой шаблон (index-modified3.html) и набор небольших кусков HTML кода – чанков:

• {{HEADER}} (header-chunk.txt)
• {{TOPMENU}} (topmenu-chunk.txt)
• {{STRIP}} (strip-chunk.txt)
• {{CONTENT}} (content-chunk.txt)
• {{RIGHT-COLUMN}} (right-column-chunk.txt)
• {{FOOTER}} (footer-chunk.txt)

Чтобы сделать наш шаблон еще более универсальным, выделим в отдельный чанк {{HEAD}} (head-chunk.txt) программный заголовок HTML кода в шаблоне (<head>...</head>). В итоге получится совсем короткий шаблон (index-modified4.html). Скопируйте его код и замените текущий шаблон в MODx, а также создайте все оставшиеся чанки и заполните их соответствующим кодом (код каждого чанка доступен по ссылкам выше).

Ну что ж… откроем наш сайт снова через предпросмотр или просто обновим страницу. Ничего не изменилось? Отлично! Это значит, что мы все сделали правильно. Ура, товарищи!

Заключение

За сим будем считать сегодняшний урок оконченным. Подведем его итоги:

1. Мы установили настройки в MODx, которые желательно сделать перед началом работы над новым сайтом.
2. Узнали о принципах работы с шаблонами в MODx – где хранятся шаблоны в системе, как их создавать и редактировать.
3. Научились импортировать свой готовый HTML шаблон в систему управления.
4. Определили назначение чанков и использовали их функционал в своем шаблоне.

Статья позаимствована с официального сайта ModX