From f90dcf0800235621c97fd5695f3e70d7682c1eef Mon Sep 17 00:00:00 2001 From: Junseong Park Date: Wed, 31 Jul 2024 19:37:57 +0900 Subject: [PATCH] i18n(ko-KR): update `layouts.mdx` --- src/content/docs/ko/basics/layouts.mdx | 34 +++++++++++++++++--------- 1 file changed, 23 insertions(+), 11 deletions(-) diff --git a/src/content/docs/ko/basics/layouts.mdx b/src/content/docs/ko/basics/layouts.mdx index 10adf6dd8d84f..b860dee0cdcc0 100644 --- a/src/content/docs/ko/basics/layouts.mdx +++ b/src/content/docs/ko/basics/layouts.mdx @@ -238,22 +238,34 @@ const { title, fancyJsHelper } = Astro.props; [Markdown/MDX 안내서](/ko/guides/markdown-content/)에서 Astro의 Markdown 및 MDX 지원에 대해 자세히 알아보세요. -## `.md`, `.mdx`, `.astro`에 하나의 레이아웃 사용 +### 레이아웃에서 TypeScript 사용하기 -단일 Astro 레이아웃을 작성하여 `.md` 및 `.mdx` 파일의 `frontmatter` 객체는 물론, `.astro` 파일에서 전달된 모든 명명된 props를 수신할 수 있습니다. +모든 Astro 레이아웃의 props로 타입을 제공하여 타입 안정성 및 자동 완성 기능을 추가할 수 있습니다. -아래 예에서 레이아웃은 프런트매터 YAML `title` 속성 또는 `title` 속성을 전달하는 Astro 컴포넌트에서 페이지 제목을 표시합니다. - -```astro /{?title}?/ /Astro.props[.a-z]*/ +```astro ins={2-7} title="src/components/MyLayout.astro" --- -// src/components/MyLayout.astro -const { title } = Astro.props.frontmatter || Astro.props; +interface Props { + title: string; + description: string; + publishDate: string; + viewCount: number; +} +const { title, description, publishDate, viewCount } = Astro.props; --- - - + + + + + {title} + -

{title}

- +
+

Published on {publishDate}

+

Viewed by {viewCount} folks

+
+
+ +
```