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

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. Після перенесення сайту на хостинг:

У минулих уроках ми встановили і налаштували 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. Системні налаштування\u003e Простір імен "ace": Розмір шрифту: 15px Висота області редагування: 560 Невидимі символи: Так М'яка табуляція: Немає Розмір табуляції: 2 Тема редактора: tomorrow_night 2. Файли: Filesystem\u003e super\u003e templates\u003e default\u003e css\u003e 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-редактор.