컨텐츠로 건너뛰기
This is an unmaintained snapshot of the Astro v4 docs. View the latest docs.

태그 색인 페이지 구축

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

요구 사항

  • /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 = await Astro.glob('../posts/*.md');
    const pageTitle = "Tag Index";
    ---

  2. 그런 다음 페이지 컴포넌트에 다음 JavaScript 줄을 추가합니다. 이는 고유 태그 목록을 반환하기 위해 src/pages/tags/[tag].astro에서 사용한 것과 동일합니다.

    src/pages/tags/index.astro
    ---
    import BaseLayout from '../../layouts/BaseLayout.astro';
    const allPosts = await Astro.glob('../posts/*.md');
    const tags = [...new Set(allPosts.map((post) => 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> 링크를 추가하세요.

    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 = await Astro.glob('../posts/*.md');
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) => (
        <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) => (
        <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) => (
      <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 생성

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

커뮤니티