Перейти к содержимому

Добавьте время последнего изменения

Узнайте как создать плагин remark, который добавляет время последнего изменения к frontmatter ваших Markdown и MDX файлов. Используйте это свойство для отображения времени последнего изменения на ваших страницах.

Рецепт

Заголовок раздела «Рецепт»

  1. Установите необходимые пакеты

    Установите Day.js для модификации и форматирования времени:

    Окно терминала
    npm install dayjs

  2. Создайте плагин Remark

    Этот плагин использует execSync для запуска комманды Git, которая возвращает временную метку последнего коммита в формате ISO 8601. Далее временная метка добавляется к frontmatter файла.

    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();
      };
    }
    Использование файловой системы вместо Git

    Хотя использование Git является рекомендуемым способом получения времени последнего изменения, возможно использование времени последнего изменения из файловой системы. Этот плагин использует statSync для получения mtime (время изменения) файла в формате ISO 8601. Далее временная метка добавляется к frontmatter файла.

    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. Добавьте плагин в свой конфиг

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

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

    Сейчас все документы Markdown будут иметь свойство lastModified в своём frontmatter.

  4. Отобразите время последнего изменения

    Если ваш контент находится в коллекции контента, получите remarkPluginFrontmatter из функции render(entry). Далее, отобразите lastModified в вашем шаблоне там, где вы хотите.

    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>Last Modified: {lastModified}</p>
        ...
      </body>
    </html>

    Если вы используете макет Markdown, используйте свойство frontmatter lastModified из Astro.props в вашем шаблоне макета.

    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>
Внести свой вклад Сообщество Поддержать