Aller au contenu

Ajouter l'heure de la dernière modification

Apprenez à créer un module d’extension Remark qui ajoute l’heure de la dernière modification au frontmatter de vos fichiers Markdown et MDX. Utilisez cette propriété pour afficher l’heure de modification dans vos pages.

Recette

Section intitulée « Recette »

  1. Installer les paquets d’aide

    Installez Day.js pour modifier et formater les heures :

    Fenêtre du terminal
    npm install dayjs

  2. Créer un module d’extension Remark

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

    remark-modified-time.mjs
    import { execSync } from "child_process";
    

    export function remarkModifiedTime() {
      return function (tree, file) {
        const filepath = file.history[0];
        const result = execSync(`git log -1 --pretty="format:%cI" "${filepath}"`);
        file.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 la date de dernière modification d’un fichier, il est possible d’utiliser l’heure de modification du système de fichiers. Ce module d’extension utilise statSync pour obtenir l’heure de modification (mtime) du fichier au format ISO 8601. L’horodatage est ensuite ajouté au frontmatter du fichier.

    remark-modified-time.mjs
    import { statSync } from "fs";
    

    export function remarkModifiedTime() {
      return function (tree, file) {
        const filepath = file.history[0];
        const result = statSync(filepath);
        file.data.astro.frontmatter.lastModified = result.mtime.toISOString();
      };
    }

  3. Ajouter le module d’extension à votre configuration

    astro.config.mjs
    import { defineConfig } from 'astro/config';
    import { remarkModifiedTime } from './remark-modified-time.mjs';
    

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

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

  4. Afficher l’heure de la dernière modification

    Si votre contenu est stocké dans une collection de contenu, accédez au remarkPluginFrontmatter depuis la fonction render(entry). Affichez ensuite lastModified dans votre modèle à l’endroit où vous voulez 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>...</head>
      <body>
        ...
        <p>Dernière modification : {lastModified}</p>
        ...
      </body>
    </html>

    Si vous utilisez une mise en page Markdown, utilisez la propriété du frontmatter lastModified 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>...</head>
      <body>
        <p>{lastModified}</p>
        <slot />
      </body>
    </html>
Contribuer Communauté Parrainer