Недавно я создал свой личный сайт на Gatsby JS. Следующим логическим шагом было добавить раздел блога, в котором я хотел бы отображать все статьи, которые я написал на Medium.
Хотя я хотел продолжить писать на Medium, поскольку он дает отличную платформу для написания и публикации, я также хотел отображать статьи Medium на своем веб-сайте.
Но чтобы лопнуть мой пузырь, я узнал из этой ветки твиттера, что Medium не предоставляет простой в использовании API для извлечения всех статей из Medium. Хотя у меня было несколько предложений по работе, я хотел попробовать что-то новое.
Вот так я и выполнил задачу!
- Скрипт узла для извлечения 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.
Вот и все!