gatsby tags page 만들기

1. blog markdown에 tags 항목 넣기

---
layout: post
...
tags: [develop, java]
---

2. graphQL 테스트 하기

{
  allMarkdownRemark {
    group(field: frontmatter___tags) {
      tag: fieldValue
      totalCount
    }
  }
}

3. tags/{tag} 에 쓰일 template 생성

// /src/templates/tags.js

tag list 에서 tag 를 클릭했을 때 보이는 리스트의 template 이다. 해당 태그를 담고 있는 blog post 리스트이다.

기존 리스트의 template 가져와서 데이터에 맞게 수정해도 된다.

4. gatsby-node.js 에 tagTemplate 으로 만들 페이지를 정의한다

graphQL 로 tagsGroup 을 조회하여 tag에 해당하는 blog post 리스트 페이지를 만든다.

예) /tags/react 에 해당하는 화면

5. tag 메뉴의 index 페이지를 생성한다

// /src/pages/tags.js

tag 리스트 화면이다. tags 메뉴를 클릭했을 때 보인다. blog post 들이 가지고 있는 태그 정보를 가져와서 보인다.

메뉴 클릭 -> /tags (pages/tags.js) -> /tags/{tag} (templates/tags.js)

6. (optional) blog post 의 tags 를 원하는 대로 수정