Pular para o conteúdo

Adicionar 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

Seção intitulada “Receita”

  1. Instale os seguintes pacotes:

    Terminal window
    npm install reading-time mdast-util-to-string @astrojs/markdown-remark

  2. Crie um plugin remark.

    Este plugin usa o pacote mdast-util-to-string para obter o texto do arquivo Markdown. Esse texto é então passado ao 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 textOnPage = toString(tree);
        const readingTime = getReadingTime(textOnPage);
        // readingTime.text nos dará os minutos de leitura como uma string amigável,
        // ou seja, "3 min read"
        data.astro.frontmatter.minutesRead = readingTime.text;
      };
    }

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

    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],
        }),
      },
    });

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

  4. Exiba o tempo de leitura

    Se suas postagens do blog estão armazenadas em uma coleção de conteúdo (EN), acesse o remarkPluginFrontmatter a partir da função render(entry). Em seguida, renderize minutesRead no seu template, em qualquer lugar onde quiser que ele apareça.

    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>

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

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

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