JavaScript

Встраивайте свои сообщения на Medium с помощью Alpine.js

Несколько строк кода и несколько директив Alpine позволяют быстро выполнить эту работу.

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

Alpine невелик, на самом деле его веб-сайт перечисляет его функции следующим образом:

Alpine представляет собой набор из 15 атрибутов, 6 свойств и 2 методов.

Это звучит достаточно просто, чтобы научиться. Давайте попробуем, создав HTML-страницу с разделом шаблона для того, как мы хотим расположить каждый пост из нашей ленты.

<!DOCTYPE html>
<html>
<head>
    <title>Fetch Posts with Alpine.js</title>
    <script defer src="https://cdn.jsdelivr.net/npm/[email protected]/dist/cdn.min.js"></script>
</head>
<body>
    <div x-data="postList()" x-init="init()">
        <h1>Medium Posts</h1>
        <ul>
            <template x-for="post in posts">
                <li>
                    <a :href="post.link" target="_blank" x-text="post.title"></a>
                </li>
            </template>
        </ul>
    </div>
    <script src="js/posts.js"></script>
</body>
</html>

Обратите внимание, что мы уже используем наши первые альпийские атрибуты. Основной элемент div использует x-данные, которые вызывают функцию, которая возвращает нашу основную структуру данных для этой работы. Мы рассмотрим это на мгновение, но достаточно сказать, что наши дочерние элементы будут иметь к нему доступ. Атрибут x-init также использовался для указания функции в той же структуре данных, которая будет вызываться при запуске.

В элементе храма мы используем атрибут x-for, чтобы указать, как мы будем перебирать наши сообщения. Элемент a включает в себя точку с запятой для привязки значения к атрибуту href. Он также включает атрибут x-text, используемый для установки текста элемента.

Далее давайте создадим наш файл JavaScript. Мы определим функцию postList, которая возвращает нашу структуру данных. Он будет включать как свойство posts, которое мы итерируем, так и функцию init, в которой мы будем получать наш канал Medium.

function postList() {
    return {
        posts: [],
        async init() {
            const response = await fetch("https://api.rss2json.com/v1/api.json?rss_url=https://medium.com/feed/@devwanderer");
            const data = await response.json();
            this.posts = data.items.map(item => ({
                title: item.title,
                link: item.link
            }));
        }
    };
}

Если вы посмотрите URL-адрес загрузки, вы заметите пару интересных вещей. Во-первых, Medium предоставляет ссылку на RSS-каналы для всех авторов. Это выглядит так:

https://medium.com/feed/@username

Конечно, вы замените имя пользователя своим, как это сделал я в примере кода.

Другая интересная вещь заключается в том, что вместо того, чтобы извлекать этот URL-адрес напрямую и получать XML-контент RSS, я передаю его в качестве параметра другой службе, называемой rss2json. Это служба онлайн-конвертера, которая позволяет нам получать JSON вместо XML. Это значительно упрощает синтаксический анализ и обработку.

Как только наша функция возвращает наш объект с нашим массивом сообщений в нем, Alpine делает все остальное. Он следует нашим инструкциям x-for и заполняет наш шаблон для каждого сообщения в нашей ленте. Вам осталось только добавить собственный стиль и интегрировать его с остальным внешним видом вашего сайта. Вот как получилось у меня.

Заключение

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