블로그 게시물 아카이브 만들기
이제 링크할 블로그 게시물이 몇 개 있으므로 자동으로 게시물 목록을 생성하도록 블로그 페이지를 구성할 차례입니다!
이번에 배울 내용
import.meta.glob()을 사용하여 모든 게시물의 데이터에 한 번에 액세스- 블로그 페이지에 동적으로 생성된 게시물 목록 표시
- 각 목록 항목에
<BlogPost />컴포넌트를 사용하도록 리팩터링
게시물 목록 동적으로 표시
모든 Markdown 파일에 대한 정보를 반환하려면
blog.astro에 다음 코드를 추가하세요.import.meta.glob()은 각 블로그 게시물에 대해 하나씩 객체 배열을 반환합니다.--- import BaseLayout from '../layouts/BaseLayout.astro' const allPosts = Object.values(import.meta.glob('./posts/*.md', { eager: true })); const pageTitle = "My Astro Learning Blog"; --- <BaseLayout pageTitle={pageTitle}> <p>This is where I will post about my journey learning Astro.</p> <ul> <li><a href="/posts/post-1/">Post 1</a></li> <li><a href="/posts/post-2/">Post 2</a></li> <li><a href="/posts/post-3/">Post 3</a></li> </ul> </BaseLayout>게시물 제목과 URL을 사용하여 전체 게시물 목록을 동적으로 생성하려면 개별
<li>태그를 다음 Astro 코드로 바꾸세요.--- import BaseLayout from '../layouts/BaseLayout.astro' const allPosts = Object.values(import.meta.glob('./posts/*.md', { eager: true })); const pageTitle = "My Astro Learning Blog"; --- <BaseLayout pageTitle={pageTitle}> <p>This is where I will post about my journey learning Astro.</p> <ul> <li><a href="/posts/post-1/">Post 1</a></li> <li><a href="/posts/post-2/">Post 2</a></li> <li><a href="/posts/post-3/">Post 3</a></li> {allPosts.map((post: any) => <li><a href={post.url}>{post.frontmatter.title}</a></li>)} </ul> </BaseLayout>이제
import.meta.glob()에서 반환된 배열을 매핑하여 블로그 게시물의 전체 목록이 Astro의 내장 TypeScript 지원을 사용하여 동적으로 생성됩니다.src/pages/posts/에 새post-4.md파일을 만들고 Markdown 콘텐츠를 추가하여 새 블로그 게시물을 추가하세요. 아래에 사용된 프런트매터 속성을 최소한 포함해야 합니다.--- layout: ../../layouts/MarkdownPostLayout.astro title: My Fourth Blog Post author: Astro Learner description: "This post will show up on its own!" image: url: "https://docs.astro.build/default-og-image.png" alt: "The word astro against an illustration of planets and stars." pubDate: 2022-08-08 tags: ["astro", "successes"] --- This post should show up with my other blog posts, because `import.meta.glob()` is returning a list of all my posts in order to create my list.http://localhost:4321/blog의 브라우저 미리보기에서 블로그 페이지를 다시 방문하여 새 블로그 게시물을 포함하여 4개 항목이 포함된 업데이트된 목록을 찾아보세요!
과제: BlogPost 컴포넌트 만들기
대신 다음 코드를 사용하여 블로그 게시물 목록을 생성할 수 있도록 Astro 프로젝트에 필요한 모든 변경 사항을 직접 시도해 보세요.
<ul>
{allPosts.map((post: any) => <li><a href={post.url}>{post.frontmatter.title}</a></li>)}
{allPosts.map((post: any) => <BlogPost url={post.url} title={post.frontmatter.title} />)}
</ul>확장하여 단계를 확인하세요.
src/components/에 새 컴포넌트를 만듭니다.파일 이름 표시
BlogPost.astrotitle과url을Astro.props로 수신할 수 있도록 컴포넌트에 코드 줄을 작성합니다.코드 표시
--- // src/components/BlogPost.astro const { title, url } = Astro.props; ---블로그 게시물 목록의 각 항목을 만드는 데 사용된 템플릿을 추가합니다.
코드 표시
<!-- src/components/BlogPost.astro --> <li><a href={url}>{title}</a></li>새 컴포넌트를 블로그 페이지로 가져옵니다.
코드 표시
--- import BaseLayout from '../layouts/BaseLayout.astro'; import BlogPost from '../components/BlogPost.astro'; const allPosts = Object.values(import.meta.glob('../pages/posts/*.md', { eager: true })); const pageTitle = "My Astro Learning Blog"; ---직접 확인: 완성된 컴포넌트 코드를 확인하세요.
코드 표시
--- const { title, url } = Astro.props --- <li><a href={url}>{title}</a></li>--- import BaseLayout from '../layouts/BaseLayout.astro'; import BlogPost from '../components/BlogPost.astro'; const allPosts = Object.values(import.meta.glob('../pages/posts/*.md', { eager: true })); const pageTitle = "My Astro Learning Blog" --- <BaseLayout pageTitle={pageTitle}> <p>This is where I will post about my journey learning Astro.</p> <ul> {allPosts.map((post: any) => <BlogPost url={post.url} title={post.frontmatter.title} />)} </ul> </BaseLayout>
지식 테스트
Astro 컴포넌트에 다음 코드 줄이 포함되어 있을때
---
const myPosts = Object.values(import.meta.glob('./posts/*.md', { eager: true }));
---다음을 나타내기 위해 작성할 수 있는 구문을 선택하십시오.
세 번째 블로그 게시물의 제목
첫 번째 블로그 게시물의 URL에 대한 링크
마지막으로 업데이트된 날짜를 표시하는 각 게시물의 컴포넌트