Pular para o conteúdo
Astro Astro

Adicione tempo de leitura

Crie um plugin remark que adiciona uma propriedade de tempo de leitura ao frontmatter dos seus arquivos Markdown ou MDX. Use essa propriedade para exibir o tempo de leitura de cada página.

Receita

  1. Instale pacotes utilitários

Instale esses dois pacotes utilitários:

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

  1. Crie um plugin remark.

    Esse plugin usa o pacote mdast-util-to-string para obter o texto do arquivo Markdown. Esse texto é então passado para o pacote reading-time para calcular o tempo de leitura em 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 textoPagina = toString(tree);
        const tempoLeitura = getReadingTime(textoPagina);
        // tempoLeitura.text nos dará minutos lidos como uma string amigável
        // i.e. "3 min read"
        data.astro.frontmatter.minutesRead = tempoLeitura.text;
      };
    }

  2. Adicione o plugin à sua configuração:

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

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

    Agora todos os documentos Markdown terão uma propriedade minutesRead calculada em seu frontmatter.

  3. Exiba o Tempo de Leitura

    Se seus posts de blog estiverem armazenados em uma coleção de conteúdo, acesse o remarkPluginFrontmatter da função entry.render(). Em seguida, renderize minutesRead em seu template onde você gostaria que ele aparecesse.

    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>

    Se você estiver usando um layout Markdown, use a propriedade minutesRead do frontmatter de Astro.props no layout de seu template.

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

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