Aller au contenu

Ajout du temps de lecture

Créez un plugin remark qui ajoute une propriété de temps de lecture au frontmatter de vos fichiers Markdown ou MDX. Utilisez cette propriété pour afficher le temps de lecture de chaque page.

Recette

Titre de la section Recette

  1. Installer les paquets d’aide

    Installez ces deux paquets d’aide :

    Fenêtre de terminal
    npm install reading-time mdast-util-to-string

  2. Créer un plugin remark.

    Ce plugin utilise le paquet mdast-util-to-string pour obtenir le texte du fichier Markdown. Ce texte est ensuite transmis au paquet reading-time pour calculer le temps de lecture en minutes.

    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 nous donnera les minutes lues sous la forme d'une chaîne de caractères conviviale,
        // Ex: "3 min read"
        data.astro.frontmatter.minutesRead = readingTime.text;
      };
    }

  3. Ajouter le plugin à votre configuration :

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

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

    Désormais, tous les documents Markdown auront une propriété minutesRead calculée dans leur frontmatter.

  4. Afficher le temps de lecture

    Si vos articles de blog sont stockés dans une collection de contenu, accédez au remarkPluginFrontmatter à partir de la fonction entry.render(). Ensuite, insérez minutesRead dans votre template à l’endroit où vous voulez qu’il apparaisse.

    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 vous utilisez une mise en page Markdown, utilisez la propriété minutesRead du frontmatter de Astro.props dans votre template.

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

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