Учебное пособие для изучения основ Pimcore DXP

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

Я не хочу снова утомлять вас той же старой историей, просто небольшое резюме, чтобы освежить, почему мы рассматриваем Pimcore как решение для CMS \ DPX:

  • Открытый исходный код
  • Разъединенная \ Безголовая презентация
  • Движок MDM, позволяющий не тратить время на чтение \ запись данных
  • Мощный движок CMS

Это не означает, что Pimcore - средство от всех зол, но

Это правильный инструмент для тех, кто намеревается инвестировать в веб-сайт.

В этой статье я постараюсь показать все возможности Pimcore по созданию блога с нуля.

Я раскрою самую важную тему Pimcore с пошаговым объяснением.

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

ОБНОВЛЕНИЕ: Я написал первую официальную книгу о разработке Pimcore. Если вам интересно узнать, как его использовать, вы можете найти его на Amazon .

Дорожная карта

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

Эта статья разделена на следующие части:

  1. Как установить Pimcore
  2. Настройте тему (и управляйте страницами CMS)
  3. Данные блога (пользовательский ввод данных)
  4. BlogRoll (блоки и виджет для пользовательского интерфейса)

Весь исходный код доступен на GitHub (ссылка внизу).

Как установить Pimcore

Более простое решение - использовать образ докера. Вы можете использовать следующий файл для создания докеров.

Затем запустив docker-compose up, ваша среда запустится через некоторое время и загрузит все необходимые зависимости. Основная проблема, связанная с настройкой, о значении образ докера. Образ докера Pimcore - это не готовая к работе установка, а среда, подходящая для запуска среды Pimcore. Проще говоря, у вас есть веб-сервер, нужная версия PHP, все настройки выполнены, но вы должны установить Pimcore внутри контейнера.

Для установки Pimcore требуется несколько шагов, и вы можете использовать следующие команды:

# enter the container
docker exec -it pimcore-php bash


