Modx навчання. 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, а також встановили пакети, які будуть необхідні для створення сайту. Сьогодні урок про перенесення звичайного 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.

Офіційний сайт 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 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

   • Транслітерація псевдонімів:Російська;
   • Використовувати дружні 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 , 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. Файли: 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-редактор.