Введение

В мире, который становится все более взаимосвязанным и основанным на технологиях, ведение блога (чем я занимаюсь сейчас) становится все более и более важным. Возможно, это потому, что автор описывает то, чего мы всегда желали, но никогда не испытывали. А может быть, все совсем наоборот, и автор говорит о чем-то рутинном для вас, но с другой точки зрения.

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

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

И поэтому я решил взять на себя задачу создать очень простой клиентский граббер контента Medium, который я покажу вам в оставшейся части этого поста!

Мои требования:

  • Сторона клиента
  • Только Vanilla JS (без jquery, реакции и т. д.)
  • Должен быть как минимум заголовок поста, дата, тело и миниатюра.

Начнем! 🚀

Для начала мы хотим настроить нашу структуру папок, включая наш файл index.html и наш основной файл js, который мы назовем script.js. Моя структура папок будет выглядеть так для простоты, но вы можете свободно изменять ее по своему усмотрению.

Project Root
    |- /src
        |- index.html
        |- /assets/
            |- script.js

Интересная часть: программирование🎉

Внутри нашего файла index.html мы просто хотим иметь пустое пространство для размещения миниатюры (содержащейся в теле поста), заголовка, даты поста и содержимого поста. Мы также захотим добавить атрибут id к каждому из них для простоты использования. (серьезно, кто еще использует document.getElementsByClassName()?)

<body>
     <h3 class="blog-title" id="title">Uh Oh, It seems like we've had a problem loading the blog...</h3>
     <h5 class="blog-subheading" id="release"></h5>
     <p id="blog_content"></p>
</body>
<script src="assets/script.js"></script>

Теперь, когда у нас есть «просто-тупой» HTML-код, мы можем перейти к части JavaScript (в assets/script.js)

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

// Global variable declarations
var title = document.getElementById('title');
var release_date = document.getElementById('release');
var blog_body = document.getElementById('blog_content');

Поскольку с этим покончено, мы можем начать процесс вызова API к Medium. Вот интересная часть: API Medium выводит данные в формате XML/RSS. К счастью, кто-то уже справился с этим с помощью инструмента rss2json здесь.

Используя этот сервис rss2json, наш вызов API будет выглядеть примерно так:

fetch('https://api.rss2json.com/v1/api.json?rss_url=https://medium.com/feed/@flancast90')
     .then((res) => res.json())
     .then((data) => {
          // we'll get here soon enough!
     });

где вы можете заменить часть @flancast90 своим именем пользователя Medium. Затем мы сохраним каждую из «важных» частей JSON в новых переменных, а также проделаем немного магии JavaScript, чтобы заменить некоторые ненужные изображения, символы и т. д.

Во-первых, мы хотим сохранить ответ rss2json в новой переменной JSON, например:

//store the JSON output in a variable for ease-of-access
var medium_code = data;

И оттуда мы можем сохранить определенные элементы, которые нам нужны, такие как заголовок, миниатюра и контент, в разных переменных.

var title_from_medium = (medium_code.items[0].title);
var release_date_from_medium = (medium_code.items[0].pubDate);
var content_from_medium = (medium_code.items[0].content).replace(/^"|"$/g, '');

Как видно, нам пришлось вызывать некоторые функции замены выше. Нам пришлось сделать это, чтобы избавиться от кавычек, которые оборачивают содержимое вывода rss2json, а также сохранить правильное форматирование, изменив символ новой строки JSON \n на символ новой строки HTML <br>.

Еще несколько функций замены, и все готово!

title.innerHTML = JSON.stringify(title_from_medium).replace(/^"|"$/g, '');
release_date.innerHTML = JSON.stringify(release_date_from_medium).replace(/^"|"$/g, '');
blog_body.innerHTML = JSON.stringify(content_from_medium).replaceAll('\\n','<br>');

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

О-о, кажется, форматирование немного запутано, а миниатюра, которая находится внутри контента, имеет некоторые проблемы с рендерингом. Добавление нескольких переменных исправления в код должно решить эту проблему, поскольку мы можем просто сломать URL-адрес перед добавленным %22 и удалить некоторый дополнительный контент, добавленный Medium (я полагаю, для отслеживания аналитики)!

var changed = (fix_image.src).split("%22")[1];                      changed = changed.substring(0, changed.length - 1);                      fix_image.src = (changed);                      fix_image.style.position = "relative";                      fix_image.style.width = "100%";
var children_img_in_post = parseInt(blog_body.getElementsByTagName('img').length);
// medium embeds a counter for post views, which we don't need.
// We will discard of it, since we know it is the last
// image in the post
blog_body.getElementsByTagName('img')[children_img_in_post-1].remove();

И это все! Надеюсь, это решение окажется полезным для вас (оно точно было для меня, я использую его в своем блоге на finnsoftware.net). Если вы все еще немного запутались, ничего страшного; Я сохранил весь этот код в репозитории GitHub, чтобы вы могли увидеть здесь :)