Aller au contenu

Ajouter la date de la dernière modification

Apprenez à créer un module d’extension mdast qui ajoute la date de la dernière modification en tant que propriété personnalisée du frontmatter de vos fichiers Markdown et MDX. Utilisez cette propriété pour afficher la date de modification dans vos pages.

Recette

Section intitulée « Recette »

  1. Installez les paquets suivants en fonction du processeur Markdown utilisé :

    Terminal window
    npm install dayjs @astrojs/markdown-satteri satteri

  2. Créez un module d’extension mdast.

    Ce module d’extension utilise execSync pour exécuter une commande Git qui renvoie l’horodatage du dernier commit au format ISO 8601. L’horodatage est ensuite ajouté au frontmatter du fichier.

    src/mdast/mdast-modified-time.ts
    import { execSync } from "node:child_process";
    import { fileURLToPath } from "node:url";
    import { defineMdastPlugin } from "satteri";
    

    export const mdastModifiedTimePlugin = defineMdastPlugin({
      name: "mdast-modified-time",
      before(root, context) {
        if (!context.fileURL) return;
    

        const filepath = fileURLToPath(context.fileURL);
        const result = execSync(`git log -1 --pretty="format:%cI" "${filepath}"`);
    

        if (context.data.astro !== undefined) {
          context.data.astro.frontmatter.lastModified = result.toString();
        }
      },
    });
    Utiliser le système de fichiers au lieu de Git

    Bien que l’utilisation de Git soit la méthode recommandée pour obtenir l’horodatage de la dernière modification d’un fichier, il est possible d’utiliser la date de modification du fichier dans le système de fichiers. Ce module d’extension utilise statSync pour obtenir la date de modification (mtime) du fichier au format ISO 8601. L’horodatage est ensuite ajouté au frontmatter du fichier.

    src/mdast/mdast-modified-time.ts
    import { statSync } from "node:fs";
    import { fileURLToPath } from "node:url";
    import { defineMdastPlugin } from "satteri";
    

    export const mdastModifiedTimePlugin = defineMdastPlugin({
      name: "mdast-modified-time",
      before(node, context) {
        if (!context.fileURL) return;
    

        const filepath = fileURLToPath(context.fileURL);
        const result = statSync(filepath);
    

        if (context.data.astro !== undefined) {
          context.data.astro.frontmatter.lastModified = result.mtime.toISOString();
        }
      },
    });

  3. Ajoutez le module d’extension à votre configuration :

    astro.config.mjs
    import { satteri } from "@astrojs/markdown-satteri";
    import { defineConfig } from "astro/config";
    import { mdastModifiedTimePlugin } from "./src/mdast/mdast-modified-time";
    

    export default defineConfig({
      markdown: {
        processor: satteri({
          mdastPlugins: [mdastModifiedTimePlugin],
        }),
      },
    });

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

  4. Affichez la date de la dernière modification

    Si votre contenu est stocké dans une collection de contenu, accédez à remarkPluginFrontmatter depuis la fonction render(). Ensuite, affichez lastModified dans votre modèle à l’endroit où vous souhaitez qu’il apparaisse.

    src/pages/posts/[slug].astro
    ---
    import { getCollection, render } from "astro:content";
    import dayjs from "dayjs";
    import utc from "dayjs/plugin/utc";
    

    dayjs.extend(utc);
    

    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);
    

    const lastModified = dayjs(remarkPluginFrontmatter.lastModified)
      .utc()
      .format("HH:mm:ss DD MMMM YYYY UTC");
    ---
    

    <html>
      <head>
        <meta charset="utf-8" />
        <title>{entry.data.title}</title>
      </head>
      <body>
        <title>{entry.data.title}</title>
        <p>Dernière modification : {lastModified}</p>
        <Content />
      </body>
    </html>

    Si vous utilisez une mise en page Markdown, utilisez la propriété lastModified du frontmatter accessible depuis Astro.props dans votre modèle de mise en page.

    src/layouts/BlogLayout.astro
    ---
    import dayjs from "dayjs";
    import utc from "dayjs/plugin/utc";
    

    dayjs.extend(utc);
    

    const lastModified = dayjs()
      .utc(Astro.props.frontmatter.lastModified)
      .format("HH:mm:ss DD MMMM YYYY UTC");
    ---
    

    <html>
      <head>
        <meta charset="utf-8" />
      </head>
      <body>
        <p>{lastModified}</p>
        <slot />
      </body>
    </html>
Contribuer Communauté Parrainer