НашСамогон - самогонные аппараты, дубовые бочки, винные и турбо дрожжи, электроника и оборудование для производства алкоголя в домашних условиях.
WebDesignMagazine.ru – Журнал о веб-дизайне

Как создать тему OctoberCMS

0

October CMS поистине стал новой звездой на небосклоне под названием CMS. Находясь на вершине Laravel, он обещает сделать процесс написания кода более приятным и демонстрирует принцип конструирования с учётом фундаментальных положений. В этой статье вы найдете информацию о том, как строить для него плагины. Также, мы с вами увидим, как можно построить темы.

1

Что мы собираемся строить

А строить мы будем темы для блога. Тема будет зависеть от блог плагина rainlab и будет состоять из:

  • layout страницы по умолчанию
  • страница About
  • домашняя страница
  • страница с публикациями
  • страница категорий
  • страница с одной публикацией

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

Весь исходный код, упомянутый в этой публикации, доступен на Github, поэтому мы надеемся, что вы откроете repo и сможете воспользоваться нашим детальным руководством к каждому файлу.

Создание темы

Темы OctoberCMS хранятся в библиотеке тем и автоматически загружаются при посещении темы интерфейса бэкенда.

Для того, чтобы ускорить процесс, мы воспользуемся бесплатной темой с сайта startbootstrap.com.

Структура папок темы OctoberCMS

2

На скриншоте видна финальная структура нашей темы. Структура папок не такая сложная – здесь вы сможете найти больше информации.

Установка необходимых плагинов

Поскольку мы планируем создать тему для блога, мы установим блог плагин rainlab, который обладает большим количеством компонентов. Если вы еще не знакомы с этими компонентами, то сможете прочитать о них в статье о Создании плагинов OctoberCMS.

Строим тему

Для того, чтобы начать создание нашей темы, нам нужно всего лишь создать папку. Мы назовем свою папку rafietheme. Если вы пройдете по адресу /backend/cms/themes, то вы увидите, что новая тема уже добавлена в список.

Поскольку у темы еще нет описания или имени, October будет использовать только имя нашей папки.

Файл theme.yaml, который находится в корне библиотеки темы, содержит информацию о нашей теме.

Если вы заглянете в интерфейс управления темой, то увидите, что появилось описание и информация об авторе. Теперь мы добавим скриншот поля для заполнения. OctoberCMS будет искать скриншот в rafietheme/assets/images/theme-preview.png по умолчанию.

Файл version.yaml дает информацию о версии темы, атак как у нас первая, мы пишем:

Структура шаблона

Страницы шаблона October разделены на три части. Каждая секция отделена от другой знаком ==.

Секция конфигурации

В этой секции мы даем описание нашего шаблона для CMS. Мы можем указать страницу, url, заглавие и так далее.

Мы, также, можем использовать установить компоненты и формировать их. Подробнее об этом здесь.

Секция PHP

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

Вы часто будете видеть, что тут используется метод onStart. Этот метод работает автоматически, так как является частью жизненного цикла страницы. Просмотрите список доступных функций, а также некоторые глобальные переменные (layout, страница, компонент).

Секция разметки

October использует движок шаблонов Symfony’s Twig и наследует все базовые функции. Переменные, переданные от секции PHP доступны в визуализации. Переменная  this содержит информацию о page, controller, layout, environment, и params.

3

Использование прототипа

Прототип – способ ввести контент на страницу. Он может быть использован как один из способов ввести, например, скрипты.

Здесь мы дали определение прототипу. Прежде чем закрыть тег body, мы даем пользователю возможность ввести некоторые скрипты, как например:

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

Использование Partial

Partial очень хорошо подходят для того, чтобы разделять части страниц, header, footer и так далее. Как мы уже ранее говорили, они хранятся в библиотеке partials и могут быть вложены с помощью подкаталогов.

– header.htm: содержит тип документа и определение заголовка, а также ссылки некоторых ресурсов

– footer.htm: будет содержать некоторый copyright текст и закрывать документ, как и некоторые ресурсы JavaScript.

– navigation.htm: будет содержать только меню навигации.

– comments.htm: поскольку мы собираемся использовать только Disqus, давайте вставим его как отдельный partial.

Внутри каждого partial или страницы мы можем получить доступ к переменной this, которая содержит переменные page, layout, controller, param и environment, как уже было указано в docs.

Загружая ресурсы, мы передаем множество ссылок фильтру темы, которая объединяет файлы и генерирует кэшированную ссылку.

Тег {% styles %} позволяет разработчикам плагинов ввести свои ресурсы на страницу и то же самое применяется к {% scripts %}.

Вы можете ввести ресурсы на страницу двумя способами:

– Используя функцию onStart в части вашего PHP кода страницы.

Используя прототипы компонента:

Вы наверняка заметили, что мы добавили @jquery вместо пути доступа к файлу.

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

