Saltearse al contenido
Astro Astro

Agrega la hora de última modificación

Aprende cómo construir un plugin de remark que añade la hora de última modificación al frontmatter de tus archivos Markdown y MDX. Utiliza esta propiedad para mostrar la hora de modificación en tus páginas.

Receta

  1. Instala los paquetes auxiliares

    Instala Day.js para modificar y formatear tiempos:

    Terminal window
    npm install dayjs

  2. Crea un Plugin de Remark

    Este plugin utiliza execSync para ejecutar un comando de Git que devuelve la marca de tiempo del último commit en formato ISO 8601. Luego, esta marca de tiempo se agrega al frontmatter del archivo.

    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();
      };
    }
    Utilizando el sistema de archivos en lugar de Git

    Aunque se recomienda utilizar Git para obtener la marca de tiempo de última modificación de un archivo, es posible utilizar el tiempo de modificación del sistema de archivos. Este complemento utiliza statSync para obtener el mtime (tiempo de modificación) del archivo en formato ISO 8601. Luego, esta marca de tiempo se agrega al frontmatter del archivo.

    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. Añade el plugin a tu config

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

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

    Ahora, todos los documentos Markdown tendrán una propiedad lastModified en su frontmatter.

  4. Muestra la hora de última modificación

    Si tu contenido está almacenado en una colección de contenido, accede a remarkPluginFrontmatter desde la función entry.render(). Luego, renderiza lastModified en tu plantilla donde desees que aparezca.

    src/pages/posts/[slug].astro
    ---
    import { CollectionEntry, getCollection } 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.slug },
        props: { entry },
      }));
    }
    

    const { entry } = Astro.props;
    const { Content, remarkPluginFrontmatter } = await entry.render();
    

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

    <html>
      <head>...</head>
      <body>
        ...
        <p>Última modificación: {lastModified}</p>
        ...
      </body>
    </html>

    Si estás utilizando una plantilla de Markdown, utiliza la propiedad lastModified del frontmatter desde Astro.props en tu plantilla de diseño.

    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>