Разработка простейшего лендинга на OctoberCMS. Часть 2.

На чем мы остановились в предыдущей части? Мы создали следующее:

плагин landing и миграцию
проработали модель Page
настроили поля формы и колонки для списка

В итоге на финальном этапе первого урока у нас была следующая картина:

Мы сделали один вариант страницы лендинга и заполнили его тестовым содержимым.

Компонент

Компоненты, в рамкам OctoberCms это настраиваемые элементы, которые могут быть прикреплены к любой странице или шаблону. Мы можем создавать любое количество компонентов для любых задач, которые могут быть использованы на фронте.

Тут снова без выкрутасов - всё очень подробно расписано в документации OctoberCms - https://octobercms.com/docs/plugin/components

Для нашей задачи нам предстоит создать всего один компонент. Назовем его Page.

Для создания компонента воспользуемся следующей командой:

php artisan create:component sandbox.landing page

В результате выполнения команды в директории нашего плагина будет создан компонент Page с подобной структурой

Поправим файл Page.php под наши нужды

И самое главное - не забыть зарегистрировать компонент в нашем плагине, для этого откроем Plugin.php и добавим следующее:

Итак, мы создали простейший компонент, который берет из настроек идентификатор страницы и отдает ее в переменную landing.

На самом деле, даже этот вариант можно улучшать и улучшать, но цель уроков - ознакомление с возможностями.

Тема для лендинга.

Для нашей лендинговой темы, мы не будем изобретать велосипед и возьмем, уже полюбившуюся всем, стартовую тему demo - просто скопируем ее в папку landing.

Поправим файл themes/landing/theme.yaml

Далее подправим файл шаблона themes/landing/pages/home.htm, подготовив его для дальнейшей работы.

Готово. Теперь наш сайт выглядит примерно так:

Не очень круто =)

Подключение компонента и еще немного правок шаблона.

В панели управления переходим в раздел CMS, открываем шаблон нашей темы и бросаем туда компонент Landing.

В настройках компонента выбираем страницу, содержимое которой хотим отображать.

Страницу South Park: The Fractured but Whole мы создали и наполнили контентом в первой части этого повествования.

Компонент подключен к шаблону, соответственно свойства и методы его теперь доступны на всех страницах, которые используют этот шаблон.

Далее отредактируем файл themes/landing/partials/site/header.htm

Удалим всё - добавим такое содержимое:

{{ landing.title }} - это название нашей страницы

После чего, наш сайт стал выглядеть так:

Уже лучше!

Группы контента

Приступим к самому интересному - будем оживлять динамические блоки с содержимым, которые мы уже давным давно создали и даже заполнили контентом.

Группы мы определили при создании модели и формы - это:

text
image
features
slider

Чтобы убедиться - вернемся к файлу plugins/sandbox/landing/models/page/groups.yaml

В нашей теме в разделе в themes/landing/partials создадим папку content, где сложим шаблоны для каждой группы контента.

В папке themes/landing/partials/content создадим следующие файлы:

text.htm
image.htm
features.htm
slider.htm

Должна получиться такая структура:

Далее вернемся в файлу themes/landing/pages/home.htm и отредактируем его следующим образом.

Что означает эта конструкция:

В цикле мы перебираем содержимое landing.content, это содержимое состоит из именованных групп и содержимого этих групп.

Иными словами зная, что это за группа (из свойства _group), мы можем динамически отправить ключ и содержимое группы в соответствующую партиалку.

Партиалим!

text.htm

Начнем с файла themes/landing/partials/content/text.htm

Приведем его к следующему виду:

image.htm

Партиалку для отображения картинки themes/landing/partials/content/image.htm приведем к следующему виду:

features.htm

Партиалку для отображения преимуществ themes/landing/partials/content/features.htm тоже модифицируем:

slider.htm

И наконец слайдер themes/landing/partials/content/slider.htm мы поправим в два этапа.

Для примера слайдера используем библиотеку https://github.com/kenwheeler/slick

Как и написано в документации, подключим стили в файл шаблона themes/landing/layouts/default.htm в раздел head

и в конец шаблона добавим js-библиотеку:

Далее отредактируем файл themes/landing/partials/content/slider.htm и приведем его к следующему виду:

Немного CSS

Мы не зря добавили css-классы в наши partial-файлы. Приправим наш урок небольшой порцией css.

В конец файла themes/landing/assets/css/theme.css добавим немного своего:

Что в итоге?

В итоге у нас должно получиться следующее:

Выглядит вполне приемлемо!

Немного универсализации

Что же мы хотим - мы хотим в дальнейшем посадить на один движок OctoberCMS несколько лендингов, чем больше - тем лучше!

Можно заморочиться и написать свой плагин для мультисайта, но в рамках урока используем готовые наработки из маркетплейса OctoberCms - плагин Multiple Websites Manager Lite - простой, понятный и бесплатный.