MODX Revolution - Базовый урок. MODX Revolution - Базовый урок Modx revolution обучение
В прошлых уроках мы установили и настроили 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, а также установили пакеты, которые будут необходимы для создания сайта. Сегодня урок о переносе обычного 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
Всем привет, друзья! Это базовый урок по CMF MODX Revolution, в котором мы познакомимся с системой MODX, выполним установку необходимых плагинов и выполним базовую настройку фреймворка.
Класснуть
Запинить
Ресурсы базового урока MODX:
- pdoTools Documentation: docs.modx.pro/components/pdotools/
Установка и настройка MODx плагинов
Устанавливаем Advanced версию MODx, во время установки указываем, что папка админа будет называться super .
Маст-хэв плагины MODx
Самые популярные и наиболее часто используемые дополнения для MODx:
- Ace - редактор кода MODx;
- Collections - отображение и управление коллекциями ресурсов;
- pdoTools - набор базовых инструментов MODx;
- FormIt - работа с формами в MODx;
- phpThumbOf - работа с изображениями в MODx;
- TinyMCE / CKEditor (на выбор) - текстовый WYSIWYG редактор для MODx;
- translit - транслитерация URL в MODx;
- MIGX - Добавляемые дополнительные поля в MODx;
- AutoTemplate - "Умное" автоматическое назначение шаблонов ресурсам.
Базовые настройки MODx Revolution
Переходим в "Системные настройки".
Раздел: Дружественные URL
- Транслитерация псевдонимов: russian;
- Использовать дружественные URL: Да;
- Строгий режим дружественных URL: Да;
- Проверять на дублирование URI во всех контекстах: Да;
- Использовать вложенные URL: Да;
- Не забудьте также переименовать ht.access в .htaccess в корне сайта.
Раздел: Панель управления
- Показывать описание в верхнем меню: Нет.
Раздел: Сайт
- Страница ошибки 404 «Документ не найден»: ID ресурса 404;
- Публиковать по умолчанию: Да;
- Название сайта: Название вашего проекта.
Раздел: Система и сервер
- Отправлять заголовок X-Powered-By: Нет.
Пространство имен: ace
- Размер шрифта: 18px;
- Мягкая табуляция: Нет;
- Размер табуляции: 2;
- Тема редактора (на выбор): ambiance, chaos, chrome, clouds, clouds_midnight, cobalt, crimson_editor, dawn, dreamweaver, eclipse, github, idle_fingers, katzenmilch, kr, kuroir, merbivore, merbivore_soft, mono_industrial, monokai, pastel_on_dark, solarized_dark, solarized_light, terminal, textmate, tomorrow, tomorrow_night, tomorrow_night_blue, tomorrow_night_bright, tomorrow_night_eighties, twilight, vibrant_ink, xcode;
- Ктоме того, вы можете сделать тему Material
в редакторе Ace. Инструкция:
MODx Ace Material Theme 1. Системные настройки > Пространство имен "ace": Размер шрифта: 15px Высота области редактирования: 560 Невидимые символы: Да Мягкая табуляция: Нет Размер табуляции: 2 Тема редактора: tomorrow_night 2. Файлы: Filesystem > super > templates > default > css > index.css: (Добавить в конце) .ace_editor{line-height: 1.4!important;font-family: "Menlo","Ubuntu Mono","Consolas","source-code-pro",monospace!important} .ace_gutter{color:#666E79!important} .ace_active-line,.ace_gutter-active-line{background-color:#2A2F38!important} .ace_scroller,.ace_gutter {background-color: #272B33!important} .ace_meta.ace_tag{color:#A6B2C0!important} .ace_meta.ace_tag.ace_tag-name{color:#DF6A73!important} .ace_entity.ace_other.ace_attribute-name{color:#D2945D!important} .ace_string{color:#90C378!important} 3. Очистить кеш через меню.
Создаваемые базовые ресурсы
- Страница 404 - страница для настройки «Документ не найден». Не показывать в меню;
- sitemap - ресурс для вывода [] . Пустой шаблон. Не показывать в меню. Тип содержимого: XML. Не доступен для поиска. Не использовать HTML-редактор;
- robots - ресурс для вывода robots.txt . Пустой шаблон. Не показывать в меню. Тип содержимого: text. Не доступен для поиска. Не использовать HTML-редактор.