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