콘텐츠로 이동

읽기 시간 추가

Markdown 또는 MDX 파일의 프런트매터에 읽기 시간 속성을 추가하는 mdast 플러그인을 만듭니다. 이 속성을 사용하여 각 페이지의 읽기 시간을 표시합니다.

레시피

섹션 제목: “레시피”

  1. 사용하는 Markdown 프로세서에 따라 다음 패키지를 설치합니다.

    터미널 창
    npm install reading-time @astrojs/markdown-satteri satteri

  2. mdast 플러그인을 만듭니다.

    이 플러그인은 Markdown 파일의 텍스트를 가져옵니다. 그런 다음 이 텍스트를 reading-time 패키지에 전달하여 분 단위로 읽기 시간을 계산합니다.

    src/mdast/mdast-reading-time.ts
    import getReadingTime from "reading-time";
    import { defineMdastPlugin } from "satteri";
    

    export const mdastReadingTimePlugin = defineMdastPlugin({
      name: "mdast-reading-time",
      after(root, context) {
        const textOnPage = context.textContent(root);
        const readingTime = getReadingTime(textOnPage);
    

        if (context.data.astro !== undefined) {
          // readingTime.text는 읽기 시간을 이해하기 쉬운 문자열로 제공합니다.
          // 예: "3 min read"
          context.data.astro.frontmatter.minutesRead = readingTime.text;
        }
      },
    });

  3. 구성에 플러그인을 추가합니다.

    astro.config.mjs
    import { satteri } from "@astrojs/markdown-satteri";
    import { defineConfig } from "astro/config";
    import { mdastReadingTimePlugin } from "./src/mdast/mdast-reading-time";
    

    export default defineConfig({
      markdown: {
        processor: satteri({
          mdastPlugins: [mdastReadingTimePlugin],
        }),
      },
    });

    이제 모든 Markdown 문서의 프런트매터에 계산된 minutesRead 속성이 포함됩니다.

  4. 읽기 시간을 표시합니다.

    블로그 게시물이 콘텐츠 컬렉션에 저장된 경우 render() 함수에서 remarkPluginFrontmatter에 액세스하세요. 그런 다음 템플릿에서 원하는 위치에 minutesRead를 렌더링하세요.

    src/pages/posts/[slug].astro
    ---
    import { getCollection, render } from "astro:content";
    

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

    <html>
      <head>
        <meta charset="utf-8" />
        <title>{entry.data.title}</title>
      </head>
      <body>
        <title>{entry.data.title}</title>
        <p>{remarkPluginFrontmatter.minutesRead}</p>
        <Content />
      </body>
    </html>

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

    src/layouts/BlogLayout.astro
    ---
    const { minutesRead } = Astro.props.frontmatter;
    ---
    

    <html>
      <head>
        <meta charset="utf-8" />
      </head>
      <body>
        <p>{minutesRead}</p>
        <slot />
      </body>
    </html>
기여하기 커뮤니티 후원하기