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

http://modx.com/

Учебные материалы по созданию сайтов на MODx

Параметры сниппетов

http://wiki.modxcms.com/index.php/Category:Snippets

Последнюю версию дистрибутива можно скачать по адресу http://modx.com/download/evolution/

Последовательность создания сайта на MODx evolution

1. Создать базу данных и пользователя с префиксом, определяемым хостером, чтобы потом не править файл config.inc.php.
2. Установить MODx. Сделать настройки.
3. Скопировать шаблон сайта в папку assets/templates.
4. Код шаблона index.html скопировать в шаблон Minimal Templates.
5. Внутри прописать путь

   .

6. Прописать пути к скриптам, картинкам, стилям (img, link, scrypts). Например,

7. Определить, сколько шаблонов будет на сайте.
8. Выделить общие для всех страниц части, они будут чанками. Чанки выводятся в двойных фигурных скобках. Например, {{HEAD}}
9. Главное меню сайта можно вынести в отдельный чанк. .
10. Меню на сайте и карта сайта выводятся сниппетом Wayfinder. Описание сниппета Wayfinder.
11. Список ресурсов в том числе с описанием, картинками, ссылками… выводится сниппетом Ditto. Описание и примеры сниппета Ditto.
12. Цепочка навигации «хлебные крошки» выводится сниппетом Breadcrumbs. Описание сниппета Breadcrumbs .
13. Поиск по сайту осуществляется сниппетомAjaxSearch. Описание сниппета AjaxSearch .
14. Форма обратной связи - сниппет eForm. Пример создания формы обратной связи средствами сниппета eForm .
15. Плагин Phx предназначен для проверки отсутствия изображения в TV-параметре, определения родительских свойств и др. .
16. Необходимо дополнительно прописать несколько стилей.
17. После переноса сайта на хостинг:

В прошлых уроках мы установили и настроили 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.

Всем привет, друзья! Это базовый урок по CMF MODX Revolution, в котором мы познакомимся с системой MODX, выполним установку необходимых плагинов и выполним базовую настройку фреймворка.

Класснуть

Запинить

Ресурсы базового урока MODX:

• pdoTools Documentation: docs.modx.pro/components/pdotools/

Установка и настройка MODx плагинов

Устанавливаем Advanced версию MODx, во время установки указываем, что папка админа будет называться super .

Маст-хэв плагины MODx

Самые популярные и наиболее часто используемые дополнения для MODx:

1. Ace - редактор кода MODx;
2. Collections - отображение и управление коллекциями ресурсов;
3. pdoTools - набор базовых инструментов MODx;
4. FormIt - работа с формами в MODx;
5. phpThumbOf - работа с изображениями в MODx;
6. TinyMCE / CKEditor (на выбор) - текстовый WYSIWYG редактор для MODx;
7. translit - транслитерация URL в MODx;
8. MIGX - Добавляемые дополнительные поля в MODx;
9. AutoTemplate - "Умное" автоматическое назначение шаблонов ресурсам.

Базовые настройки MODx Revolution

Переходим в "Системные настройки".

1. Раздел: Дружественные URL

   • Транслитерация псевдонимов: russian;
   • Использовать дружественные URL: Да;
   • Строгий режим дружественных URL: Да;
   • Проверять на дублирование URI во всех контекстах: Да;
   • Использовать вложенные URL: Да;
   • Не забудьте также переименовать ht.access в .htaccess в корне сайта.

2. Раздел: Панель управления

   • Показывать описание в верхнем меню: Нет.

3. Раздел: Сайт

   • Страница ошибки 404 «Документ не найден»: ID ресурса 404;
   • Публиковать по умолчанию: Да;
   • Название сайта: Название вашего проекта.

4. Раздел: Система и сервер

   • Отправлять заголовок X-Powered-By: Нет.

5. Пространство имен: 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. Очистить кеш через меню.

Создаваемые базовые ресурсы

1. Страница 404 - страница для настройки «Документ не найден». Не показывать в меню;
2. sitemap - ресурс для вывода [] . Пустой шаблон. Не показывать в меню. Тип содержимого: XML. Не доступен для поиска. Не использовать HTML-редактор;
3. robots - ресурс для вывода robots.txt . Пустой шаблон. Не показывать в меню. Тип содержимого: text. Не доступен для поиска. Не использовать HTML-редактор.