Saltar al contenido

Añadir tiempo de lectura

Crea un remark plugin que añada una propiedad de tiempo de lectura al frontmatter de tus archivos Markdown o MDX. Usa esta propiedad para mostrar el tiempo de lectura de cada página.

Receta

Sección titulada “Receta”

  1. Instala los siguientes paquetes:

    Ventana de la terminal
    npm install reading-time mdast-util-to-string @astrojs/markdown-remark

  2. Crea un remark plugin.

    Este plugin usa el paquete mdast-util-to-string para obtener el texto del archivo Markdown. Este texto se pasa luego al paquete reading-time para calcular el tiempo de lectura en minutos.

    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 will give us minutes read as a friendly string,
        // i.e. "3 min read"
        data.astro.frontmatter.minutesRead = readingTime.text;
      };
    }

  3. Añade el plugin a tu configuración:

    astro.config.mjs
    import { unified } from '@astrojs/markdown-remark';
    import { defineConfig } from 'astro/config';
    import { remarkReadingTime } from './remark-reading-time.mjs';
    

    export default defineConfig({
      markdown: {
        processor: unified({
          remarkPlugins: [remarkReadingTime],
        }),
      },
    });

    Ahora todos los documentos Markdown tendrán una propiedad minutesRead calculada en su frontmatter.

  4. Mostrar el tiempo de lectura

    Si tus blog posts están almacenados en una content collection, accede al remarkPluginFrontmatter desde la función render(entry). Luego, renderiza minutesRead en tu plantilla donde quieras que aparezca.

    src/pages/posts/[slug].astro
    ---
    import { getCollection, render } from 'astro:content';
    

    export async function getStaticPaths() {
      const blog = await getCollection('blog');
      return blog.map(entry => ({
        params: { slug: entry.id },
        props: { entry },
      }));
    }
    

    const { entry } = Astro.props;
    const { Content, remarkPluginFrontmatter } = await render(entry);
    ---
    

    <html>
      <head>...</head>
      <body>
        ...
        <p>{remarkPluginFrontmatter.minutesRead}</p>
        ...
      </body>
    </html>

    Si estás usando un Markdown layout, usa la propiedad de frontmatter minutesRead de Astro.props en tu plantilla de layout.

    src/layouts/BlogLayout.astro
    ---
    const { minutesRead } = Astro.props.frontmatter;
    ---
    

    <html>
      <head>...</head>
      <body>
        <p>{minutesRead}</p>
        <slot />
      </body>
    </html>
Contribuir Comunidad Patrocinar