Aller au contenu

Ajout du temps de lecture

Créez un module d’extension 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

Section intitulée « Recette »

  1. Installer les paquets d’aide

    Installez ces deux paquets d’aide :

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

  2. Créer un module d’extension Remark.

    Ce module d’extension 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 le temps de lecture en minutes sous la forme d'une chaîne de caractères conviviale,
        // Ex: "3 min read"
        data.astro.frontmatter.minutesRead = readingTime.text;
      };
    }

  3. Ajouter le module d’extension à 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 render(entry). Ensuite, insérez minutesRead dans votre modèle à l’endroit où vous voulez qu’il apparaisse.

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

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

    <html>
      <head>...</head>
      <body>
        <p>{minutesRead}</p>
        <slot />
      </body>
    </html>
Contribuer Communauté Parrainer