Modx обучение. MODX Revolution - Базовый урок. Маст-хэв плагины MODx
В прошлых уроках мы установили и настроили modx, а также установили пакеты, которые будут необходимы для создания сайта. Сегодня урок о переносе обычного HTML/CSS/JS дизайна в MODX Revo. Где можно достать дизайн я писал в статье: MODX шаблоны – что это, где их достать (скачать, заказать, купить). Для своего сайта я выбрал готовый платный адаптивный bootstrap шаблон на themeforest за 17$ под названием brightbox (кликните по названию, чтобы посмотреть его демо и описание). Можете использовать абсолютно любой, их полно и бесплатных - так скорее всего лучше поймете весь принцип натяжки.
Структура HTML тем
Практически каждая тема имеет в себе html, css, js и файлы картинок + у многих еще есть php файлы - обработчики форм.
В моем случае в папке assets находятся css и js файлы (в соответствующих директориях), в папке images — изображения и красные файлы (у вас могут быть не красными - все зависит от установленного по умолчанию браузера) — это html файлы.
Перенос шаблона в Modx
Самый простой способ - это просто закинуть все файлы с папками (кроме html) в корень веб-сайта. Но я пойду более сложным путем. Так как modx у меня закален и директории assets у меня нет, я залью содержимое из assets (подпапки css и js) в корень сайта и images тоже в корень.
Раньше я создавал директорию template и закидывал в нее все файлы — можете поступить так же.
Редактирование базового шаблона
В дереве слева, переходим во вкладку «Элементы» и открываем начальный шаблон (можно просто щелкнуть лкм или пкм и выбрать редактировать).
Удаляем его и заменяем на код из index.html (которые мы не закинули в корень сайта).
Открыть html файл можно при помощи обычного блокнота, но лучше использовать специальный редактор, например .
Сохраняем и переходим на главную страницу сайта.
Главная страница сейчас выглядит криво.
Это произошло потому-что, пути к скриптам и css изменились.
Правка путей
Пути сейчас выглядят так.
К стати немного странная тема, обычно путь идет через слэш /, а \, поправим это.
Если вы уже установили пакет ace, то можно легко и просто сделать поиск с заменой, для этого щелкните в код и затем нажмите сочетание клавиш Ctrl+H (работает на Linux и windows), в верхнее поле вводим \, а в нижнее / и нажимаем all.
Официальный сайт MODx
http://modx.com/
Учебные материалы по созданию сайтов на MODx
Параметры сниппетов
http://wiki.modxcms.com/index.php/Category:Snippets
Последнюю версию дистрибутива можно скачать по адресу http://modx.com/download/evolution/
Последовательность создания сайта на MODx evolution
- Создать базу данных и пользователя с префиксом, определяемым хостером, чтобы потом не править файл config.inc.php.
- Установить MODx. Сделать настройки.
- Скопировать шаблон сайта в папку assets/templates.
- Код шаблона index.html скопировать в шаблон Minimal Templates.
- Внутри прописать путь
. - Прописать пути к скриптам, картинкам, стилям (img, link, scrypts). Например,
- Определить, сколько шаблонов будет на сайте.
- Выделить общие для всех страниц части, они будут чанками. Чанки выводятся в двойных фигурных скобках. Например, {{HEAD}}
- Главное меню сайта можно вынести в отдельный чанк. .
- Меню на сайте и карта сайта выводятся сниппетом Wayfinder. Описание сниппета Wayfinder.
- Список ресурсов в том числе с описанием, картинками, ссылками… выводится сниппетом Ditto. Описание и примеры сниппета Ditto.
- Цепочка навигации «хлебные крошки» выводится сниппетом Breadcrumbs. Описание сниппета Breadcrumbs .
- Поиск по сайту осуществляется сниппетомAjaxSearch. Описание сниппета AjaxSearch .
- Форма обратной связи - сниппет eForm. Пример создания формы обратной связи средствами сниппета eForm .
- Плагин Phx предназначен для проверки отсутствия изображения в TV-параметре, определения родительских свойств и др. .
- Необходимо дополнительно прописать несколько стилей.
- После переноса сайта на хостинг:
http://www.xml-sitemaps.com
# Default modx exclusions
User-agent: *# права индексации распространяются на любого робота
Disallow: /assets/cache/
Disallow: /assets/docs/
Disallow: /assets/export/
Disallow: /assets/import/
Disallow: /assets/modules/
Disallow: /assets/plugins/
Disallow: /assets/snippets/
Disallow: /assets/packages/
Disallow: /assets/tvs/
Disallow: /install/
Disallow: /manager/
# For sitemaps.xml autodiscovery. Uncomment if you have one.
Host: сайт
Sitemap: http://сайт/sitemap.xml
В прошлых уроках мы установили и настроили modx, а также установили пакеты, которые будут необходимы для создания сайта. Сегодня урок о переносе обычного HTML/CSS/JS дизайна в MODX Revo. Где можно достать дизайн я писал в статье: MODX шаблоны – что это, где их достать (скачать, заказать, купить). Для своего сайта я выбрал готовый платный адаптивный bootstrap шаблон на themeforest за 17$ под названием brightbox (кликните по названию, чтобы посмотреть его демо и описание). Можете использовать абсолютно любой, их полно и бесплатных - так скорее всего лучше поймете весь принцип натяжки.
Структура HTML тем
Практически каждая тема имеет в себе html, css, js и файлы картинок + у многих еще есть php файлы - обработчики форм.
В моем случае в папке assets находятся css и js файлы (в соответствующих директориях), в папке images — изображения и красные файлы (у вас могут быть не красными - все зависит от установленного по умолчанию браузера) — это html файлы.
Перенос шаблона в Modx
Самый простой способ - это просто закинуть все файлы с папками (кроме html) в корень веб-сайта. Но я пойду более сложным путем. Так как modx у меня закален и директории assets у меня нет, я залью содержимое из assets (подпапки css и js) в корень сайта и images тоже в корень.
Раньше я создавал директорию template и закидывал в нее все файлы — можете поступить так же.
Редактирование базового шаблона
В дереве слева, переходим во вкладку «Элементы» и открываем начальный шаблон (можно просто щелкнуть лкм или пкм и выбрать редактировать).
Удаляем его и заменяем на код из index.html (которые мы не закинули в корень сайта).
Открыть html файл можно при помощи обычного блокнота, но лучше использовать специальный редактор, например .
Сохраняем и переходим на главную страницу сайта.
Главная страница сейчас выглядит криво.
Это произошло потому-что, пути к скриптам и css изменились.
Правка путей
Пути сейчас выглядят так.
К стати немного странная тема, обычно путь идет через слэш /, а \, поправим это.
Если вы уже установили пакет ace, то можно легко и просто сделать поиск с заменой, для этого щелкните в код и затем нажмите сочетание клавиш Ctrl+H (работает на Linux и windows), в верхнее поле вводим \, а в нижнее / и нажимаем all.