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

Instala los paquetes auxiliares

Instala Day.js para modificar y formatear tiempos:
- npm
- pnpm
- Yarn
Ventana de terminal
npm install dayjs
Ventana de terminal
pnpm add dayjs
Ventana de terminal
yarn add dayjs
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();
  };
}
```

Añade el plugin a tu config

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.

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.

---
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.

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

Contribuir

Comunidad

Agrega la hora de última modificación

Receta

¿Qué tienes en mente?

Crear un problema en GitHub

Envíanos comentarios

Envíanos comentarios