Как добавить документ в RSS-канал, добавив простой вставной модуль
Уже есть официальная документальная статья о том, как создать RSS-канал из Nuxt Content. Но он добавляет только отрывок как фактическое содержание. Большинство программ чтения каналов позволяют читателю прочитать статью целиком прямо в приложении без переключения контекста. В этой статье будет представлен способ добавления всего документа в RSS-канал путем добавления простого вставного модуля.
Проблема с HTML-кодом вне компонента nuxt-content
Nuxt Content - это отличная статическая CMS, которая невероятно упрощает настройку высокопроизводительного блога на основе Markdown без необходимости добавления множества сторонних сервисов.
Сердце системы - это nuxt-content компонент. Этот компонент получает документ Markdown, который необходимо отобразить, а затем применяет большое волшебство, чтобы сделать из него красивую страницу блога 😊.
Все идет нормально. Пока вы используете Nuxt Content для рендеринга, думать не о чем. Но как только вы захотите получить доступ к фактическому сгенерированному HTML-коду и работать с ним, вы не найдете ни одного поля в документах, содержащих необработанный HTML-код.
Причина в том, что компонент внутренне генерирует объект JSON, который затем превращается в узлы VDOM. Так что он создан для рендеринга с помощью Vue.js. Не существует собственного способа позволить конвейеру Markdown работать где-то еще и работать с HTML-кодом. Но это то, что нам нужно, так как мы хотим поместить текст статьи с разметкой в наш RSS-канал!
Используйте nuxt-content-body-html, чтобы абстрагироваться от этого
Я создал nuxt-content-body-html, который в основном добавляет поле bodyHtml во все документы с уценкой. Он воспроизводит конвейер Nuxt Content Markdown для его создания, а также использует плагины Remark и Rehype из конфигурации модуля, поэтому выводит тот же HTML-код, что и компонент. Хорошо то, что мы можем просто добавить его и абстрагироваться от логики генерации HTML-кода, так что мы можем сосредоточиться на создании канала.
Давайте установим модуль, запустив npm install nuxt-content-body-html. Затем добавляем его в наш nuxt.config.js:
Большой! Для проверки вы можете проверить post.bodyHtml на странице блога, и она должна содержать HTML-код.
Теперь мы можем настроить создание фида для фактического использования поля. Вы, вероятно, использовали способ, аналогичный документам Nuxt Content, для настройки своей ленты. Вот сокращенный пример конфигурации одного RSS-канала:
Вот и все, теперь у вас должен быть фид с полным HTML-содержанием! Я рекомендую Inoreader для тестирования, вы можете перезагрузить статьи с помощью маленькой кнопки перезагрузки, и тогда вы должны увидеть изменения. Ниже вы можете увидеть пример статьи, показанной в Inoreader:
Бонусный совет: добавьте изображение-тизер в самом верху
Читатели ленты могут не только отображать содержание статьи, они часто также показывают первое изображение в качестве изображения-тизера в списке статей. Это отличная возможность для читателей получить первое впечатление о содержании статьи! Просто добавьте изображение в самом верху, и все готово. Настройте создание фида следующим образом:
Вот результат в Inoreader:
И получившийся тизерный вид:
Заключение
Эта статья была о RSS-каналах с Nuxt Content, содержащими полный HTML. Nuxt-content-body-html - это быстрое и простое решение для добавления поля bodyHtml в документы, которые можно использовать в функции создания канала. Надеюсь, он вам пригодится! Если нравится, смело оставляйте звезду на звездочке на GitHub 🌟. Спасибо за прочтение!
Если вам нравится то, что я делаю, подпишитесь на меня в Твиттере или загляните на мой сайт. Большое спасибо! ❤️
Первоначально опубликовано на sebastianlandwehr.com
Больше контента на plainenglish.io
