컨텐츠로 건너뛰기

태그 색인 페이지 구축

이제 모든 태그에 대한 개별 페이지가 있으므로 해당 페이지에 대한 링크를 만들 차례입니다.

요구 사항

  • /pages/folder/index.astro 라우팅 패턴을 사용하여 새 페이지 추가
  • 각 태그 페이지에 연결되는 모든 고유 태그 목록을 표시
  • 새로운 태그 페이지에 대한 탐색 링크로 사이트 업데이트

/pages/folder/index.astro 라우팅 패턴 사용

섹션 제목: /pages/folder/index.astro 라우팅 패턴 사용

웹사이트에 태그 인덱스 페이지를 추가하려면 src/pages/tags.astro에 새 파일을 생성하면 됩니다.

그러나 이미 /tags/ 디렉터리가 있으므로 Astro의 다른 라우팅 패턴을 활용하고 태그와 관련된 모든 파일을 함께 보관할 수 있습니다.

직접 시도해 보기 - 태그 색인 페이지 만들기

섹션 제목: 직접 시도해 보기 - 태그 색인 페이지 만들기

  1. src/pages/tags/ 디렉터리에 index.astro라는 새 파일을 생성합니다.

  2. http://localhost:4321/tags로 이동하여 사이트에 이 URL의 페이지가 포함되어 있는지 확인하세요. 비어 있지만 존재할 것입니다.

  3. 레이아웃을 사용하는 src/pages/tags/index.astro에 최소 페이지를 만듭니다. 여러분은 전에 이 작업을 한 적이 있습니다!

    확장하여 단계를 확인하세요.

    1. src/pages/tags/에 새 페이지 컴포넌트를 만듭니다.

      파일 이름 표시
      index.astro

    2. <BaseLayout>을 가져와 사용하세요.

      Show the code
      src/pages/tags/index.astro
      ---
      import BaseLayout from '../../layouts/BaseLayout.astro';
      ---
      <BaseLayout></BaseLayout>

    3. 페이지 제목을 정의하고 이를 컴포넌트 속성으로 레이아웃에 전달합니다.

      Show the code
      src/pages/tags/index.astro
      ---
      import BaseLayout from '../../layouts/BaseLayout.astro';
      const pageTitle = "Tag Index";
      ---
      <BaseLayout pageTitle={pageTitle}></BaseLayout>

  4. 브라우저 미리보기를 다시 확인하면 콘텐츠를 추가할 준비가 된 형식화된 페이지가 있을 것입니다!

태그 배열 생성

섹션 제목: 태그 배열 생성

이전에 map()을 사용하여 배열의 목록에 항목을 표시했습니다. 모든 태그의 배열을 정의한 다음 이 페이지의 목록에 표시하는 것은 어떤 모습일까요?

코드 보기
src/pages/tags/index.astro
---
import BaseLayout from '../../layouts/BaseLayout.astro';
const tags = ['astro', 'blogging', 'learning in public', 'successes', 'setbacks', 'community']
const pageTitle = "Tag Index";
---
<BaseLayout pageTitle={pageTitle}>
  <ul>
    {tags.map((tag) => <li>{tag}</li>)}
  </ul>
</BaseLayout>

이렇게 할 수도 있지만 이후 블로그 게시물에서 새 태그를 사용할 때마다 이 파일로 돌아와서 배열을 업데이트해야 합니다.

다행히도 한 줄의 코드로 모든 Markdown 파일의 데이터를 가져온 다음 모든 태그 목록을 반환하는 방법을 이미 알고 있습니다.

  1. src/pages/tags/index.astro에서 모든 .md 블로그 게시물 파일의 데이터에 대한 페이지 액세스를 제공하는 프런트매터 스크립트에 코드 줄을 추가합니다.

    코드 보기
    src/pages/tags/index.astro
    ---
    import BaseLayout from '../../layouts/BaseLayout.astro';
    const allPosts = Object.values(import.meta.glob('../posts/*.md', { eager: true }));
    const pageTitle = "Tag Index";
    ---

  2. 그런 다음 페이지 컴포넌트에 다음 JavaScript 줄을 추가합니다. 이는 고유한 태그 목록을 반환하기 위해 src/pages/tags/[tag].astro에서 사용한 Astro의 내장 TypeScript 지원을 활용한 동일한 코드입니다.

    src/pages/tags/index.astro
    ---
    import BaseLayout from '../../layouts/BaseLayout.astro';
    const allPosts = Object.values(import.meta.glob('../posts/*.md', { eager: true }));
    const tags = [...new Set(allPosts.map((post: any) => post.frontmatter.tags).flat())];
    const pageTitle = "Tag Index";
    ---

