В последнее десятилетие произошел всплеск умных устройств и широко открылись различные каналы взаимодействия. Передовые технологии росли как на дрожжах. GatsbyJs — это популярный генератор статических сайтов с открытым исходным кодом в комплекте с React, GraphQL, Webpack для создания невероятно быстрых веб-сайтов. Давайте посмотрим, как мы можем объединить его с популярной CMS Drupal 8.
Монолитный против развязанного
Типичная CMS имеет объединенные серверную часть и внешний интерфейс, которые являются монолитными. Эта система помогла управлять и доставлять контент огромной пользовательской базе. Но это было много лет назад. Связанная система теперь является препятствием, поскольку бизнес должен обслуживать различные устройства и каналы, внедрять новые интерфейсные фреймворки, которые могут создавать высокопроизводительные веб-сайты.
Drupal зарекомендовал себя как универсальная CMS с ее мощными типами контента и редактором WYSIWYG. В несвязанных системах уровень представления обрабатывается уровнем Javascript, в нашем случае GatsbyJS. Drupal 8 служит серверной частью для моделирования, создания и управления контентом, а данные обслуживаются в форме API.
Системы JAMStack используют возможности крупных игроков Javascript, API и разметки. Сайт JAMstack с Drupal в качестве серверной части или безголовой CMS является ядром несвязанной архитектуры.
GatsbyJS служит во внешнем интерфейсе с мощным GraphQL для извлечения данных из серверной части Drupal. GatsbyJS внутренне использует кодовую базу React, которая упрощает работу разработчиков внешнего интерфейса.
Раздельная архитектура Drupal предлагает два ключевых преимущества по сравнению с тесно связанной архитектурой.
- Одну систему управления контентом можно использовать для обслуживания нескольких интерфейсов, например вашего сайта Gatsby, мобильного приложения и приложения Smart TV.
- Вы можете разрабатывать, изменять и обновлять внешний и внутренний интерфейсы независимо друг от друга. Обновление Drupal не требует изменения внешнего вида вашего сайта. Подробнее о несвязанной архитектуре с Гэтсби в здесь
Давайте погрузимся с короткими руками
Я настроил Drupal в своей системе с помощью Acquia dev desktop 2
Я создал базовую страницу и несколько статей. Убедитесь, что у вас включен модуль JSON: API
. Это обслуживает API-интерфейсы JSON, необходимые для внешнего интерфейса.
Чтобы проверить, что JSON: API включен и ответы JSON обслуживаются должным образом, проверьте API с любыми клиентами, такими как почтальон или любые другие остальные клиенты. Нажмите URL http://localhost:<port>/jsonapi/node/article
, и вы получите ответ JSON, как показано ниже.
Установка Гэтсби
Установите Gatsby CLI глобально, используя npm install -g gatsby-cli.
Создайте новый сайт Gatsby, используя gatsby new gatsby-site.
Перейдите в папку сайта, в нашем случае это gatsby-site. Тогда иди на gatsby develop
. Вы увидите, что сайт работает локально по адресу http://localhost:8000
Первоначальная настройка gatsby выполнена. Как я упоминал ранее, мы собираемся использовать GraphQL для получения данных вместо обычного https-запроса. Это помогает получать несколько ресурсов за одну выборку, в отличие от HTTPS-запросов. GraphQL доступен в пакете Gatsby, поэтому вам не нужно искать дальнейшую установку GraphQL. Кроме того, Gatsby предоставляет нам площадку для тестирования запросов GraphQL на http://localhost:8000/__graphql
. Чтобы связать наш сайт Drupal с нашим сайтом gatsby, откройте файл gatsby-config.js в корневой папке. Измените базовый URL-адрес, как показано ниже.
{ resolve: `gatsby-source-drupal`, options: { baseUrl: `http://localhost:<port of drupal site>/`, }, }
Давайте покажем статьи на нашей первой странице.
Импорт GraphQL и UseStaticQuery из gatsby import { useStaticQuery, graphql } from “gatsby”
.
Игровая площадка GraphQL выглядит так, как показано ниже. Вы можете разобрать ответ JSON и привязать его к HTML. Звучит просто. На самом деле, нет. Потребовалось некоторое время, чтобы правильно запросить обязательные поля для всех статей с соответствующим изображением. Вам может понадобиться некоторый опыт в правильном составлении запросов по мере увеличения сложности компонентов.
Когда у вас есть доступные данные, вы можете легко связать их с вашими компонентами реагирования и отобразить данные на сайте, что совсем несложно.
Теперь давайте приступим к странице, которую мы создали в Drupal.
Ниже вы найдете запрос для получения содержимого страницы.
{ allNodePage(filter: {title: {eq: "About US"}}) { totalCount nodes { body { value } relationships { field_text_with_image { field_text_long { value } relationships { field_image { localFile { url } } } } } title } } }
Как и раньше, привяжите соответствующие данные к нашему коду реакции, чтобы отобразить данные на странице о нас. Опытный человек может дополнительно уточнить приведенные выше запросы, чтобы получить необходимые данные. Основным преимуществом использования GraphQL вместо rest API является то, что вы можете получить несколько ресурсов с помощью одного запроса, что в случае rest API вам может потребоваться сделать 2 или 3 запроса GET.
Пожалуйста, дайте мне знать, если статья помогла вам. Удачного кодирования.
Ура !!