Это продолжение моего сообщения в блоге - Отслеживание OpenTracing и Jaeger’s Journey - Часть 4. В этой статье будет обсуждаться код интеграции статей из Medium на ваш личный сайт / блог. Эти инструкции предполагают, что вы знакомы с основами HTML, CSS и Javascript. Процесс отображения статей можно разделить на две основные части:

  1. Получите статьи из Medium / вашего канала с помощью Javascript
  2. Отображение полученной информации с помощью CSS и HTML

Получение статей с медиума

Для получения статей из канала Medium вы можете использовать fetch API. Канал Medium изначально имеет формат RSS, который можно преобразовать в JSON с помощью API RSS2JSON, например:

fetch(‘https://api.rss2json.com/v1/api.json?rss_url=https://medium.com/feed/NAME_OF_PUBLICATION')
 .then((res) => res.json())
 .then((data) => {
  //do something with the fetched data 
 });

Теперь, когда у нас есть данные в формате JSON, ими можно управлять разными способами в зависимости от требований. Каждая статья содержит несколько информативных атрибутов, которые могут отображаться, например, заголовок статьи, URL-адрес миниатюрного изображения, содержание всей статьи, данные публикации, автора статьи, ссылку и многое другое.

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

// Functions to create a short text out of whole blog's content
      function toText(node) {
         let tag = document.createElement('div')
         tag.innerHTML = node
         node = tag.innerText
         return node
      }
// Function to slice text to a certain length
      function shortenText(text,startingPoint ,maxLength) {
         return text.length > maxLength?
         text.slice(startingPoint, maxLength) + '...':
         text
      }

Показать полученную информацию

Все, что нам нужно сейчас, это отобразить данные в предопределенном виде с помощью CSS. Есть несколько дизайнов пользовательского интерфейса для карточек, которые вы можете использовать для отображения своих статей. Чтобы увидеть, как я реализовал дизайн карты для веб-сайта JaegerTracing, см. Запрос на перенос.

Et voilà, у нас есть веб-сайт, на котором отображаются последние статьи на Medium из вашей ленты.

Если у вас есть сомнения, оставьте комментарий ниже, и я буду более чем счастлив помочь!