Перейти к содержимому

Добавить RSS-ленту

Приготовьтесь…

  • Установить пакет Astro для создания RSS-ленты для вашего сайта
  • Создать ленту, на которую можно подписаться и которую можно читать с помощью RSS-ридеров

Установите пакет Astro для RSS

Заголовок раздела Установите пакет Astro для RSS

Astro предоставляет специальный пакет для быстрого добавления RSS-ленты на ваш сайт.

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

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

  1. Завершите работу сервера разработки Astro и выполните следующую команду в терминале для установки пакета RSS Astro.

    Окно терминала
    npm install @astrojs/rss

  2. Перезапустите сервер разработки, чтобы снова начать работу над вашим проектом Astro.

    Окно терминала
    npm run dev

Создайте документ ленты .xml

Заголовок раздела Создайте документ ленты .xml

  1. Создайте новый файл в src/pages/ с названием rss.xml.js

  2. Скопируйте следующий код в этот новый документ, заменив свойство site на уникальный URL вашего сайта на Netlify. Настройте свойства title и description, и при необходимости укажите другой язык в customData:

    src/pages/rss.xml.js
    import rss, { pagesGlobToRssItems } from '@astrojs/rss';
    

    export async function GET() {
      return rss({
        title: 'Ученик Astro | Блог',
        description: 'Мое путешествие по изучению Astro',
        site: 'https://my-blog-site.netlify.app',
        items: await pagesGlobToRssItems(import.meta.glob('./**/*.md')),
        customData: `<language>ru-ru</language>`,
      });
    }

  3. Добавьте свойство site в конфигурацию Astro с уникальным URL-адресом вашего сайта в Netlify.

    astro.config.mjs
    import { defineConfig } from "astro/config";
    

    export default defineConfig({
      site: "https://example.com"
    });

  4. Этот документ rss.xml создается только при сборке вашего сайта, поэтому вы не сможете увидеть эту страницу в браузере во время разработки. Завершите работу сервера разработки и выполните следующие команды, чтобы сначала собрать ваш сайт локально, а затем просмотреть предварительный просмотр вашей сборки:

    Окно терминала
    npm run build
    

    npm run preview

  5. Перейдите на http://localhost:4321/rss.xml и убедитесь, что вы видите (неформатированный) текст на странице с item для каждого из ваших файлов .md. Каждый элемент должен содержать информацию о посте в блоге, такую как title, url и description.

  6. Не забудьте завершить предварительный просмотр и перезапустить сервер разработки, когда захотите снова просмотреть свой сайт в режиме разработки.

Чек-лист

Заголовок раздела Чек-лист

Ресурсы

Заголовок раздела Ресурсы