Добавление времени чтения

Создайте плагин remark, который добавляет свойство со временем чтения в метаданные (frontmatter) ваших файлов Markdown или MDX. Используйте это свойство для отображения времени чтения на каждой странице.

Инструкция

1. Установите вспомогательные пакеты:

   • reading-time для расчета минут;
   • mdast-util-to-string для извлечения текста из Markdown.
   npm

   npm install reading-time mdast-util-to-string

   pnpm

   pnpm add reading-time mdast-util-to-string

   Yarn

   yarn add reading-time mdast-util-to-string

2. Создайте файл плагина.

   Этот плагин извлекает весь текст из документа и передает его в библиотеку reading-time.

   remark-reading-time.mjs

   import getReadingTime from 'reading-time';
   import { toString } from 'mdast-util-to-string';
   
   export function remarkReadingTime() {
     return function (tree, { data }) {
       const textOnPage = toString(tree);
       const readingTime = getReadingTime(textOnPage);
       // readingTime.text вернет готовую строку, например "3 min read"
       data.astro.frontmatter.minutesRead = readingTime.text;
     };
   }

3. Подключите плагин в конфигурации:

   astro.config.mjs

   import { defineConfig } from 'astro/config';
   import { remarkReadingTime } from './remark-reading-time.mjs';
   
   export default defineConfig({
     markdown: {
       remarkPlugins: [remarkReadingTime],
     },
   });

4. Отобразите время чтения.

   Если вы используете коллекции контента, вы можете получить это значение через объект remarkPluginFrontmatter после вызова функции render().

   src/pages/posts/[slug].astro

   ---
   import { getCollection, render } from 'astro:content';
   
   const { entry } = Astro.props;
   const { remarkPluginFrontmatter } = await render(entry);
   ---
   <p>{remarkPluginFrontmatter.minutesRead}</p>

   Если вы используете стандартные макеты для Markdown, значение будет доступно в Astro.props.frontmatter.

   src/layouts/BlogLayout.astro

   ---
   const { minutesRead } = Astro.props.frontmatter;
   ---
   <p>{minutesRead}</p>
   <slot />