컨텐츠로 이동

마지막 수정 시간 추가

Markdown 및 MDX 파일의 프런트매터에 마지막 수정 시간을 추가하는 remark 플러그인을 빌드하는 방법을 알아보세요. 이 속성을 사용하여 페이지에 수정된 시간을 표시합니다.

  1. 도우미 패키지 설치

    시간을 수정하고 형식을 지정하려면 Day.js를 설치하세요.

    Terminal window
    npm install dayjs
  2. Remark 플러그인 생성

    이 플러그인은 execSync를 사용하여 ISO 8601 형식의 최신 커밋의 타임스탬프를 반환하는 Git 명령을 실행합니다. 그러면 타임스탬프가 파일의 프런트매터에 추가됩니다.

    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 형식으로 가져옵니다. 그러면 타임스탬프가 파일의 프런트매터에 추가됩니다.

    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 속성이 포함됩니다.

  4. 마지막 수정 시간 표시

    콘텐츠가 콘텐츠 컬렉션에 저장된 경우 entry.render() 함수에서 remarkPluginFrontmatter에 액세스하세요. 그런 다음 템플릿에서 표시하려는 위치에 lastModified를 렌더링하세요.

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

    Markdown 레이아웃을 사용하는 경우 레이아웃 템플릿의 Astro.props에서 lastModified 프런트매터 속성을 사용하세요.

    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>