Блоги поднимают ваш сайт с портфолио разработчиков и выделяют его среди нескольких других обычных пользователей, поэтому сегодня я расскажу, как отображать ваши сообщения Medium на вашем веб-сайте. Я показываю их в этих маленьких окнах терминала, нарисованных с помощью CSS. Конечно, вы можете свободно копировать и изменять код по своему усмотрению.

Мы будем использовать следующее:
✅ HTML
✅ CSS
✅ jQuery (почему бы и нет?)
✅ date-fns
✅ RSS2Json
✅ Немного терпения 😜

❗️ обратите внимание, что этот подход ограничивает получение только ваших 10 (последних) сообщений

Шаг 1

Medium предоставляет нам RSS-канал для получения ваших сообщений (ограничено 10), но нам нужно преобразовать его в JSON, чтобы мы могли легче управлять им.

Перейдите к rss2json и вставьте URL-адрес канала Medium. Он должен быть в формате https://medium.com/feed/@{username}/

Шаг 2

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

Шаг 3

Используя jQuery, мы делаем запрос GET для получения наших сообщений. Если ответ положительный, мы поместим весь объект в переменную res.

Обратите внимание, что все шаги после этого будут внутри функции .map, как видно из строк 8–10.

Шаг 4

Функция .map сопоставляет функцию с каждым элементом объекта, поэтому, по сути, для каждого сообщения мы будем делать набор вещей.

Поскольку мы собираемся создавать окно терминала для каждой публикации, я сделал эту функцию addWindow, чтобы добавлять div в мой документ для каждой публикации.

❗️ CSS для создания этого окна терминала (и всего, что находится внутри) можно найти здесь.

Конечно, мы хотим, чтобы в сообщениях была информация динамически. Таким образом, мы присваиваем каждому окну id, чтобы мы могли легко настроить таргетинг на них с помощью jQuery. В каждом окне также будет текст с class. Эти данные:

  1. Заголовок
  2. Описание
  3. Дата
  4. Ссылка на статью (на Medium)
  5. Теги категорий (необязательно)

Шаг 5

Теперь давайте извлечем эти данные на каждой итерации и добавим их в окно сообщения нашего блога. Мы будем использовать деструктуризацию объекта для более чистого синтаксиса. Вот код, давайте рассмотрим его один за другим.

5.1. Заголовок
Возьмите заголовок. Некоторый заголовок перепутался с &amp вместо &, поэтому мы очищаем его с помощью replace, а затем добавляем его к тегу заголовка.

5.2. Описание
Ничего особенного, просто захватите заголовок и добавьте его.

5.3. Дата
Мы будем использовать date-fns для форматирования даты в желаемом формате и затем, конечно же, добавим ее к тегу даты.

5.4. Ссылка
Поскольку сообщение не содержит фактического содержания, пользователям все равно потребуется перейти на Medium, чтобы прочитать сообщение полностью. Мы можем использовать предоставленную ссылку и добавить ее с помощью атрибута href к нашим тегам привязки.

5.5. Категории (необязательно)
Это необязательный шаг, но поскольку Medium предоставляет тег категорий для статьи, мы также можем добавить его. Здесь мы можем использовать простой цикл for для обхода массива и добавления их в наш список тегов.

Поскольку я использую смайлики, я добавил всплывающие подсказки, чтобы пользователи могли навести указатель мыши на смайлы, чтобы увидеть, что это за теги на самом деле (строка 23).

Шаг 6

Трепет перед своим шедевром, потому что если вы все сделаете правильно (без ошибок 😜), он должен выглядеть примерно так:

Последние мысли

Надеюсь, это короткое, но простое руководство помогло вам, и снова не стесняйтесь изменять его, чтобы настроить свои личные предпочтения. Вы также можете увидеть его в прямом эфире @ t31k.dev/blog.

Как обычно, береги себя и до следующего раза.
~ Тим

Пожалуйста, подумайте купите мне кофе ☕️.
Присоединяйтесь к моему списку рассылки Medium здесь 📪
Получайте электронное письмо, когда я публикую (не-Medium участник) 💌