태그 목록 만들기

섹션 제목: 태그 목록 만들기

이번에는 순서가 지정되지 않은 목록에 항목을 만드는 대신 <div> 안에 각 항목에 대해 하나의 <p>를 만듭니다. 패턴이 익숙해 보일 것입니다!

  1. 컴포넌트 템플릿에 다음 코드를 추가합니다.

    src/pages/tags/index.astro
    <BaseLayout pageTitle={pageTitle}>
      <div>{tags.map((tag) => <p>{tag}</p>)}</div>
    </BaseLayout>

    브라우저 미리보기에서 나열된 태그를 볼 수 있는지 확인하세요.

  2. 각 태그 링크를 자체 페이지로 만들려면 각 태그 이름에 다음 <a> 링크를 추가하세요. Astro의 내장 TypeScript 지원을 통해 블로그 게시물에 태그가 없거나 형식이 잘못된 경우 오류를 표시하여 코드를 확인하고 수정할 수 있습니다.

    src/pages/tags/index.astro
    <BaseLayout pageTitle={pageTitle}>
      <div>
        {tags.map((tag) => (
          <p><a href={`/tags/${tag}`}>{tag}</a></p>
        ))}
      </div>
    </BaseLayout>

태그 목록에 스타일 추가

섹션 제목: 태그 목록에 스타일 추가

  1. 다음 CSS 클래스를 추가하여 <div>와 생성될 각 <p>의 스타일을 지정하세요. 참고: Astro는 클래스 이름을 추가하기 위해 HTML 구문을 사용합니다!

    src/pages/tags/index.astro
    <BaseLayout pageTitle={pageTitle}>
    <div class="tags">
      {tags.map((tag) => (
        <p class="tag"><a href={`/tags/${tag}`}>{tag}</a></p>
      ))}
    </div>
    </BaseLayout>

  2. 이 페이지에 다음 <style> 태그를 추가하여 새로운 CSS 클래스를 정의하세요.

    src/pages/tags/index.astro
    <style>
      a {
        color: #00539F;
      }
    

      .tags {
        display: flex;
        flex-wrap: wrap;
      }
    

      .tag {
        margin: 0.25em;
        border: dotted 1px #a1a1a1;
        border-radius: .5em;
        padding: .5em 1em;
        font-size: 1.15em;
        background-color: #F8FCFD;
      }
    </style>

  3. http://localhost:4321/tags에서 브라우저 미리보기를 확인하여 새로운 스타일이 있는지, 페이지의 각 태그에 자체 개별 태그 페이지에 대한 작동하는 링크가 있는지 확인하세요.

코드 체크인

섹션 제목: 코드 체크인

새 페이지는 다음과 같습니다.

src/pages/tags/index.astro
---
import BaseLayout from '../../layouts/BaseLayout.astro';
const allPosts = Object.values(import.meta.glob('../posts/*.md', { eager: true }));
const tags = [...new Set(allPosts.map((post) => post.frontmatter.tags).flat())];
const pageTitle = "Tag Index";
---
<BaseLayout pageTitle={pageTitle}>
  <div class="tags">
    {tags.map((tag) => (
      <p class="tag"><a href={`/tags/${tag}`}>{tag}</a></p>
    ))}
  </div>
</BaseLayout>
<style>
  a {
    color: #00539F;
  }


  .tags {
    display: flex;
    flex-wrap: wrap;
  }


  .tag {
    margin: 0.25em;
    border: dotted 1px #a1a1a1;
    border-radius: .5em;
    padding: .5em 1em;
    font-size: 1.15em;
    background-color: #F8FCFD;
  }
</style>

이 페이지를 탐색에 추가

섹션 제목: 이 페이지를 탐색에 추가

지금은 http://localhost:4321/tags로 이동하여 이 페이지를 볼 수 있습니다. 이 페이지에서 개별 태그 페이지에 대한 링크를 클릭할 수 있습니다.

하지만 여전히 웹사이트의 다른 페이지에서 이러한 페이지를 검색할 수 있도록 해야 합니다.

  1. Navigation.astro 컴포넌트에 이 새 태그 인덱스 페이지에 대한 링크를 포함합니다.

    Show me the code
    src/components/Navigation.astro
    <a href="/">Home</a>
    <a href="/about/">About</a>
    <a href="/blog/">Blog</a>
    <a href="/tags/">Tags</a>

