MODX Revolution – Базовий урок. MODX Revolution - Базовий урок Базові налаштування MODx Revolution

Офіційний сайт MODx

http://modx.com/

Навчальні матеріали щодо створення сайтів наMODx

Параметри сніпетів

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

Останню версію дистрибутива можна завантажити за адресою http://modx.com/download/evolution/

Послідовність створення сайту наMODxevolution

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 Revo lution, в якому ми познайомимося з системою 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

   • Транслітерація псевдонімів:Російська;
   • Використовувати дружні 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_indust, 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. Файли: File default > css > index.css: (Додати наприкінці) !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:# !important) 3. Очистити кеш через меню.

Створювані базові ресурси

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

У минулих уроках ми встановили та налаштували modx, а також встановили пакети, які будуть необхідні для створення сайту. Сьогодні урок про перенесення звичайного HTML/CSS/JS дизайну MODX Revo. Де можна дістати дизайн, я писав у статті: MODX шаблони – що це, де їх дістати (завантажити, замовити, купити). Для свого сайту я вибрав готовий платний адаптивний bootstrapшаблон на theforest за 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.