Разработка статического блога на Gatsby и Strapi
Статические веб-сайты содержат страницы с неизменным содержимым. Технически — это набор HTML-файлов, которые, для каждого посетителя сайта, выглядят одинаково. В отличие от динамических веб-сайтов, для разработки таких сайтов не нужно серверное программирование или базы данных. Публикация статического веб-сайта проста: файлы выгружают на обыкновенный веб-сервер или в некое хранилище. Два основных преимущества статических веб-сайтов — это безопасность и скорость. Тут нет базы данных, поэтому отсюда нечего красть, и тут нет нужды программно генерировать страницу для каждого запроса, что ускоряет работу.
Для того чтобы упростить создание статических веб-сайтов, создано множество опенсорсных инструментов. Например, это Jekyll, Hugo, Hexo, и другие. Работа по подготовке содержимого сайта ведётся путём редактирования чего-то вроде файлов с разметкой, или через некое API для управления контентом. После того, как данные готовы к публикации, генератор берёт эти данные, внедряет их в шаблоны и создаёт множество HTML-файлов, готовых для публикации. 
Сегодня мы расскажем о быстрой разработке проектов с помощью Gatsby — генератора статических прогрессивных веб-приложений, и Strapi — системы управления контентом. В результате после того, как вы освоите это руководство, у вас будет работающий статический блог и масса идей, касающихся его развития.
Статические веб-сайты и прогрессивные веб-приложения
Полагаем, прежде чем продолжать, стоит сказать пару слов о прогрессивных веб-приложениях (Progressive Web Apps, PWA). Это — веб-приложения, интенсивно использующие JavaScript, которые отличаются надёжностью, быстротой и привлекательным внешним видом. PWA, благодаря обеспечиваемой ими скорости работы со страницами, и тому, что пользователям удобно с ними взаимодействовать, стали стандартным способом построения веб-интерфейсов. В результате появилось множество фронтенд-фреймворков, таких, как Angular, Vue, и React.
Мы, зная о плюсах статических веб-сайтов и PWA, задались идеей найти способ использовать одновременно и то и другое. Инструмент, который это позволяет, называется Gatsby.
Что такое Gatsby?
Так как проекты, созданные с помощью Gatsby, основаны на React, их страницы, при взаимодействии с ними пользователя, не перезагружаются, что делает такие проекты очень быстрыми. Gatsby поддерживает большой набор плагинов, которые позволяют, в частности, использовать данные из различных источников (это, например, markdown-файлы, различные системы управления контентом, и так далее). Центром системы данных Gatsby является интерфейс «узлов», которые используются для моделирования данных, поступающих в Gatsby.
Этот проект создал Кайл Мэтьюз, он официально выпущен в июле 2017-го и уже используется десятками компаний.
Как уже стало понятно, Gatsby, для того, чтобы он мог генерировать HTML-файлы, нужно откуда-то брать данные для них. В нашем случае источником данных будет Strapi.
Что такое Strapi?
Strapi — это фреймворк для управления контентом, основанный на Node.js. Он позволяет быстро разрабатывать API для работы с данными и занимает промежуточное положение между фреймворком для Node.js и CMS без пользовательского интерфейса. Strapi позволяет разрабатывать API очень быстро, что экономит время.
Strapi имеет расширяемую систему плагинов, он отличается большим набором встроенных возможностей. Среди них — панель администратора, система управления аутентификацией и разрешениями, средства управления контентом, генератор API и так далее.
Strapi — это опенсорсный проект, что выгодно отличает его от других CMS. В частности, это означает, что, во-первых, он полностью бесплатен, а во-вторых — то, что компания, выбравшая Strapi, разворачивает CMS на собственных серверах, то есть данные компании остаются под её полным контролем. Кроме того, Strapi можно настраивать и расширять благодаря системе плагинов.
Описав наши инструменты, приступим к разработке статического блога.
Настройка API с помощью Strapi
Воспользуемся возможностями Strapi для разработки API и добавим в систему данные, которые позже превратятся в страницы блога.
▍Установка Strapi
Для работы Strapi нужны Node 8 (или выше) и MongoDB. Если в вашей системе всё это имеется, можно приступать к установке Strapi с использованием npm:
Обратите внимание на то, что Strapi v3 всё ещё находится на стадии альфа-версии, но нам это подойдёт.
▍Создание проекта Strapi
Создадим директорию gatsby-strapi-tutorial :
Создадим каркас API внутри этой директории, для чего сначала перейдём в эту директорию, а потом выполним там соответствующую команду Strapi:
▍Запуск сервера
Для запуска сервера Strapi сначала перейдём в соответствующую подпапку директории проекта:
Затем запустим сервер, основанный на Node.js:
Теперь, если всё сделано правильно, можно будет посетить панель администрирования проекта, которая расположена по адресу http://localhost:1337/admin.
▍Создание первого пользователя
Добавим первого пользователя со страницы регистрации.
▍Создание типа контента
API Strapi основано на структурах данных, которые называются типами контента (Content Type). Это — эквивалент моделей во фреймворках и типов контента в WordPress.
▍Добавление материалов статей
Добавим в базу данных несколько статей. Для того чтобы создать статью, выполните следующую последовательность действий:
▍Настройка доступа
Доступ к API автора так же ограничен. Разрешите анонимный доступ, выбрав действие find (в разделе Users & Permissions ) и сохранив изменения.
Разработка статического веб-сайта
Теперь, когда API готово, можно приступать к разработке статического веб-сайта.
▍Установка Gatsby и создание проекта
Установим Gatsby CLI следующей командой:
В ранее созданной папке gatsby-strapi-tutorial создадим новый блог:
▍Запуск сервера Gatsby в режиме разработки
Перейдём в папку проекта:
После этого посмотреть веб-сайт, созданный Gatsby, можно будет, перейдя по адресу http://localhost:8000/.
▍Установка плагина для работы с источником данных Strapi
Данные, которые являются основой статического сайта, могут поступать из разных источников. Например, это markdown-файлы, CSV-файлы, материалы из WordPress (работа с которыми возможна благодаря плагину JSON REST API), и так далее.
Для того чтобы Gatsby успешно делал свою работу, ему нужно уметь общаться с различными источниками данных. Поэтому у Gatsby существует особый слой — слой данных, основанный на GraphQL.
Для того, чтобы подключить Gatsby к источнику данных, требуется плагин, предназначенный для работы с этим источником данных. Такой плагин можно разработать самостоятельно, либо подобрать из уже существующих. В этом примере мы, в качестве источника данных, будем использовать Strapi, а значит, нам понадобится плагин источника данных для API, построенных с помощью Strapi. Мы уже разработали такой плагин.
Этот плагин нуждается в некоторой настройке. Замените содержимое файла gatsby-config.js на следующее:
Теперь перезапустите сервер для того, чтобы позволить Gatsby воспринять изменения.
▍Список статей
Для начала нам хочется вывести список статей. Для того чтобы это сделать, добавьте следующее содержимое в существующий файл домашней страницы src/pages/index.js :
Для того, чтобы упростить разработку запросов GraphQL, можно воспользоваться соответствующим интерфейсом Gatsby. Взгляните на него и попробуйте создать несколько запросов.
▍Страница просмотра статьи
Теперь то, что мы делаем, уже похоже на блог, и это хорошо. Однако одной важной вещи всё ещё не хватает: страницы просмотра статьи.
Создадим шаблон, содержащий запрос GraphQL и зададим отображаемое содержимое. Делать это будем в файле src/templates/article.js :
Смотрится хорошо, но в данный момент Gatsby не знает, когда нужно выводить этот шаблон. Для каждой статьи нужен собственный URL. Сообщим Gatsby о новых URL с помощью функции createPage.
Перезапустите сервер Gatsby. Теперь ссылки на статьи должны оказаться рабочими, щелчки по ним будут открывать страницы статей.
▍Страница автора
Статьи пишут авторы. Они заслуживают отдельной страницы. Процесс по созданию страницы автора очень похож на процесс создания страницы статьи. Для начала создадим шаблон в файле src/templates/user.js :
Теперь обновим файл gatsby-node.js для создания соответствующих ссылок:
И наконец, перезагрузим сервер и посетим страницу автора, перейдя на неё со страницы просмотра статьи по соответствующей ссылке.
Итоги
Примите поздравления! Только что вы успешно создали невероятно быстрый и простой в управлении блог! Так как управлением содержимым занимается Strapi, авторы могут писать статьи с помощью приятного интерфейса, а разработчику остаётся лишь периодически перестраивать блог для обновления его содержимого.
Вы вполне можете продолжить работу над этим проектом для того, чтобы изучить полезные возможности Gatsby и Strapi. Сюда можно добавить список авторов, категории статей, систему комментирования на базе Strapi API или Disqus. Кроме того, вы можете, пользуясь предложенной здесь методикой, создавать и другие веб-сайты (интернет-магазины, корпоративные сайты, и так далее).
Когда ваш проект будет готов к работе, вы, возможно, захотите выложить его в интернет. Веб-проекты, сгенерированные Gatsby, можно публиковать, пользуясь средствами сервисов для размещения статических сайтов, таких, как Netlify, S3/Cloudfront, страницы GitHub, страницы GitLab, Heroku, и так далее. API Strapi — это система, основанная на Node.js, поэтому оно может быть развёрнуто на базе Heroku или с используемой любой виртуальной машины Linux с установленным на ней Node.js.
Уважаемые читатели! Как вы создаёте статические веб-сайты? Планируете ли вы использовать связку Gatsby-Strapi в своих проектах?
Введение в Гэтсби
Это один из инструментов, который позволяет вам использовать набор технологий и практик, известных под общим названиемJAMstack.
Гэтсби сейчас один из самых крутых ребят в области разработки фронтендов. Почему? Думаю, причины следующие:
Все это отличные моменты, и на Гэтсби определенно стоит взглянуть.
Как это работает?
С Gatsby ваши приложения создаются с использованием компонентов React.
Контент, который вы будете отображать на сайте, обычно пишется с использованием Markdown, но вы можете использовать любой источник данных, например, автономную CMS или веб-службу, такую как Contentful.
Гэтсби создает сайт и компилирует его в статический HTML-код, который можно развернуть на любом веб-сервере, который вы хотите, напримерNetlify, AWS S3, GitHub Pages, обычные хостинг-провайдеры, PAAS и другие. Все, что вам нужно, это место, которое обслуживает простые HTTP-страницы и ваши активы для клиента.
Я упомянул в списке прогрессивные веб-приложения. Gatsby автоматически создает ваш сайт как PWA с сервисным работником, который ускоряет загрузку страницы и кэширование ресурсов.
Вы можете расширить функциональность Gatsby с помощью плагинов.
Установка
Вы можете установить Gatsby, запустив его в своемТерминал:
Это устанавливает gatsby Утилита CLI.
(когда выходит новая версия, обновите ее, снова вызвав эту команду)
Вы создаете новый сайт «Hello World», запустив
Эта команда создает новый сайт Gatsby в mysite папку, используястартердоступны наhttps://github.com/gatsbyjs/gatsby-starter-hello-world.
Запуск сайта Гэтсби
После того, как терминал завершит установку стартера, вы можете запустить сайт, позвонив по телефону
который запустит новый веб-сервер и будет обслуживать сайт через порт 8000 на локальном хосте.
А вот и наш стартер Hello World в действии:
Осмотр сайта
Если вы откроете сайт, который создали в своем любимом редакторе кода (я используюКод VS), вы найдете 3 папки:
Например, я создал second.js файл с таким содержанием:
Ссылки на страницы
Вы можете связать эти страницы, импортировав предоставленный Gatsby компонент React под названием Link :
и используя его в своем компонентеJSX:
Добавление CSS
Вы можете импортировать любой файл CSS с помощью импорта JavaScript:
Вы можете использовать стили React:
Использование плагинов
Gatsby предлагает множество вещей из коробки, но многие другие функции предоставляютсяплагины.
Есть 3 вида плагинов:
Некоторые часто используемые плагины:
Например, вы можете установить плагин Catch Links:
В gatsby-config.js (создайте его, если у вас его нет, в корневой папке сайта), добавьте плагин в plugins экспортированный массив:
Вот и все, плагин сделает свою работу.
Создание статического веб-сайта
Когда вы закончите настройку сайта и захотите создать рабочий статический сайт, вы вызовете
На этом этапе вы можете убедиться, что все работает так, как вы ожидаете, запустив локальный веб-сервер с помощью
что сделает сайт максимально приближенным к тому, как вы его видите в рабочей среде.
Развертывание
В зависимости от выбранного вами решения вам потребуются разные шаги, но обычно вы отправляете в репозиторий Git и позволяете обработчикам Git после фиксации выполнять работу по развертыванию.
Возможности Gatsby.JS для блогов и интернет-магазинов
Для контентных сайтов использование данного фреймворка приводит к
Для интернет магазинов с pre-fetch’ингом страниц пользователи мнгновенно перемещаются по страницам сайта, быстрее находят формы заявок даже на медленном мобильном соединении, что для ecommerce прямым образом влияет на конверсию лидов.
Быстрая скорость загрузки страниц
Теперь не нужно обращаться к экспертам в области настройки сверхбыстрого сайта.
Как было раньше: блогер или владелец интернет-магазина устанавливает сайт на cms на хостинг. Блог или магазин начинает раскручиваться, скорость загрузки страниц сайта замедляется, позиции по SEO и продажам падают и приходится обращаться к экспертам за такими процедурами как:
В конце этого пути чаще всего приходит понимание того, что с ростом ресурса нужно отказываться от cms и переходить на какую-то кастомную разработку, если хочется быстрой загрузки/разработки и вообще остаться в бизнесе.
С Gatsby.js все изменилось, так как данный фреймворк проводит сборку проекта в файлы которые могут быть размещены/доступны на любом ФАЙЛОВОМ хостинге и скорость загрузки сайта будет молниеносной.
Простота использования. Без серверов. Без баз данных.
Размещение сайта со стандартной архитектурой (веб-приложение на php или cms+БД) на хостинге затратен по деньгам и времени на настройку и всегда есть риск отказа в случае если контент «зайдет», пойдет большой трафик, будет большое кол-во запросов.
При размещении сайта со стандартной архитектурой (веб-приложение на php или cms+БД) обычно требуется зайти в консоль управления хостингом, создать бд, пользователей/права, решить вопрос подключения: будет ли БД доступна извне или локально. По нашему опыту такая БД обычно справляется с небольшим кол-вом соединений(по умолчанию 50) и естественно имеет ограничение по скорости в зависимости от хостинга.
Gatsby полностью это решает с serverless архитектурой. Такой сайт никогда не падает от таких скачков.
Применение новых фреймворков в существующих проектах обычно ограничено в связи с тем, что приходится создавать проект с нуля. С Gatsby это не совсем так. Gatsby отлично работает с существующими cms: WordPress, Drupal, Contentful, Shopify, etc. Кроме того источниками для сайта могут быть markdown файлы, csv.
Также есть поддержка Restful API, GraphQL.
Технологии
Данный фреймворк построен на JAMStack архитектуре: является SSG (Static Site Generator) и следующих современных технологиях, включающих React, Webpack, GraphQL, современный JavaScript.
Для обычного блога серьезной разработки не потребуется и можно начать с готовых шаблонов. Для более серьезных проектов использование React по состоянию на 2019 год является более чем оправдано. Можно взглянуть на отзывы разработчиков по фреймворкам на State of Javascript и React там на первом месте по «Использовал и буду использовать дальше» 
Безопасность
Сайты на Gatsby.JS более безопасны т.к при их размещении не используются веб-сервера в трационном понимании.
Весь контент компилируется на этапе сборке проекта, и поэтому нет необходимости париться по поводу несакционированного доступа к БД, веб-приложению, консоли хостинг провайдера.
Руководство по Gatsby
1. Знакомство со строительными блоками Gatsby
В предыдущем разделе вы подготовили локальную среду разработки, установив необходимое программное обеспечение и создав свой первый сайт Gatsby с помощью стартера “hello world”. Теперь погрузитесь глубже в код, сгенерированный этим стартером.
Использование стартеров Gatsby
В нулевой части учебника вы создали новый сайт на основе стартера “hello world”, используя следующую команду:
При создании нового сайта на Gatsby можно использовать следующую структуру команд для создания нового сайта на основе любого существующего стартера Gatsby:
Если вы опустите URL-адрес в конце, Gatsby автоматически создаст сайт для вас на основе стартера по умолчанию. Для этого раздела учебника придерживайтесь сайта ”Hello World”, который вы уже создали в нулевой части учебника. Вы можете узнать больше об изменении стартеров в документации.
Знакомство со страницами Gatsby
Gatsby использует горячую перезагрузку, чтобы ускорить процесс разработки. По сути, при запущенном сервере разработки Gatsby, каждый раз, когда вы сохраняете файл, файлы сайта Gatsby “просматриваются” в фоновом режиме и ваши изменения немедленно отображаются в браузере. Вам не нужно вручную обновлять страницу или перезапускать сервер разработки.
Данные в Gatsby
В следующих четырех частях учебника (включая эту) вы погрузитесь в слой данных Gatsby, который является мощной функцией Gatsby, которая позволяет легко создавать сайты из Markdown, WordPress, headless CMSs и других источников данных всех вкусов.
Слой данных Gatsby работает на GraphQL. О GraphQL можно прочитать статью Как использовать GraphQL.
Веб-сайт состоит из четырех частей: HTML, CSS, JS и данных. Давайте узнаем, как использовать данные на сайтах Гэтсби.
Для целей работы в Гэтсби, однако, более полезным ответом является “все, что живет вне компонента React”.
До сих пор вы писали текст и добавляли изображения непосредственно в компоненты. Что является отличным способом для создания многих веб-сайтов. Но часто требуется хранить данные вне компонентов, а затем вносить их в компонент по мере необходимости.
Если вы создаете сайт с помощью WordPress (так что у других участников есть хороший интерфейс для добавления и поддержания контента) и Gatsby, данные для сайта (страницы и сообщения) находятся в WordPress, и вы по мере необходимости извлекаете эти данные в свои компоненты.
Данные также могут находиться в таких типах файлов, как Markdown, CSV и т. д. а также базы данных и API всех видов.
Слой данных Гэтсби позволяет извлекать данные из этих (и любых других источников) непосредственно в ваши компоненты — в нужной вам форме.
Использование неструктурированных данных или GraphQL
Обязатеьно ли использовать GraphQL и плагины source для извлечения данных на сайты Gatsby?
Необязательно! Вы можете использовать API createPages для извлечения неструктурированных данных на страницы Gatsby напрямую, а не через слой данных GraphQL. Это отличный выбор для небольших сайтов, в то время как GraphQL и исходные плагины могут помочь сэкономить время на более сложных сайтах.
Смотрите руководство Using Gatsby without GraphQL, чтобы узнать, как получить данные на ваш Gatsby сайт с помощью API node createPages и посмотреть пример сайта!
Когда использовать неструктурированные данные, а когда GraphQL?
Как слой данных Gatsby использует GraphQL для извлечения данных в компоненты
Существует множество вариантов загрузки данных в компоненты React. Одной из самых популярных и мощных из них является технология GraphQL.
GraphQL был изобретен в Facebook, чтобы помочь инженерам продукта собрать необходимые данные в компоненты.
Gatsby использует GraphQL, чтобы позволить компонентам объявлять необходимые им данные.
Создание нового примера сайта
Создайте еще один новый сайт для этой части руководства. Вы собираетесь создать блог Markdown под названием “Панды едят много”. Он посвящен демонстрации лучших фотографий и видео панд, поедающих много пищи. По пути вы будете погружать пальцы ног в GraphQL и поддержку Markdown от Gatsby.
Затем установите некоторые другие необходимые зависимости в корне проекта. Вы будете использовать тему Typography “Kirkham”, и вы попробуете библиотеку CSS-in-JS, “Emotion”:
Создайте сайт, подобный тому, что вы закончили в третьей части. Этот сайт будет иметь компонент макета и два компонента страницы:
Ваш первый запрос GraphQL
страницы about.js (заголовок страницы).
Но что делать, если вы захотите изменить название сайта? Вам придется искать заголовок во всех ваших компонентах и редактировать каждый экземпляр. Это одновременно громоздко и подвержено ошибкам, особенно для больших и более сложных сайтов. Вместо этого вы можете хранить заголовок в одном месте и ссылаться на него из других файлов; измените заголовок в одном месте, и Gatsby извлечет ваш обновленный заголовок в файлы, которые ссылаются на него.
Перезагрузите сервер разработки.
Использование запроса страницы
Теперь название сайта доступно для запроса. Добавьте его в файл about.js используя запрос страницы:
Сохраните файл и вы увидите следующее:
Использование StaticQuery
Внесите некоторые изменения в файл src/components/layout.js для использования хука useStaticQuery и ссылки
Зачем использовать здесь два разных запроса? Эти примеры были кратким введением в типы запросов, как они форматируются и где их можно использовать. А пока имейте в виду, что запросы к страницам могут делать только страницы. Нестраничные компоненты, такие как Layout, могут использовать StaticQuery. Часть 7 учебника объясняет их более подробно.
Один из основных принципов Gatsby заключается в том, что создатели нуждаются в непосредственной связи с тем, что они создают (hat tip to Bret Victor). Другими словами, когда вы вносите какие-либо изменения в код, вы должны немедленно увидеть эффект этого изменения. Вы манипулируете входными данными Gatsby и видите на экране новый вывод.
Плагины Source
Из этого туториала вы узнаете, как использовать GraphQL и плагины source для загрузки данных на сайт Gatsby. Однако прежде чем вы узнаете об этих плагинах, вы должны знать, как использовать инструмент GraphiQL, который поможет вам правильно структурировать ваши запросы.
Введение в GraphiQL
Просмотрите встроенный сайт “тип” и посмотрите, какие поля доступны на нем — включая объект siteMetadata, который вы запрашивали ранее. Попробуйте открыть GraphiQL и поиграть с вашими данными! Нажмите Ctrl + Space (или используйте Shift + Space в качестве альтернативного сочетания клавиш), чтобы открыть окно автозаполнения, и Ctrl + Enter, чтобы запустить запрос GraphQL. В оставшейся части урока вы будете использовать GraphiQL намного больше.
Использование обозревателя GraphiQL
Обозреватель GraphiQL позволяет интерактивно создавать полные запросы, щелкая по доступным полям и входным данным без повторяющегося процесса ввода этих запросов вручную.
Данные на сайты Gatsby могут поступать из любого места: API, баз данных, CMS, локальных файлов и т. д.
Плагины Source извлекают данные из своего источника. Например, source плагин filesystem знает, как извлечь данные из файловой системы. Плагин WordPress знает, как получить данные из API WordPress.
Добавьте gatsby-source-filesystem и изучите, как он работает.
Во-первых, установите плагин в корень проекта:
Затем добавьте его в файл gatsby-config.js :
Сохраните это и перезагрузите сервер разработки gatsby. Затем снова откройте GraphiQL.
Щелкните раскрывающийся список allFile. Поместите курсор после allFile в область запроса, а затем введите Ctrl + Enter. Это позволит предварительно заполнить запрос на идентификатор каждого файла. Нажмите кнопку “Play”, чтобы выполнить запрос.
На панели проводника поле id было выбрано автоматически. Сделайте выбор для большего количества полей, установив соответствующий флажок поля. Нажмите кнопку “Play”, чтобы снова запустить запрос с новыми полями.
Кроме того, можно добавить поля с помощью сочетания клавиш автозаполнения (Ctrl + пробел).
Попробуйте добавить несколько полей в запрос, нажимайте Ctrl + Enter каждый раз, чтобы повторно выполнить запрос. Вы увидите обновленные результаты запроса:
Создание страницы с помощью запросов GraphQL
Создание новых страниц с помощью Gatsby часто начинается в GraphiQL. Сначала вы набрасываете запрос данных, играя в GraphiQL, а затем копируете его в страницу компонента React, чтобы начать построение пользовательского интерфейса.
Строка console.log(data) часто полезна при создании нового компонента для вывода данных, которые вы получаете из запроса GraphQL, чтобы вы могли исследовать данные в консоли браузера во время построения пользовательского интерфейса.
Если вы зайдете на новую страницу в /my-files/ и откроете консоль браузера, вы увидите что-то вроде:
Форма данных совпадает с формой запроса GraphQL.
Добавьте некоторый код к компоненту, чтобы распечатать данные файла.
А теперь посетите http://localhost:8000/my-files …
Теперь вы узнали, как плагины source приносят данные в систему данных Gatsby. В следующем уроке вы узнаете, как плагины transformer преобразуют необработанный контент, который приносят Плагины source. Комбинация плагинов source и плагинов transformer может обрабатывать все источники данных и преобразования данных, которые могут потребоваться при создании сайта Gatsby. Узнайте о плагинах transformer в шестой части этого руководства.
Плагины Transformer
В предыдущем уроке было показано, как плагины source доставляют данные в систему данных Gatsby. В этом уроке вы узнаете, как плагины transformer преобразуют исходное содержимое, полученное с помощью плагинов source. Комбинация плагинов source и плагинов transformer может обрабатывать все источники данных и преобразовывать данные, которые могут потребоваться при создании сайта на Gatsby.
Часто формат данных, которые вы получаете от source плагинов, не является тем, что вы хотите использовать для создания своего веб-сайта. Source плагин filesystem позволяет запрашивать данные о файлах, но что делать, если вы хотите запросить данные внутри файлов?
Чтобы сделать это возможным, Gatsby поддерживает плагины transformer, которые берут сырой контент из source плагинов и преобразуют его в нечто более полезное.
Возьмем, например, файлы markdown. В markdown удобно писать статьи, но когда вы создаете страницу с ним, вам нужно, чтобы markdown был преобразован в HTML.
Добавьте файл markdown на свой сайт по адресу src/pages/sweet-pandas-eating-sweets.md (это станет вашим первым markdown постом в блоге) и узнайте, как преобразовать его в HTML с помощью плагинов transformer и GraphQL.
Добавьте плагин transformer, который может преобразовывать файлы markdown:
Затем добавьте его в gatsby-config.js :
Перезагрузите сервер разработки, затем обновите (или откройте снова) GraphiQL и посмотрите на автозаполнение.
Создание списка файлов markdown вашего сайта в src/pages/index.js
Теперь вам нужно будет создать список ваших файлов markdown на первой странице. Как и во многих блогах, вы хотите, чтобы в конечном итоге список ссылок на первой странице указывал на каждый пост в блоге. С помощью GraphQL вы можете запросить текущий список записей блога markdown, так что вам не нужно будет поддерживать список вручную.
Теперь первая страница должна выглядеть так:
Выглядит великолепно! Вот только … порядок постов неправильный.
Но это легко исправить. При запросе соединения определенного типа вы можете передать в запрос GraphQL множество аргументов. Вы можете сортировать и фильтровать узлы, задавать количество узлов, которые нужно пропустить, и выбирать предел количества узлов, которые нужно извлечь. С помощью этого мощного набора операторов вы можете выбрать любые данные, которые вы хотите — в нужном вам формате.
Попробуйте открыть GraphiQL и поиграть с различными вариантами сортировки. Вы можете сортировать соединение allFile вместе с другими соединениями.
Для получения дополнительной документации по наши операторы запросов, исследовать наш справочник GraphQL.
Это здорово! Вы только что создали красивую index страницу, где вы запрашиваете свои файлы markdown и создаете список заголовков и выдержек из записей в блоге. Но вы не хотите просто видеть выдержки, вам нужны реальные страницы для ваших файлов markdown.
Программное создание страниц из данных
В предыдущем руководстве вы создали красивую index страницу, которая запрашивает файлы markdown и создает список заголовков и выдержек из записей блога. Но вам нужны не просто выдержки, а реальные страницы для ваших файлов markdown.
Создание слагов для страниц
Чтобы создать новую страницу нужно выполнить два шага:
Эта функция onCreateNode будет вызываться Gatsby всякий раз, когда создается (или обновляется) новый узел.
Остановите и перезапустите сервер разработки. Как только вы это сделаете, вы увидите, что довольно много вновь созданных узлов войдут в консоль терминала.
В следующем разделе вы будете использовать этот API, чтобы добавлять слаги для ваших Markdown страниц MarkdownRemark узлов.
После перезагрузки сервера разработки вы должны увидеть относительные пути для двух файлов markdown, напечатанных на экране терминала.
Теперь вам придется создавать слаги. Поскольку логика создания слагов из имен файлов может быть сложной, плагин gatsby-source-filesystem поставляется с функцией для создания слагов. Давайте воспользуемся этим.
Функция обрабатывает поиск родительского узла File вместе с созданием слага. Запустите сервер разработки еще раз, и вы увидите, что в терминал вошли два слага, по одному для каждого файла markdown.
Перезагрузите сервер разработки и откройте или обновите GraphiQL. Затем запустите этот запрос GraphQL, чтобы увидеть ваши новые слаги.
Теперь, когда слаги созданы, вы можете создавать страницы.
Создание страниц
Как уже упоминалось во введении к этой части руководства, шагами по программному созданию страниц являются:
Приведенный выше код является первым шагом для создания страниц из вашего markdown, поскольку вы используете предоставленную функцию graphql для запроса созданных вами слагов markdown. Затем вы выводите результат запроса, который должен выглядеть подобным образом:
Для создания страниц вам понадобится еще одна вещь помимо слага: компонент шаблона страницы. Как и все в Gatsby, программные страницы питаются компонентами React. При создании страницы необходимо указать, какой компонент использовать.
Затем измените gatsby-node.js
Это немного скучно и не то, что вы хотите. Теперь вы можете получить данные из вашего поста markdown. Измените src/templates/blog-post.js следующим образом:
В этой части урока вы изучили основы построения с помощью слоя данных Gatsby. Вы узнали, как создавать и преобразовывать данные с помощью плагинов, как использовать GraphQL для отображения данных на страницы, а затем как создавать компоненты шаблонов страниц, в которых запрашиваются данные для каждой страницы.
Автор injashkin. VKontakte
