Как удалить статьи среднего размера с помощью gatsby.js

Вы хотите продемонстрировать свои статьи на другом веб-сайте? Давайте удалим их и разместим на сайте gatsby.js.

Недавно я начал делать свой профессиональный сайт. Часть моей профессиональной деятельности - это написание статей. Большинство моих статей посвящено среде. Я хочу, чтобы они оставались на среднем уровне, но я также хотел отображать некоторые из них на своем веб-сайте. Оказывается, это довольно просто сделать. Итак, приступим:

ШАГ №1: Создайте стартер Gatsby.js и разместите его на GitHub.

Если у вас уже есть целевая страница, вы можете сразу перейти к ШАГУ 2.

Как и раньше, мы начнем с создания стартера Gatsby.js. Если вы еще не настроили среду разработки, вы можете выполнить эту процедуру.

Как только вы это сделаете, мы создадим новый сайт gatsby и проведем его первый запуск, используя следующие команды.

gatsby new gatsby-site
gatsby develop

Оказавшись здесь, вы можете открыть браузер и перейти по адресу http: // localhost: 8000 /, чтобы увидеть свой веб-сайт в действии.

ШАГ №2: Установите плагин

Мы будем использовать плагин gatsby-source-medium. Это не официальный плагин, поэтому мы не сможем получить все данные с Medium:

Плагин исходного кода для извлечения данных в Gatsby из неофициальной конечной точки Medium JSON. К сожалению, конечная точка JSON не предоставляет полные истории, а только предварительные просмотры. И из-за ограничения, установленного Medium, возвращаются только 10 последних сообщений.

Из документации плагина gatsby-source-medium

Начнем с установки плагина:

npm install --save gatsby-source-medium

и настраиваем его:

plugins: [
  {
    resolve: 'gatsby-source-medium',
    options: {
      username: '@mariequittelier', // Medium user name
    },
  },
]

И теперь в вашем GraphiQL (http: // localhost: 8000 / __ grapql) вы сможете запрашивать данные с носителя. Вся документация по API находится здесь.

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

• allMediumCollection: вы можете связать данные с публикацией пользователя.
• allMediumPost: это будут данные, относящиеся к статье пользователя.
• allMediumUser: много всего о самом пользователе.

Не стесняйтесь копаться в GraphiQl, чтобы проверить, какие данные вы можете извлечь!

ШАГ №3: Запросите и создайте интерфейс

Теперь, когда данные доступны, вы можете вызвать их, а затем отобразить. Но давайте начнем с вызова наших данных:

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

npm install --save gatsby-plugin-styled-components styled-components babel-plugin-styled-components

и настройте плагин:

//gatsby-config.js
module.exports = {
  plugins: [`gatsby-plugin-styled-components`],
}

Первое, что мы собираемся сделать, это сопоставить запрашиваемые данные. Цель состоит в том, чтобы отобразить один компонент для каждой статьи:

Вы можете заметить, что у нас есть один компонент для каждой статьи:

Теперь давайте добавим всю необходимую информацию и немного стилизуем, и здесь мы поздравляем 🎊 🎈 🍾. Стиль всегда можно улучшить, но, по крайней мере, у вас есть кое-что для начала:

Две вещи, на которые стоит обратить внимание: ссылка и изображение.

• Начнем со ссылки на вашу статью. Все статьи на среднем уровне доступны по адресу «https://medium.com/@AUTHOR_USERNAME/THE_ARTICLE_SLUG. Неважно, была ваша статья опубликована в публикации или нет. По этой ссылке вы будете перенаправлены на свою статью.
• Теперь изображения. Как и любой крупный веб-сайт, medium использует CDN для своего медиа-контента. Использование инспектора позволило мне найти его адрес https://cdn-images-1.medium.com / YOUR_IMAGE_ID.

👏 Если вам понравилась эта статья, дайте мне знать, хлопнув в ладоши (или 50) или оставив комментарий.

👍 Если вам понравились мои работы, вы всегда можете подписаться на меня.

📚 Кроме того, если вы хотите узнать больше, вы можете ознакомиться с этими статьями: