vuepress 1.9.9 버전 시작하기 (태그 기능 달기)

Node 18버전에서 vuepress 1.9.9 버전 설치에 오류가 있어서 포기했다가, 다시 Node 16버전으로 낮춰서 설치했습니다. 아직 Beta버전인 2.0.0 보다 오류가 적은 것 같습니다. 설치하니 기본적으로 검색 툴이 활성화되고, Vue 컴포넌트 추가도 components 폴더에 만드니 별다른 설정없이 인식이 됩니다. 그리고 무엇보다도 태그 요소 추가가 너무 쉽게 진행됩니다. Vuepress2로 하려고 시도하며 공부해서인지 금방금방 작성이 되네요. 다시 Vuepress 1으로 재작성해야겠습니다...ㅠㅠ

 

1. 설치

npm init

npm i -D vuepress@next

 

2. ./docs/README.md 파일 생성

### Hello Vuepress

 

3. ./gitignore 파일 생성

node_modules
.cache
.temp

 

4. package.json파일 수정

"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev": "vuepress dev docs",  // 추가
    "build": "vuepress build docs"  // 추가
  },

 

5. 실행

npm run dev

 

6. 구조

.
├── docs
│   ├── .vuepress (Optional)
│   │   ├── components (Optional)
│   │   ├── theme (Optional)
│   │   │   └── Layout.vue
│   │   ├── public (Optional)
│   │   ├── styles (Optional)
│   │   │   ├── index.styl
│   │   │   └── palette.styl
│   │   ├── templates (Optional, Danger Zone)
│   │   │   ├── dev.html
│   │   │   └── ssr.html
│   │   ├── config.js (Optional)
│   │   └── enhanceApp.js (Optional)
│   │ 
│   ├── README.md
│   ├── guide
│   │   └── README.md
│   └── config.md
│ 
└── package.json

 

7. docs/.vuepress/config.js

화면구성 참조용으로 제가 작업했던 내용 공유해놓겠습니다.

module.exports = {
  title:"Hello, Vuepress",
  themeConfig: {
    logo: '/assets/img/logo.png',
    nav: [
      { text: 'Home', link: '/' },
      { text: 'Guide', link: '/guide/' },
      { text: 'External', link: 'https://google.com' }
    ],
    sidebar: [
      {
        title: 'Today I Learned',  // required
        path: '/foo/',      // optional, link of the title, which should be an absolute path and must exist
        collapsable: false, // optional, defaults to true
        sidebarDepth: 1,    // optional, defaults to 1
        children: [
          {title: '1 설치(v2)',path:'/pages/1_설치.md'}, 
          {title: '2 레이아웃(v2)',path: '/pages/2_레이아웃.md'},
          {title: '3 검색창(v2)',path: '/pages/3_검색창.md'},
          {title: '4 Vue컴포넌트(v2)',path: '/pages/4_Vue컴포넌트.md'},
          {title: '5 태그(v2)',path: '/pages/5_태그.md'},
          {title: '6 vuepress v1설치',path: '/pages/6_v1설치.md'}
        ],
      },
      {
        title: 'Group 2',
        children: [ /* ... */ ],
        initialOpenGroupIndex: -1 // optional, defaults to 0, defines the index of initially opened subgroup
      }
    ]
  }
}

 

8. 태그 리스트 컴포넌트 만들기

태그 리스트 컴포넌트를 생성 후 README.md에서 확인해보겠습니다.

 

docs/.vuepress/components/TagList.vue

<template>
  <div class="tag-list">
    <h3>Tags :</h3>
    {{ tags }}
  </div>
</template>

<script>
export default {
  computed:{
    tags() {
      // 모든 태그를 가져옵니다.
      const tagSet = new Set()
      this.$site.pages.forEach(page => {
        if (page.frontmatter.tags) {
          page.frontmatter.tags.forEach(tag => {
            tagSet.add(tag)
          })
        }
      })
      return [...tagSet].sort()
    }
  }
}
</script>

 

9. README.md

대쉬 3개(---) 사이에 적어놓은 부분을 frontmatter라고 합니다. 이 부분은 해당 md파일의 주요 정보들을 적어놓는 용도로 사용하는데, docs폴더 내부에 테스트를 위해 몇가지 md파일들을 생성해놓고 아래와 유사하게 frontmatter를 작성해둡니다. tags에 1.js, 2.js 등 여러가지 키워드를 넣었습니다.

---
title: 'Vuepress2 태그시스템'
date: '2023-07-06'
tags:
  - JavaScript
  - 2.js
---

# KMS Data 검색 속도 건 관련

이 문서에서 사용하는 태그 목록을 출력합니다.
<!-- {{ $site }} -->

<TagList />

 

<결과>