Связывание вашего сайта Gatsby с вашим блогом на Medium
Привет, ребята,
Спасибо, что прочитали мой первый пост на Medium. Это просто краткий пост, чтобы объяснить, как я подключил свой веб-сайт Gatsby/React (https://www.conbailey.com/blog), чтобы отобразить список моих сообщений на Medium, а затем связать каждый элемент списка с полной статьей/сообщением.
Шаг 1: Установите плагин gatsby-source-medium для зависимостей вашего проекта. Для этого вам нужно будет открыть терминал вашего компьютера, затем перейти в каталог проекта Gatsby и запустить следующую командную строку: «npm install — save gatsby-source-medium».
Затем откройте папку «gatsby-config.js» в вашем проекте и вставьте следующий код в раздел «плагины»:
плагины: [ { разрешить: `gatsby-source-medium`, параметры: {имя пользователя: `имя пользователя/публикация`, ограничение: 200, }, }, ]
Это должно выглядеть следующим образом. На этом установка будет завершена.
Шаг 2: Создайте новую страницу в приложении Gatsby. Я назвал свой файл «mediumblog.js». Здесь мы собираемся перечислить все наши посты на Medium.
Добавьте следующие строки кода вверху страницы.
импортировать React из «реагировать»
импортировать {graphql, useStaticQuery} из «Гэтсби»
Мы импортируем React, чтобы использовать синтаксис JSX. Мы импортируем «graphql» и «useStaticQuery», чтобы общаться с нашим блогом на Medium с помощью Graphql, который устанавливается по умолчанию при создании приложения Gatsby.
Шаг 3: Далее мы собираемся обслуживать контент носителя, создав следующую функцию на странице «mediumblog.js»:
На изображении выше мы запускаем компонент функции блога под названием «mediumBlog» с включенной переменной данных. Переменная данных использует запрос graphql для получения названия блога, даты и uniqueSlug из Medium. UniqueSlug будет использоваться для ссылки на полную статью на веб-сайте Medium. Теперь нам нужно отобразить информацию на странице.
Шаг 4: Глядя на изображение выше, вы можете видеть, что мы возвращаем заголовок, а также неупорядоченный список с использованием JSX. Под тегом ol вы увидите, что мы используем функцию JavaScript «map» для переменной «data». Эта функция карты используется для создания массива, содержащего все «ребра» наших сообщений Medium, которые содержат соответствующие данные для каждого из наших сообщений Medium. Эта функция карты также используется для отображения полного списка, содержащего все ваши сообщения на Medium.
Я завернул каждый элемент списка в тег ссылки. Тег a содержит следующую ссылку href, которая направит пользователя к полной статье на веб-сайте Medium:
href={`https://medium.com/@conbailey90/${edge.node.uniqueSlug}`}
Тот же метод был использован для заголовка и даты сообщения в блоге:
‹h2›{edge.node.title}‹/h2›
‹p›{edge.node.createdAt}‹/p›
Не забудьте экспортировать функцию «mediumBlog» внизу страницы, используя:
экспорт по умолчанию MediumBlog
Я надеюсь, что вы нашли эту статью полезной. Большое спасибо за чтение.
Конор Бейли
