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

Хотя я хотел продолжить писать на Medium, поскольку он дает отличную платформу для написания и публикации, я также хотел отображать статьи Medium на своем веб-сайте.

Но чтобы лопнуть мой пузырь, я узнал из этой ветки твиттера, что Medium не предоставляет простой в использовании API для извлечения всех статей из Medium. Хотя у меня было несколько предложений по работе, я хотел попробовать что-то новое.

Вот так я и выполнил задачу!

  1. Скрипт узла для извлечения RSS-канала из Medium и его преобразования в JSON

Я написал простой скрипт узла для получения канала Medium RSS в формате XML. URL-адрес RSS-канала для учетной записи будет выглядеть примерно так: https://medium.com/feed/<username>

В этом RSS-канале будет тег <item> для каждой статьи, размещенной на носителе с помощью имени пользователя, указанного в URL-адресе. Это выглядело бы примерно так:

После получения этого RSS-канала я преобразовал XML в JSON с помощью пакета npm xml2js и записал полученный JSON для каждой из статей в соответствующие файлы в каталоге content/blog/ в моем основном каталоге проекта.

Полный сценарий узла для этого можно найти здесь.

Вы можете запустить этот сценарий узла независимо или как часть процесса развертывания, как указано в шаге 3.

2. Вставьте данные JSON из файла в компонент с помощью плагина файловой системы Gatsby

Затем я использовал плагин gatsby-source-filesystem для получения данных JSON каждой статьи, которые теперь присутствуют в моей файловой системе в каталоге content/blog/, в мое приложение Gatsby. Мне также пришлось использовать плагин gatsby-transformer-json для преобразования строки JSON из файла JSON в объекты JavaScript, которые можно было использовать в моих компонентах.

Чтобы использовать эти два плагина в вашем приложении Gatsby, добавьте следующее в раздел плагинов в gatsby-config.js

plugins: [
   {
      resolve: `gatsby-source-filesystem`,
      options: {
          name: `blog`,
          path: `${__dirname}/content/blog/`
      },
   },
   "gatsby-transformer-json"
]

Наконец, я использовал ловушку useStaticQuery, чтобы вставить данные JSON в свой компонент Blog.

const data = useStaticQuery(graphql`
     query blogDetailList {
        allBlogJson {
            edges {
               node {
                  title
                  pubDate
                  link
                  id,
                  content_encoded
               }
            }
         }
     }
`);

Здесь content_encoded будут все данные статьи, которые я использовал для отображения содержимого блога.

3. Добавьте сценарий узла как часть процесса развертывания

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

"scripts": {
    "deploy": "npm run medium && gatsby build --prefix-paths && gh-pages -d public",
    "medium": "node medium.js"
}

Это помогает мне поддерживать синхронизацию статей в разделе блога моего веб-сайта со статьями на Medium.

Вот и все!