CMS MODX Revolution — урок 5. Интеграция вёрстки — способ 1.

Автор Liza Merichenko
CMS MODX Revolution — урок 5. Интеграция вёрстки — способ 1.

Привет друзья продолжаем постигать Matrix Revolution.

И сегодня я хотел бы вам показать один из способов интеграции исходной верстки в систему modx Revolution — это у нас имеется чистая установка системы 1 главная страничка у неё есть один начальный шаблон оформление выглядит её вот так с версии 250 пробная как бы версия такого шаблон чека для старта. Вот и у нас имеется верстка одной HTML страничке с прилагаемыми файлами в которых есть стили шрифты картинки скрипты. Вот как — это всё интегрировать в моде.

Сейчас я вам покажу один из способов делается всё очень просто в этом способе мы их будем использовать только штатные возможности админке modx Revolution и так всё, что нам нужно сделать — это зайти в начальный шаблон вот он код шаблона здесь верстка и заменить этот код на код из.

Валика верстки так берём на редактирование копируем всё содержимое возвращаемся в админку и заменяем полностью всё содержимое сохраняем и теперь нам осталось только все активы этой страничке тоже перенести. Заходим в папку assets уделяем всё и закидываем всё папочку от нашего проекта. Всё скопировали теперь страничку главную и получаем в верстку полностью интегрирована в систему модэкс всё буквально за несколько секунд всё — это делается. Вот дальше, что нам нужно сделать с этим шаблоном — это нарезать его на более мелкие кусочки для использования на других страничках делается — это следующим образом для упрощения работы нам понадобятся здесь два дополнительных компонентов системы установить идём в установщик загрузить дополнение оставим всё — это редактор кода с подсветкой синтаксиса и второй компонент — это динамические создающий элементы модэкс компонент. Называется он так элемент план так вот он ставим его начал загружать так приходим управление установку теперь производим обоих компонентов Take Element plugin тоже оставим всё. Теперь если зайти в код шаблона то мы видим, что у нас теперь появилась форматирование подсвечивается. Как так вот верстки данная очень неконтрастная поэтому я поменяю её оформление. Заходим в системные настройки режима здесь и вот здесь меняем тему редактором. Я предпочту Twilight использовать снова возвращаемся в начале шаблон и вот у нас такая вот темненькая контрастная тема вот также 10 появляется функционал на весь экран код шаблона и так как же нам теперь нарезать — это всё на маленьких которые можно будет использовать в других шаблонов для других страничек делается — это следующим образом, а тот компонент которому установили 2 так элемент плагин добавляет интересное сочетание клавиш который позволяет на лету создавать маленькие кусочки HTML верстки так называемый чанки мотаться делается — это следующим образом допустим сейчас мы вылезаем полностью Head от начала до конца. Алекс вырезаем и сюда вставляем код будущего чанка как назовём его хотят давать я не могу. Так теперь выделяем со знаком доллара нажимаем Control Enter и у нас динамический появляется окошко спрашивающая. Чанг не найден выход его создать до нажимаем здесь у нас слишком большое окно так. Уже именно присутствует вставляем то, что мы вырезали сохраняем следующее у нас шапка сайта выделяем шапку сайта. Она нас достаточно большая также Control на её месте пишем вызов будущего чанка — это у нас игр в выделяем вместе со знаком доллара нажимаем Control Center имя у нас уже чанков есть вставляем только, что вырезанный код нажимаем сохранить дальше у нас идёт содержимое страницы непосредственно моего пока, что свернем моего поместим уже непосредственно в сам ресурс дальше у нас идёт код в плагине чика Footer и скрипты вот из них на также. Сейчас сделаем такие вот вырезки так вырезаем от плагина вставляем сюда. Чанг плагин выделяем Control Center создать. Чонг вставляем в него вырезанный код сохраняем утро. У нас сейчас пустой поэтому сейчас вырезать его режим ещё блок скриптов и до конца страничке контроле вырезали вставляем сюда. Чанг scripts. Назови вам выделяем со знаком доллара Control enter enter и вставляем опять кот который вырезали и так вот у нас. Во, что превратился весна шаблон то есть сократили по полной осталось только вырезать вот этот весь кусочек кода сам ресурс так идём в главную. Так нам надо кстати сохранить после всех изменений не забываем сохранять идём в главную и вот — это всё содержимое главной страницы тоже меняем на тот который только, что вырезали сохраняем и теперь нам нужно в шаблоне вывести — это содержимое ресурса — это делается с помощью специального модекс. Тайга со звёздочкой и пишем контент всё вот теперь на шаблон должен полностью остаться работоспособным проверяемыми идём содержимое перейти на сайт и смотрим всё работает галерея работает работают вот таким вот образом мы нарезали шаблон штатными средствами мудреца плюс используя два дополнительных компонента теперь смотрим в панели у нас появились только, что вот на ленту созданные чанки и мы можем использовать их теперь в других шаблонах которые будут для других страничек сайта вот такой вот один из способов разработки проекта на modx Revolution в дальнейших руках я покажу ещё два других способа, но спасибо большое за внимание и до новых встреч.

0 комментариев
0

Читайте также