Быстрый старт¶

Вы только что включили плагин Flex Objects, и очевидный вопрос: что дальше? Эта страница — десятиминутный путь по самому простому сценарию. В конце вы включите директорию, загрузите немного тестовых данных, просмотрите и отредактируете их в Admin Next, а затем отрендерите их на фронтенде двумя разными способами.

Мы используем директорию Contacts, которая поставляется с плагином. Это простой список контактов (имя, email, сайт, теги), идеально подходящий, чтобы освоиться перед созданием собственной директории.

Шаг 1: убедитесь, что Flex Objects установлен и включён¶

Flex Objects — это плагин. Если вы ещё не установили его, возьмите из CLI:

$ bin/gpm install flex-objects

Затем убедитесь, что он включён. Либо проверьте Plugins в Admin Next и убедитесь, что Flex Objects отображается как активный, либо посмотрите файл конфигурации:

# user/config/plugins/flex-objects.yaml
enabled: true

Шаг 2: включите директорию Contacts¶

Плагин поставляется со схемой Contacts, но директория ничего не делает, пока вы её не активируете.

В Admin Next перейдите в Plugins > Flex Objects. Найдите поле Directories, в котором перечислены все директории Flex, обнаруженные плагином в вашем проекте (встроенные, а также добавленные вами или темой в user/blueprints/flex-objects/).

Включите Contacts и нажмите Save. Под капотом это добавляет путь к схеме в конфигурацию плагина, так что если вы предпочитаете редактировать YAML напрямую, можете добавить его туда:

# user/config/plugins/flex-objects.yaml
enabled: true
directories:
  - 'blueprints://flex-objects/contacts.yaml'

После сохранения в боковой панели Admin Next появится новый пункт Contacts.

Шаг 3: загрузите тестовые данные¶

Плагин включает готовый набор данных контактов. Скопируйте его в пользовательские данные, чтобы директории было что показывать:

$ cp user/plugins/flex-objects/data/flex-objects/contacts.json user/data/flex-objects/contacts.json

Директория Contacts использует SimpleStorage, который хранит каждый объект в одном JSON-файле. Этот файл находится по пути user-data://flex-objects/contacts.json (папка user/data/flex-objects/ на диске), то есть именно там, куда попадает тестовый файл.

Очистите кэш, чтобы Grav подхватил новые данные:

$ bin/grav clear

Шаг 4: просмотрите Contacts в Admin Next¶

Вернувшись в Admin Next, нажмите пункт Contacts в боковой панели. Теперь у него есть небольшой бейдж с количеством, показывающий, сколько объектов содержит директория, а нажатие открывает вид списка.

Колонки, которые вы видите (переключатель публикации, фамилия, имя, email, сайт, теги), берутся прямо из config.admin.list.fields схемы. Это ваша рабочая таблица: с сортировкой, поиском и постраничным выводом.

Шаг 5: создайте и отредактируйте объект¶

Из вида списка:

• Чтобы отредактировать, нажмите на имя любого контакта. Форма редактирования генерируется из блока form.fields схемы, поэтому вы получаете правильные типы полей (email, url, поле тегов selectize) с валидацией.
• Чтобы создать, нажмите кнопку Add, заполните обязательные поля (фамилия, имя, email) и сохраните. Новый контакт записывается прямо в contacts.json рядом с тестовыми записями.

Вот и весь цикл работы в админке: схема один раз определяет поля, а Admin Next строит из неё вид списка и вид редактирования.

Шаг 6: отрендерите Contacts на фронтенде¶

Данные в админке — только половина дела. Вот два способа показать ваши Contacts на публичном сайте.

Вариант A: шорткод [flex-objects]¶

Самый быстрый вариант — шорткод [flex-objects]. Вставьте его в контент любой страницы, и он отрендерит коллекцию прямо там. Это безопасная для песочницы альтернатива написанию сырого Twig в контенте (песочница Twig в Grav 2.0 по умолчанию блокирует эквивалентный вызов {% render %}).

[flex-objects collection="contacts" /]

Вывод можно сузить и оформить несколькими необязательными параметрами:

[flex-objects collection="contacts" layout="cards" limit="10" sort="last_name|asc" /]

Коллекция рендерится через свой шаблон Flex flex/contacts/collection/{layout}.html.twig в вашей теме, поэтому любой уже имеющийся у вас макет коллекции продолжит работать.

Вариант B: страница flex-objects¶

Для отдельной страницы со списком (со своим маршрутом и своим шаблоном) используйте тип страницы flex-objects. Создайте страницу и задайте в её заголовке указание на директорию:

---
title: Our Contacts
flex:
  directory: contacts
---

# Our Contacts

Либо задайте шаблон страницы flex-objects напрямую. В любом случае страница рендерит коллекцию с помощью шаблонов Flex, разрешаемых из flex/{TYPE}/collection/{LAYOUT} и flex/{TYPE}/object/{LAYOUT}.

Тип страницы также понимает параметры URL directory и id, поэтому одна страница flex-objects может выводить коллекцию и открывать отдельные объекты.

Что дальше¶

Теперь у вас есть рабочая директория от начала до конца: включённая, заполненная, редактируемая в Admin Next и отрендеренная на фронтенде. Дальше:

• Понятия объясняют модель Flex (фреймворк и плагин, директории, объекты, коллекции, хранилище и индексы), чтобы использованные вами части сложились в понятную картину.
• Создание своего типа проведёт вас через написание собственной схемы с нуля, включая выбор хранилища и разрешений, который вам понадобится.