MODX Revolution - Базовый урок. MODX Revolution - Базовый урок Редактирование базового шаблона

О том, почему именно MODx и как я докатился до жизни такой, я не пишу. Кому интересно - добро пожаловать на мою . Также будем считать, что если вы пришли на этот урок, то вам интересно не просто создание сайтов, а именно создание сайтов на MODx. Давайте будем считать, что у вас уже есть по-умолчанию:

• компьютер (или ноутбук) с установленной операционной системой ( , неважно)
• мышка чтобы тыкать или клацать
• клавиатура чтобы щелкать или тискать
• монитор
• доступ в интернет
• огромное желание делать сайты

Кстати, это все довольно хорошо умещается в таком устройстве, как ноутбук. И если вы планируете часто работать на даче - лучше купить его. Устраивайтесь поудобнее и повторяйте то, о чем я буду писать дальше и все у вас получится!

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

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

Что такое сайт-визитка?

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

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

Как сделать сайт на модэкс

Перед тем, как приступить к разработке сайта, нам необходимо подготовить рабочее место. Поэтому мы идем на официальный сайт с последней версией системы MODx CMS/CMF , и качаем ее. Официальный сайт русским владеет слабо, но это не помешает нам взять и скачать последнюю версию MODx Evolution.На момент написания статьи последняя версия MODx 1.0.8. (Буквально на следующий день после выхода этого урока была анонсирована новая версия MODx Evolution 1.0.9. Подробности на хабре http://habrahabr.ru/post/173667/)

Будьте бдительны: MODx 1.0.8 тоже является последней версией, но другой ветки системы управления, поэтому, если только начинаете знакомство с MODx, не спешите ставить Revolution 2. Уроки в этом курсе будут написаны специально для Evolution.

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

Официальный сайт 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. После переноса сайта на хостинг:

Всем привет, друзья! Это базовый урок по 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-редактор.

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