[gatsby] tags menu 만들기

---

작성일자 : 2019-09-09

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 를 원하는 대로 수정