Интеграция шаблонов

Что такое шаблоны и где их достать

Шаблоны для MODX - это готовые дизайнерские решения, которые содержат в себе все необходимые элементы дизайна, такие как цветовая схема, шрифты, разметку страницы и т.д. Использование шаблонов позволяет значительно сократить время на разработку сайта и улучшить его внешний вид.

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

Так как для MODX 3 нет как таковых готовых шаблонов, но в него с легкостью можно интегрировать любой готовый html шаблон или собственную верстку. Рекомендую искать обычные html (css/js) шаблоны их очень много как бесплатных так и платных. Найти их просто, достаточно вбить в поиск запрос: адаптивные html шаблоны - откроется десяток тысяч сайтов.

Вот список сайтов откуда я обычно беру шаблоны:

• bootstrapmade.com (куча бесплатных и симпатичных шаблонов).
• themeforest.net - куча платных премиум шаблонов.
• wrapbootstrap.com - куча платных премиум шаблонов.
• templatemonster.com - много платных и есть довольно много бесплатных шаблонов.
• startbootstrap.com - много платных шаблонов.

Врамках даной документации мы будем интегрировать бесплатный шаблон с bootstrapmade.com: Eterna - создадим многостраничный сайт с блогом (визитка, корпоративный).

Скачать шаблон Eterna с оф. сайта, с яндекс диска (могут быть не самыми актуальными, но именно по их коду пишется документация).

Перенос готовой верстки (шаблона)

Каждый html шаблон состоит из определенного набора файлов, обычно это html, css, js файлы и изображения. Также могут быть шрифты, scss файлы, php обработчики и т.д.

Для интеграции дизайна нам обычно нужно перенести на хостинг все файлы кроме html и php. В данном случае все, что нам нужно лежит в папке assets:

Создадим в корне сайта директорию templates и закачаем все файлы из папки assets туда. Сделать это можно при помощи файлового менеджера хостинга или через ftp/sftp. В конечном итоге получаем следующее:

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

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

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

Теперь откроейте код главной страницы html шаблона - обычно это файл index.html (делать это лучше при помощи редакторов кода) скопируйте и вставьте его в место стандартного.

И так как мы загрузили шаблон в свою папку templates, нам нужно поменять пути к css, js и прочим файлам. Пример: было assets/vendor/animate.css/animate.min.css, стало templates/vendor/animate.css/animate.min.css.

В нашем случае нам нужно везде assets заменить на templates. Если вы устанавливали дополнение Ace, то выделите assets нажмите CTRL + H, в поле замены напишите templates и напротив заменить нажмите на все.

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

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

Если у вас весь код кривой, значит вы что-то не закачали, либо поправили не все пути до файлов.

Интеграция html верстки с CMS - введение

Интеграция html верстки с CMS - это процесс объединения дизайна и верстки сайта (html, CSS, JavaScript) с системой управления контентом (CMS), в нашем случае с MODX. Это позволяет управлять контентом сайта через интерфейс CMS, без необходимости вручную изменять код сайта.

Иными словами нам нужно превратить статический код в динамический, чтобы значительно упростить процесс управления контентом и обновления сайта, а также при необходимости создавать более сложные и функциональные сайты. В этом нам помогут Чанки, Стандартные поля ресурсов, TV поля, системные настройки, модификаторы, сниппеты и т.д..