COMPOSER_MEMORY_LIMIT=-1 composer create-project pimcore/skeleton tmp
mv tmp/.[!.]* .
mv tmp/* .
rmdir tmp

#run installer (need database credential, creates admin user)
./vendor/bin/pimcore-install --mysql-host-socket=mysql --mysql-username=pimcore --mysql-password=pimcore --mysql-database=pimcore

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

Самая сложная часть - установка. Когда мы создаем папку для установки, инструмент командной строки делает что-то вроде:

www\html
     +- your folder
         + web
         + other pimcore folder

Папка /web - это папка, которая содержит файлы начальной загрузки и должна быть настроена как корень документа. Поскольку стандартный образ Pimcore использует […]/www/html/web в качестве корня документа, сценарий просто перемещает файлы на один шаг назад, чтобы избежать изменений в настройках apache.

С этого момента вы можете перемещаться по Pimcore в любом браузере по адресу HTTP: // localhost: 7080 / admin.

Отображение объема

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

pimcore
 + config
 + logs
 + www
mysql
 + data
 + config
redis
 + config
docker-compose.yml

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

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

Настройка вашей темы

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

Первый момент - создать файл макета и шаблон по умолчанию.

В этом шаблоне мы видим:

  • помощник $this->template(), который в данном случае отображает некоторые представления, верхний и нижний колонтитулы
  • $this->slots()->output(‘_content’) , который делегирует странице определение содержимого

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

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

Этот фрагмент вводит «editables »; эти объекты работают в режиме редактирования и просмотра. Например, используя $ this-input («name»), вы добавляете текстовое поле, которое пользователь может заполнить в режиме редактирования, а в режиме просмотра текст используется для визуализации страницы. Используя редактируемый блок, вы получаете результат тиражирования формата.

Создание макета Bootstrap

В предыдущем примере мы видим редактор в действии. Мы смогли добавить набор абзацев на страницу в режиме WYSIWYG. Это очень круто, но на современных веб-сайтах нам нужно больше гибкости. Чтобы доказать, как легко создать шаблон, я работал над приведенным выше примером, получая макет сетки начальной загрузки.

Основным является итерация по набору строк (блоков), а затем итерация по набору столбцов (внутренних блоков). Затем я даю возможность добавить любой объект внутри ячейки матрицы. Легко, правда?

Обратите внимание на часть с условиями print элемента таблицы. Это связано с тем, что в режиме редактирования отсутствует поддержка bootstrap 4, поэтому я возвращаюсь к таблице для разделения горизонтального пространства.

Еще одна сложная часть - вычисление классов CSS col. Когда деление неточно, я выкладываю остаток на правый элемент. Например, если у меня 5 столбцов, 12/5 = 2, и у меня осталось 2 столбца, поэтому у меня будут первые 3 столбца с классом col-2 и последние два с длиной col-3.

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

Результат в редакторе следующий:

И вы можете добавить, сколько строк и столбцов хотите.

Верхний и нижний колонтитулы

Я создал два шаблона для верхнего и нижнего колонтитула, но делаю их параметрическими.

Внутри Settings > WebsiteSettings я добавил нужные мне переменные:

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

Данные блога

Для статьи в блоге я создал два разных типа объектов:

  • Статья
  • Категория

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

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

Решение состоит из двух этапов.

  1. Создайте маршрутизацию
  2. Создание шаблона

Для создания собственного маршрута вам просто нужно ввести свои настройки в админке.

Ввод очень простой, вам просто нужно указать:

  • название правила
  • регулярное выражение, которое захватывает ссылку
  • Название параметров, извлеченных из ссылки
  • Правило генерации URL из параметров

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

В этом примере я связал адрес /blog/{slug} с BlogController и передал ему переменную slug.

По соглашению BlogController использует шаблон default.html.php внутри папки блога в the /app/resources/views folder.

Следующий код реализует контроллер и выбирает элементы на основе поля slug.

Для отправки данных в шаблон используется метод прямой установки свойства с помощью $this->view->variablename

Следующий код реализует отрисовку страницы.

После этого шага у нас будет видимая страница блога.

Блогролл

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

Мы собираемся создать виджет (кирпич на сленге Pimcore), который можно будет добавить на любую страницу CMS. Этот виджет будет параметрическим и будет работать в режиме WYSIWYG. Жесткий? Не так много.

Нам нужно выполнить несколько шагов:

  • Создайте класс кирпича (он должен находиться в папке /src/AppBundle/Document/Areabrick/)
  • Включить кирпич на странице пакетов
  • Перезагрузить кеш
  • Создайте два шаблона (один для режима редактирования и один для режима рендеринга)

Начнем с более простого.

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

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

После этого шага требуется перезагрузка кеша.

Поскольку кирпич активен, вы можете выбрать его в CMS.

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

Результат в режиме редактирования такой:

А в режиме просмотра страница выглядит примерно так:

Для получения такого результата я использовал следующие шаблоны.

Изменить шаблон

В шаблоне редактирования мы используем входные данные, чтобы получить ограничение на количество статей и режим просмотра. Команда $this->select отображает раскрывающееся меню с двумя вариантами.

Просмотреть шаблон

Шаблон представления выбирает статьи блога и включает правильный шаблон в зависимости от выбора пользователя. Записи также могли быть отфильтрованы в действии контроллера. Список статей передается как аргумент в шаблон (который управляет только логикой представления).

Шаблон списка

Разница между списком и сеткой - это просто некоторый класс CSS и разметка, поэтому я добавляю сюда только шаблон списка (весь код, доступный в GitHub).

Важной частью этого сценария является использование $this->path(), который динамически создает URL-адрес на основе настраиваемого маршрута (устойчивый к изменениям маршрута). Еще один хороший момент - использование изображений. Я добавил возможность создания миниатюры для изображения, поэтому с помощью $entry->getImage()->getThumbnail(“small-grid”) путь будет автоматически. Миниатюра создается Pimcore без каких-либо усилий с вашей стороны, и вам просто нужно добавить предустановку.

Что взять домой

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

Кстати, вам понадобится дополнительная работа вначале, чтобы получить что-то полезное. Благодаря гибкости Pimcore, если вы хорошо работаете, все время, которое вы вкладываете в настройку, избавляет от многих проблем позже, и вы сможете масштабироваться без каких-либо проблем. В любом случае, если вы ищете быстрый и грязный подход, например, загрузите тему и через день подключитесь к Интернету ... ну, это не тот инструмент.

В этой статье мы изучили основы и основы создания веб-сайтов, охватив все темы для начала работы в нем.

Мы рассмотрели:

  • Сущности (объект данных \ классы)
  • CMS Pages (документы)
  • Шаблоны (макеты и страницы)
  • Виджеты (кирпичи)
  • Основы маршрутизации и MVC
  • Установка

Помните также, что это решение основано на контейнерах, это хорошо, потому что вы можете легко развернуть его в облачных решениях, таких как Google Cloud, Amazon AWS, Microsoft Azure или IBM Cloud Stories.

Теперь вы можете начать играть с Pimcore!

Конкретный способ сказать мне спасибо

Если вам понравилась моя статья, вы можете подписаться по этой ссылке, и Medium вернет мне кредит. Это мелочь, которая побудит меня идти вперед. Это работает, даже если вы уже являетесь платным клиентом, поэтому не сомневайтесь, я верну вам много других статей!

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

Весь исходный код размещен на GitHub, и решение готово к работе одним щелчком мыши (данные с исходным кодом - не лучшая практика, но полезно, чтобы вы могли протестировать то, что вы видите, не теряя времени).