태그 시스템 개선하기 2/2

• 서두
• 현재의 문제점과 요구사항 2
• 구현
• 결론

서두

지난 글(VuePress 태그 시스템 개선하기 1)에 이어서 두번째 문제점을 해결해 보도록 하겠다.

현재의 문제점과 요구사항 2

본 사이트는 포트폴리오라는 별도의 블로그 카테고리가 존재한다. 거기에도 태그를 적용할 수 있을텐데 현재의 구조에서는 블로그와 포트폴리오의 태그를 구분하여 보여줄 수 있는 기능이 없다. 블로그 루트 페이지에서는 블로그에 속한 키워드만 보여주고 싶은데 말이다.

<TagList prefix="/blog/" />

이러한 형태로 속성을 하나 주어서 필터링하는 기능만 넣으면 될 것 같다.

구현

prefix 속성을 props를 통해 받아서 사용할 수 있다. filter 메소드로 prefix에 해당하는 페이지들만 골라내서 계산하니 간단히 해결되었다.

그리고 ES6에서는 굳이 lodash를 쓰지 않아도 검색과 정렬은 가능해서 제거하고 새로 구현했다. 25, 29번째 줄을 참고하자.

<!-- docs/.vuepress/components/TagList.vue -->

...
<script>
// import _ from 'lodash'
import tagMethods from './mixins/tag-methods'
export default {
  mixins: [tagMethods],
  props: ['prefix'],
  computed: {
    tags() {
      let tags = {}
      let pages = this.$site.pages.filter(page => page.path.search(this.prefix) === 0)
      // for (let page of this.$site.pages) {
      for (let page of pages) {
        for (let index in page.frontmatter.tags) {
          const tag = page.frontmatter.tags[index]
          const text = this.getText(tag)
          const value = this.getValue(tag)
          if (value in tags === false) tags[value] = {value, text: null, pages: []}
          // text가 한글인 경우, 따로 저장해둔다.
          if (!tags[value].text && text !== value) tags[value].text = text
          // 이미 추가된 페이지는 스킵
          // if (_.findIndex(tags[value].pages, p => p.key === page.key) < 0) tags[value].pages.push(page)
          if (tags[value].pages.findIndex(p => p.key === page.key) < 0) tags[value].pages.push(page)
        }
      }
      // return _.sortBy(tags, ['value'])
      return Object.values(tags).sort((a, b) => a.value > b.value)
    }
  }
}
</script>

결론

이제 원하는 종류만 골라서 키워드를 보여줄 수 있으므로, 블로그와 포트폴리오 루트 페이지에도 키워드 리스트를 싣을 수 있게 되었다. 단지 props 추가와 filter 메소드 추가가 전부이다.

이정도면 태그 시스템이 충분히 만족스럽다. 점점 모습이 갖추어져가는 블로그 모습에 흐뭇하다.