Pular para o conteúdo
v5-beta

Adicione o horário da última modificação

Aprenda como criar um plugin remark que adiciona o horário da última modificação ao frontmatter dos seus arquivos Markdown e MDX. Use essa propriedade para exibir o horário da última modificação em suas páginas.

Receita

Seção intitulada Receita

  1. Instale Pacotes Auxiliares

    Instale Day.js para modificar e formatar datas:

    Janela do terminal
    npm install dayjs

  2. Crie um Plugin Remark

    Este plugin usa execSync para executar um comando Git que retorna a marca temporal do último commit no formato ISO 8601. Essa marca temporal é adicionada ao frontmatter do arquivo.

    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();
      };
    }
    Usando o sistema de arquivos em vez do Git

    Embora usar Git seja a maneira recomendada para obter o horário da última modificação de um arquivo, é possível usar o horário de modificação do sistema de arquivos. Este plugin usa statSync para obter o mtime (horário de modificação) do arquivo no formato ISO 8601. A marca temporal é adicionada ao frontmatter do arquivo.

    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. Adicione o plugin na sua configuração

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

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

    Agora, todos os documentos Markdown terão uma propriedade lastModified no frontmatter.

  4. Exiba o horário da última modificação

    Se o seu conteúdo estiver armazenado em uma coleção de conteúdo, acesse o remarkPluginFrontmatter a partir da função entry.render(). Em seguida, mostre lastModified em seu template onde preferir que ele apareça.

    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 Modificação: {lastModified}</p>
        ...
      </body>
    </html>

    Se você estiver usando um layout Markdown, utilize a propriedade lastModified do frontmatter a partir de Astro.props no seu modelo de layout.

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

O que passa em sua cabeça?

Criar uma Issue no GitHub

A maneira mais rápida de alertar nosso time sobre um problema.

Comunidade