Saltearse al contenido
Astro Astro

Agregar tiempo de lectura

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

Receta

  1. Instalar paquetes auxiliares

    Instala estos dos paquetes auxiliares:

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

  2. Crear un plugin de remark

    Este plugin utiliza el paquete mdast-util-to-string para obtener el texto del archivo Markdown. Luego, este texto se pasa 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 nos dará el tiempo de lectura en minutos como un  string legible,
        // p. ej. "3 min read"
        data.astro.frontmatter.minutesRead = readingTime.text;
      };
    }

  3. Agrega el plugin a tu configuración de la siguiente manera:

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

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

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

  4. Mostrar tiempo de lectura

Si tus publicaciones de blog están almacenadas en una colección de contenido, accede a remarkPluginFrontmatter desde la función entry.render(). Luego, muestra minutesRead en tu plantilla donde desees que aparezca.

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


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


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


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

Si estás utilizando una plantilla de Markdown, utiliza la propiedad minutesRead del frontmatter desde Astro.props en tu plantilla de diseño.

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


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