Как и все хорошие разработчики, я усердно работал над оттачиванием своего мастерства и при этом создавал портфолио. Помимо того, что я дал представление о том, кто я есть, и показал свои таланты и способности, я хотел использовать эту возможность, чтобы стать экспериментом по более близкому знакомству с пользовательским CSS.

Я баловался некоторыми пользовательскими CSS в своих проектах, где это было необходимо, но обычно я хорошо использовал Bootstrap, Animate.css или Semantic. Все они сработали хорошо, но на этот раз я хотел использовать «JavaScript-подход» и делать все, что хочу, так, как хочу, и не быть ограниченным какими-либо шаблонами. Я хотел, так сказать, сделать шаблоны сам.

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

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

Только что закончив ввод и визуализацию содержимого страницы «Проекты» моего портфолио, где я представил все детали и ссылки на выделенные проекты на моей странице Github, я был готов начать ее страницу блога. Глядя на некоторые другие примеры портфолио, я знаю, как я хотел, чтобы моя страница выглядела. Он будет включать название каждой записи в блоге, часть ее содержимого, ее темы и ссылку на саму запись в блоге, очень похожую на мою страницу «Проекты».

Но мне не хотелось повторно вводить всю эту информацию точно так же, как я только что сделал это для страницы «Проекты». Эта информация была немного разрозненной, но каждая часть информации, которая мне была нужна для моей страницы блога, легко помещалась в одном месте. Если я вручную ввел эту информацию, то что? Каждый раз, когда я пишу запись в блоге, мне придется возвращаться и делать еще одну запись в моем портфолио? Раздражает перемотка туда-сюда и копирование-вставка со страницы на страницу. Должен быть способ просто взять и зафиксировать всю эту информацию, чтобы она обновлялась сама по себе.

Оказывается, есть.

Мне потребовалось около 2 секунд, чтобы найти ответ, погуглив его. Затем мне просто нужно было найти правильный фрагмент кода для получения JSON для моего приложения React. И вот оно:

https://api.rss2json.com/v1/api.json?rss_url=https://medium.com/feed/@your.medium.handle

Это, конечно, все в одну строку. Никаких пробелов, независимо от того, как это отображается на вашей странице. Теперь, чтобы настроить его, вам просто нужно явно изменить последний бит, чтобы включить свой собственный дескриптор Medium. Поэтому после @ просто удалите your.medium.handle и замените его своим фактическим дескриптором.

Чтобы быть уверенным, что у меня есть доступ к нему после его извлечения, я сохранил его в локальном состоянии:

Вот это по сути!

Итак, после быстрого:

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

Открыв вкладку, вы должны увидеть, что объекты на самом деле являются вашими записями в блоге.

Каждый объект дает мне (или вам) почти все, что вам нужно из вашей записи в блоге для использования в вашем приложении. Взгляните на первую запись:

Это все, что мне было нужно. Название, содержание, категории и даже ссылку на отдельную запись. Я продолжу немного, чтобы показать, как я визуализировал свои записи и исправил несколько неровностей на дороге.

Из моего компонента Blog я сопоставил записи и передал их новому компоненту под названием BlogEntry.

Вот посмотрите на компонент BlogEntry:

Как видите, сделать заголовок довольно просто.

Не слишком много, чтобы пойти туда. Я пока пропущу описание и вернусь к нему в конце, так как он требует наибольшего внимания. Далее я пройдусь по категориям. Категории представляют собой массив строк, поэтому я обработал их так же, как и саму запись. Я создал новый компонент для отображения категорий и сопоставил их массив, передав их в BlogCategory.

Оттуда это просто вопрос рендеринга. Я решил поместить их в неупорядоченный список и отобразить их заглавными буквами, но это был только мой выбор.

Теперь вернемся к описанию. Вот посмотрите на весь ‹div›:

Чтобы объяснить, что я сделал для описания, мы сначала должны взглянуть на ответ, который мы получаем. Вот посмотрите:

Таким образом, Medium не просто отправляет вам красивый, аккуратный, уже отформатированный абзац. Он действительно отправляет все. Каждый адрес ссылки, html-тег и т. д. Итак, при рендеринге вам нужно взглянуть на свой пост и его макет, а также на то, что вы хотели бы включить. Я решил, что мне просто нужно несколько предложений, а затем я добавлю ссылку на всю запись в блоге. Давайте пройдемся по моим выборам. Вот так.

Итак, первая часть легкая. Я просто отрезал то, что, по моему мнению, было подходящим количеством записи в блоге, которую я хотел отобразить в своем портфолио. Это было просто. Но он включал все теги HTML, такие как ‹p› и ‹h3›. Вот тут-то и появляется функция замены. Сначала я заменил ‹p› и ‹h3› по отдельности, используя регулярное выражение, например (/‹p›/, ''). Он берет то, что находится между / и /, и заменяет то, что стоит после запятой, в данном случае ‘’ (пустая строка).

Это сработало, но затем, когда я просматривал свое приложение, оно избавилось только от первого из них и не избавилось от закрывающих тегов, ‹/p› или ‹/h3›.

Первая проблема была легкой. Добавление «g» заставило избавиться от тегов глобально (всех). Я также не хотел проходить и перечислять каждый тег по отдельности. Это дополнительный код, к тому же мне пришлось бы просмотреть описание каждой полученной записи в блоге, записать его в console.log и прочитать первые символы, сколько я хотел, и посмотреть, какие теги мне пришлось заменить. Используя ‹.*› с глобальным параметром, он находит все, что начинается с ‹ и заканчивается на ›, с любым содержимым между ними, и заменяет их все.

Тада!

Следующим моим шагом было добавление ссылки. Вот код:

Ничего сложного. Довольно просто. Просто тег ‹a› с внутренним текстом… (подробнее), чтобы щелкнуть, чтобы просмотреть остальную часть записи в блоге. Новым для меня было следующее:

Это было добавлено к моей ссылке, чтобы при нажатии на нее она открывалась в новой вкладке, а не покидала страницу, на которой находится мое портфолио. Пользователям не придется нажимать «назад» или задаваться вопросом, что случилось с портфолио. У них будут рядом вкладка «Мое портфолио» и тег записи Medium.

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