특정 태그에 대한 모든 게시물 표시 [개인 블로그 웹 사이트 구축 5부]

"개인 블로그 웹사이트 구축"시리즈의 다섯 번째 파트입니다. 이 시리즈에서는 Railway에 블로그 콘텐츠를 보관할 무료 CMS를 설정하고 Next.js의 정적 사이트 생성 및 TailwindCSS를 사용하여 기사를 표시하고 Netlify에서 호스팅하는 React 앱을 만듭니다.

모든 기사:



홈페이지의 블로그 게시물 미리보기 카드는 표지, 제목 및 발췌뿐만 아니라 태그 목록도 표시합니다. 사용자가 태그 중 하나를 클릭한 다음 연결된 모든 블로그 게시물을 볼 수 있다면 좋을 것입니다. 이것이 바로 오늘 구현할 것입니다.

Next.js 애플리케이션에서 새 경로를 생성하는 것으로 시작하겠습니다. tag 디렉토리에 새 폴더pages를 만듭니다. 내부에서 파일 생성[tag].js - 목표는 YOUR_URL/tag/tag-name와 같은 경로를 갖는 것입니다.



이제 이 [tag].js 파일 내에서 블로그 게시물 페이지와 유사하게 getStaticPaths 및 getStaticProps를 구현해야 합니다.
getStaticPaths의 경우 CMS에 있는 모든 태그 목록을 가져와야 합니다.

export async function getStaticPaths() {
  const { data } = await client.query({
    query: gql`
      query Tags {
        tags {
          data {
            attributes {
              tagId
            }
          }
        }
      }
    `,
  });
  return {
    paths: data.tags.data.map((item) => ({
      params: { tag: item.attributes.tagId },
    })),
    fallback: false,
  };
}

getStaticProps에서는 특정 태그가 있는 모든 게시물을 가져옵니다.

export async function getStaticProps({ params }) {
  const { data } = await client.query({
    query: gql`
      query Tags {
        tags (
          filters: { tagId: { eq: "${params.tag}" } }
        ) {
          data {
            attributes {
              name
              tagId
              posts {
                data {
                  attributes {
                    title
                    slug
                    excerpt
                    publishedAt
                    cover {
                        data {
                            attributes {
                                url
                            }
                        }
                    }
                    tags {
                        data {
                            attributes {
                                tagId
                                name
                            }
                        }
                    }
                  }
                }
              }
            }
          }
        }
      }
    `,
  });

  return {
    props: {
      tagData: data.tags.data[0],
    },
  };
}

그렇게 하지 않으면 홈페이지에서와 유사한 방식으로 결과가 표시됩니다.

export default function Tag({ tagData }) {
  return (
    <section className="my-8 mx-4">
      <h2 className="font-mono text-black text-xl md:text-4xl text-center mb-8">
        Articles with &quot;{tagData.attributes.name}&quot; tag
      </h2>
      <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4 ">
        {tagData.attributes.posts.data.map((post) => (
          <BlogPostPreview key={post.attributes.slug} post={post} />
        ))}
      </div>
    </section>
  );
}

대부분의 작업은 이미 완료되었지만 한 가지 더 수행해야 할 작업이 있습니다. 이 새로 생성된 페이지를 Tags에 BlogPostPreview로 연결하는 것입니다. 조정components/BlogPostPreview.jsx - 공백<a href=”#”> 대신 다음next/link을 사용합니다.

<div className="px-6 pt-4 pb-2">
        {post.attributes.tags.data.map((tag) => (
          <Link
            href={`/tag/${tag.attributes.tagId}`}
            key={tag.attributes.tagId}
          >
            <a>
              <span className="inline-block bg-gray-200 rounded-full px-3 py-1 text-sm font-semibold text-gray-700 mr-2 mb-2">
                {tag.attributes.name}
              </span>
            </a>
          </Link>
        ))}
      </div>

이제 앱을 다시 빌드하고 개발 모드에서 엽니다.

yarn build
yarn dev

블로그를 열고 태그를 클릭합니다. 다음 태그가 있는 블로그 게시물 목록을 열어야 합니다.



마지막으로 해야 할 일은 이 변경 사항을 Netlify에 적용하는 것입니다. 모든 변경 사항을 커밋하고 GitHub에 푸시합니다.Netlify가 앱을 다시 빌드하고 몇 분 안에 온라인에서 새 기능을 사용할 수 있습니다. 잘했어요!