과제: 블로그 게시물 레이아웃에 태그 포함

섹션 제목: 과제: 블로그 게시물 레이아웃에 태그 포함

이제 각 블로그 게시물에 태그 목록을 표시하고 태그 페이지에 연결하는 데 필요한 모든 코드를 작성했습니다. 재사용할 수 있는 기존 작업이 있습니다!

아래 단계를 수행한 후 최종 코드 샘플과 비교하여 작업 내용을 확인하세요.

  1. src/pages/tags/index.astro에서 <div class="tags">...</div> 및 <style>...</style>을 복사하여 MarkdownPostLayout.astro 내부에서 재사용하세요.

    src/layouts/MarkdownPostLayout.astro
    ---
    import BaseLayout from './BaseLayout.astro';
    const { frontmatter } = Astro.props;
    ---
    <BaseLayout pageTitle={frontmatter.title}>
      <p><em>{frontmatter.description}</em></p>
      <p>{frontmatter.pubDate.toString().slice(0,10)}</p>
    

      <p>Written by: {frontmatter.author}</p>
    

      <img src={frontmatter.image.url} width="300" alt={frontmatter.image.alt} />
    

      <div class="tags">
        {tags.map((tag: string) => (
        <p class="tag"><a href={`/tags/${tag}`}>{tag}</a></p>
        ))}
      </div>
    

      <slot />
    </BaseLayout>
    <style>
      a {
        color: #00539F;
      }
    

      .tags {
        display: flex;
        flex-wrap: wrap;
      }
    

      .tag {
        margin: 0.25em;
        border: dotted 1px #a1a1a1;
        border-radius: .5em;
        padding: .5em 1em;
        font-size: 1.15em;
        background-color: #F8FCFD;
      }
    </style>

이 코드가 작동하려면 MarkdownPostLayout.astro에 붙여넣은 코드를 한 번만 수정해야 합니다. 그것이 무엇인지 알아낼 수 있나요?

힌트 보기

레이아웃 템플릿에 다른 props (예: title, author, 등)는 어떻게 작성되어 있나요? 레이아웃은 개별 블로그 게시물에서 props를 어떻게 받나요?

또 다른 힌트 보기!

태그와 같이 레이아웃에서 .md 블로그 게시물의 props (전달된 값)를 사용하려면 값 앞에 특정 단어를 붙여야 합니다.

코드 보기!
src/layouts/MarkdownPostLayout.astro
    <div class="tags">
      {frontmatter.tags.map((tag: string) => (
        <p class="tag"><a href={`/tags/${tag}`}>{tag}</a></p>
      ))}
    </div>

코드 체크인: MarkdownPostLayout

섹션 제목: 코드 체크인: MarkdownPostLayout

작업을 확인하거나 MarkdownPostLayout.astro에 복사할 완전하고 올바른 코드를 원하는 경우 Astro 컴포넌트는 다음과 같습니다.

src/layouts/MarkdownPostLayout.astro
---
import BaseLayout from './BaseLayout.astro';
const { frontmatter } = Astro.props;
---
<BaseLayout pageTitle={frontmatter.title}>
  <p><em>{frontmatter.description}</em></p>
  <p>{frontmatter.pubDate.toString().slice(0,10)}</p>


  <p>Written by: {frontmatter.author}</p>


  <img src={frontmatter.image.url} width="300" alt={frontmatter.image.alt} />


  <div class="tags">
    {frontmatter.tags.map((tag: string) => (
      <p class="tag"><a href={`/tags/${tag}`}>{tag}</a></p>
    ))}
  </div>


  <slot />
</BaseLayout>
<style>
  a {
    color: #00539F;
  }


  .tags {
    display: flex;
    flex-wrap: wrap;
  }


  .tag {
    margin: 0.25em;
    border: dotted 1px #a1a1a1;
    border-radius: .5em;
    padding: .5em 1em;
    font-size: 1.15em;
    background-color: #F8FCFD;
  }
</style>

지식을 테스트해보세요

섹션 제목: 지식을 테스트해보세요

각 파일 경로를 동일한 경로에 페이지를 생성할 두 번째 파일 경로와 일치시키세요.

  1. src/pages/categories.astro

  2. src/pages/posts.astro

  3. src/pages/products/shoes/index.astro

체크리스트

섹션 제목: 체크리스트

Resources

섹션 제목: Resources
기여하기

여러분의 생각을 들려주세요!

GitHub Issue 생성

우리에게 가장 빨리 문제를 알려줄 수 있어요.

커뮤니티