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-
Installer les paquets d’aide
Installez ces deux paquets d’aide :
reading-timepour calculer les minutes de lecturemdast-util-to-stringpour extraire tout le texte de votre markdown
Fenêtre du terminal npm install reading-time mdast-util-to-stringFenêtre du terminal pnpm add reading-time mdast-util-to-stringFenêtre du terminal yarn add reading-time mdast-util-to-string -
Créer un plugin remark.
Ce plugin utilise le paquet
mdast-util-to-stringpour obtenir le texte du fichier Markdown. Ce texte est ensuite transmis au paquetreading-timepour 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;};} -
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é
minutesReadcalculée dans leur frontmatter. -
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 fonctionentry.render(). Ensuite, insérezminutesReaddans 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é
minutesReaddu frontmatter deAstro.propsdans votre template.src/layouts/BlogLayout.astro ---const { minutesRead } = Astro.props.frontmatter;---<html><head>...</head><body><p>{minutesRead}</p><slot /></body></html>