Привет! Рад видеть тебя здесь. Итак, вы хотели бы продемонстрировать свой усердный труд со среды на своем личном веб-сайте? Я здесь, чтобы помочь Вам!
В этом нашем проекте мы будем писать HTML, CSS (SCSS), JavaScript. План прост, так что приступим к работе!
- «Загрузить» весь контент из профиля.
- Перенесите его в JSON.
- Фильтр только по актуальным сообщениям в блогах.
- Правильно отображаться на вашем сайте!
Это будет легкий лимонный сок!
На нашем пути мы не собираемся использовать какие-либо библиотеки или фреймворки JavaScript.
1. Приступаем к содержанию!
В настоящее время API Medium не позволяет получить доступ к нашему контенту в формате JSON. Все, что мы получаем, - это грязный XML, который нам не очень поможет.
Но у нас это лучше, чем ничего, правда? Итак, чтобы увидеть все Ваши записи (комментарии и сообщения), нам необходимо сделать следующее:
«Https://medium.com/feed/@pickYOUR_USERNAME_GOES_HERE
Это все. Легко, правда?
2. Превратите свою тяжелую работу в прекрасный формат JSON.
А вот и наш герой! Rss2json.com предлагает приятный и простой в использовании API для удовлетворения всех наших потребностей в этом случае. (Это не реклама)
Не бойся! Даже если Вы ничего не знаете о работе с JSON, это не проблема ... по крайней мере, для этой работы :).
Чтобы получить что-то из API, в большинстве случаев вам нужно сначала что-то дать (почти как в реальной жизни, не так ли?). В этом случае нам просто нужно предоставить ссылку из нашего канала Medium в XML. Как показано ниже.
https://api.rss2json.com/v1/api.json?rss_url=https://medium.com/feed/@YOUR_USERNAME_STILL_GOES_HERE
Но работа еще не закончена. Теперь перейдем к самой интересной части. Код!
Мы собираемся использовать Fetch API.
Что мы могли бы сделать, чтобы улучшить наш код, так это проверить, подключились ли мы к API с помощью простого if (status == «ok»), чтобы в случае сбоя мы могли отобразить красивое сообщение об ошибке. Но здесь в этом нет необходимости.
Теперь мы готовы делать с нашими данными все, что захотим!
3. Извлеките эти милые посты из этого беспорядка.
Итак, полученный нами ответ представляет собой массив контента, который мы опубликовали на Medium.
Это либо комментарий, либо пост. Каждый из этих двух содержит информацию об авторе, дате публикации, тегах, миниатюрах, содержании и т. Д. Выглядит примерно так:
Теперь нам нужно отделить наши сообщения от остальных элементов ответа, которые мы получили от API. Для этого мы можем использовать простой трюк.
После .. у каждого элемента есть категории, НО! это всегда пустой массив категорий, если элемент является комментарием. Так что нет ничего сложнее, чем просто отфильтровать весь массив ответов из элементов, где Categories == array.length ›0. Давайте сделаем это!
Ура! Мы почти закончили.
Сначала мы планируем, а затем кодируем.
Если мы хотим иметь карточную штуку, представляющую наше сообщение в блоге, нам нужно создать массив узлов HTML, каждый из которых с нашим сообщением в блоге, содержащим наше имя, заголовок, контент, pubDate и т. Д., Примерно так:
Нам нужно сократить наш контент, потому что мы, вероятно, не хотим отображать весь пост на этой маленькой карточке :). Если Вам это не нужно, Вы можете перейти к началу четвертой части.
Ты все еще там? Отлично, продолжим изучение. (Скоро у нас будет еще одна проблема.)
Итак, чтобы сократить наш контент, нам нужно преобразовать его в обычный текст без HTML-тегов, чтобы при предварительном просмотре мы не получали массивный заголовок !
Управляется вот так: это вроде чип / не причудливый способ, но эй! Он будет работать в любом браузере.
Мы будем использовать эту функцию позже. Но давайте проверим одну мелочь ...
В данном случае наш узел начинается со слов: «Фото Яна Шнайдера на Unsplash (…)»
Что не так? Это заголовок нашего эскиза!
Но не бойтесь, мы можем с этим справиться. Мы все равно должны сократить этот узел.
Простой метод slice для нашей строки (Array), и все готово.
Последний шаг, и все готово!
4. Разместите наш шедевр на веб-странице!
Эта задача не сложнее, чем создать переменную, которая будет хранить весь наш HTML с сообщениями в блоге, и чем поместить ее в наш документ.
Итак, мы создаем пустую выходную переменную, просматриваем наш массив сообщений и по пути вставляем HTML-шаблон с хуками: $ {item.WHATEVER} (подробнее об этом синтаксисе, называемом операторами шаблона здесь ) к содержанию.
Важно использовать оператор + =. Мы хотим добавить новый и сохранить ранее добавленный контент в нашу переменную, а не только добавить и выбросить старый контент.
В конце концов, мы выбираем наш выходной контейнер и просто наполняем его нашим красивым контентом.
Вот и весь код.
Я делюсь с Вами ссылкой на Codepen, где я добавил к нему немного HTML и SCSS, чтобы Вы могли увидеть всю нашу работу в действии и полное присутствие!
Https://codepen.io/Konrad29/pen/ZoQRoz
Большое спасибо за чтение, надеюсь, это помогло Вам в решении Вашей проблемы.
Удачного дня!
