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