읽기 시간 추가
Markdown 또는 MDX 파일의 프런트매터에 읽기 시간 속성을 추가하는 remark 플러그인을 만듭니다. 이 속성을 사용하여 각 페이지의 읽기 시간을 표시합니다.
레시피
섹션 제목: 레시피-
도우미 패키지 설치
다음 두 개의 도우미 패키지를 설치하세요.
- 읽은 시간 (분)을 계산하는
reading-time - Markdown에서 모든 텍스트를 추출하는
mdast-util-to-string
터미널 창 npm install reading-time mdast-util-to-string터미널 창 pnpm add reading-time mdast-util-to-string터미널 창 yarn add reading-time mdast-util-to-string - 읽은 시간 (분)을 계산하는
-
remark 플러그인 생성.
이 플러그인은
mdast-util-to-string패키지를 사용하여 Markdown 파일의 텍스트를 가져옵니다. 그런 다음 이 텍스트는reading-time패키지로 전달되어 읽기 시간 (분)을 계산합니다.remark-reading-time.mjs import getReadingTime from 'reading-time';import { toString } from 'mdast-util-to-string';export function remarkReadingTime() {return function (tree, { data }) {const textOnPage = toString(tree);const readingTime = getReadingTime(textOnPage);// readingTime.text는 친숙한 문자열로 읽은 시간을 제공합니다.// 예: "3 min read"data.astro.frontmatter.minutesRead = readingTime.text;};} -
구성에 플러그인을 추가하세요.
astro.config.mjs import { defineConfig } from 'astro/config';import { remarkReadingTime } from './remark-reading-time.mjs';export default defineConfig({markdown: {remarkPlugins: [remarkReadingTime],},});이제 모든 Markdown 문서의 프런트매터에는 계산된
minutesRead속성이 있습니다. -
읽기 시간 표시
만약 블로그 게시물이 콘텐츠 컬렉션에 저장되어 있다면,
entry.render()함수의remarkPluginFrontmatter에 액세스하세요. 그런 다음 템플릿에서 표시하려는 위치마다minutesRead를 렌더링하세요.src/pages/posts/[slug].astro ---import { CollectionEntry, getCollection } from 'astro:content';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();---<html><head>...</head><body>...<p>{remarkPluginFrontmatter.minutesRead}</p>...</body></html>Markdown 레이아웃을 사용하는 경우 레이아웃 템플릿에서
Astro.props의minutesReadfrontmatter 속성을 사용하세요.src/layouts/BlogLayout.astro ---const { minutesRead } = Astro.props.frontmatter;---<html><head>...</head><body><p>{minutesRead}</p><slot /></body></html>