Pular para o conteúdo

Adicionar horário da última modificação

Aprenda a construir um plugin remark que adiciona o horário da última modificação como uma propriedade de frontmatter personalizada (EN) dos seus arquivos Markdown e MDX. Use essa propriedade para exibir o horário de modificação nas suas páginas.

Receita

Seção intitulada “Receita”

  1. Instale o Day.js para modificar e formatar horários, e o @astrojs/markdown-remark para usar o processador unified() (EN):

    Terminal window
    npm install dayjs @astrojs/markdown-remark

  2. Crie um plugin remark

    Este plugin usa execSync para executar um comando Git que retorna o timestamp do último commit no formato ISO 8601. O timestamp é então adicionado ao frontmatter do arquivo.

    remark-modified-time.mjs
    import { execSync } from "node: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 o Git seja a forma recomendada de obter o timestamp 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. O timestamp é então adicionado 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 à sua configuração

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

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

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

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

    Se o seu conteúdo está armazenado em uma coleção de conteúdo (EN), acesse o remarkPluginFrontmatter a partir da função render(entry). Em seguida, renderize lastModified no seu template, em qualquer lugar onde quiser que ele apareça.

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

    Se você está usando um layout Markdown, use a propriedade de frontmatter lastModified de Astro.props no template do seu 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 Comunidade Sponsor