Ранее мы уже сказали, что объект page доступен внутри каждой страницы или partial. Мы используем page.id для того, чтобы установить активный пункт меню. А для атрибута ссылки href мы передаем ID страницы фильтру page, который сгенерирует полный URL. Обратите внимание на то, что id страницы – это имя файла шаблона.

Использование Layout

У October есть папка layouts, где мы можем зарегистрировать наши layout. Мы начнем с одного layout по умолчанию, который мы будем использовать для наших страниц.

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

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

Создание страниц

OctoberCMS хранит заданные пользователем страницы в папке pages. Давайте начнем создавать страницу about, а по ходу дела узнаем о ее различных возможностях.

Страница about

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

Шаблон секции будет содержать в хранилище только некоторый контент Lorem ipsum HTML.

Вот и все! Вы можете зайти на вашу новую страницу, набрав URL /about.

4

Домашняя страница

5

В части конфигурации мы отмечаем на карте URL нашу страницу и используем определенные layout вместе с заглавием и описанием.

Внутри секции PHP, мы используем метод onStart, для того чтобы подготовить переменные нашей страницы. Этот метод выполняется после того, как все компоненты инициализированы.

Плагин rainlab обеспечивает рядом моделей, которые мы можем использовать для того, чтобы запросить базу данных. Мы берем только последние 5 публикаций из нашей базы данных и устанавливаем их в качестве глобальной переменной.

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

Фильтр page генерирует URL данной страницы, но вы также можете передать некоторые параметры URL, которые будут включены. Больше информации здесь.

Страница публикации

Единственная разница с домашней страницей будет в части URL. Параметр slug – это поле динамических данных внутри базы данных. Если хотите быть более точным, вы можете использовать регулярные выражения, следуя правилам.

В документации вы можете найти больше информации о синтаксисе URL и использовании регулярных выражений.

Внутри секции PHP, вы можем просмотреть данные публикации, используя параметр slug. В случае, если публикации не существует, нас перебросит на страницу 404.

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

Тег partial загрузит комментарии. Пока что он выводит только <h2>Comments</h2>, но при желании, вы можете использовать Disqus.

Страница категорий

6

Секция конфигурации нашей страницы, в целом, такая же.

 

В части секции PHP мы проверяем, существует ли категория. Если да, то мы запрашиваем базу данных для соответствующих публикаций.

Мы хотели использовать присоединение между posts и categories в сводной таблице, но блог плагин rainlab обеспечивает метод RainLab\Blog\Models@scopeFilterCategories, чтобы фильтровать публикации, используя множество ID категорий: он принимает Illuminate\Query\Builder в качестве первого параметра и большое количество ID категорий.

В части HTML здесь такая же ситуация, что и с домашней страницей, мы только меняем название, чтобы дать имя категории.

Страница публикаций

Эта страница будет содержать пять последних публикаций, а в конце страницы у нас будет кнопка load more (читать далее), которая будет использовать функциональность фреймворка ajax от OctoberCMS для того, чтобы загружалась остальная часть публикации.

Для того, что использовать фреймворк ajax, вам необходимо включить тег {% framework %}. Так вы получите ссылку на файл framework.js из библиотеки модулей.

Этот тег также поддерживает параметр {% framework extra %}. Использование ajax добавит некоторые стили, как например, индикатор загрузки.

Фреймворк AJAX

У October есть хороший способ того, как иметь дело с некоторыми из наиболее распространенных способов использования загрузки содержания через запросы ajax.  Для того, чтобы фреймворк ajax заработал на элементе, вам нужно просто добавить запрос данных HTML5  = атрибут “onMethodName”. Этот метод должен начать работу с on, которая следует за названием метода.

Есть еще два способа определить ваш метод обработчиков ajax:

–  внутри секции php:

– внутри компонента

Вы можете определить своего обработчика внутри класса компонента. Удостоверьтесь, что вы включили компонент в секцию конфигурации вашей страницы (пример находится выше).

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

data-request: связывает наш обработчик onLoadMorePosts, который мы определяем с нашей PHP секцией.

data-request-update: то место, где мы определяем partial, который будет загружен на сервер, а также ID класс целевого элемента. Если вы заметили значок @ перед ID, это просто означает, что мы хотим присоединиться к элементу, а не заменить его содержание.

data-request-data: мы можем добавить больше параметров запросу, и поэтому мы отправляем переменную счета публикаций.

data-request-success: JS код будет выполнен после каждого успешного запроса, и поэтому функция incrementPostsCounter обновит наш атрибут data-request-data.

Метод post находит postsCount на странице, и тогда мы пропускаем указанное количество и выбираем следующие пять постов.

Страница partials/ajax/posts.htm будет вызвана автоматически и список публикаций остается доступным для того, что бы циклично выполнять.

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

Если у вас возникнут проблемы с кешированием загрузки ajax, попробуйте php artisan cache:clear из командной строки, чтобы очистить кеш и удостовериться в том, что JS обновлен.

Вывод

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

Поделиться:

Об Авторе

Переводчик портала WebDesignMagazine.ru. Пишу статьи и делаю переводы для веб-сайта.