.vuepress폴더에 theme폴더를 만들고, github의 vuepress디폴트 테마를 참고하면서 필요한 폴더와 파일을 작성하면 자동으로 덥어씌우기가 됩니다.
단, github를 참고하면서 작업을 진행하는 것은 힘드므로 디폴트 테마를 로컬에 복사해서 확인하는 것이 편합니다.
cd dev_docs
npx vuepress eject //vuepress는 로컬 인스톨 한 경우는 npx를 이용
.vuepress\theme에 디폴트 테마 파일이 복사됩니다.
*아직 alpha버젼이므로 디렉토리 구성 등은 추후 변경될 수 있습니다.
Home
readme.me의 yaml부분에 다음과 같이 설정을 하면 vuepress.vuejs.org의 화면과 같이 표시 됩니다.
home: true
heroImage: /hero.png
heroText: Hero Title
tagline: Hero subtitle
actionText: Get Started →
actionLink: /guide/
features:
- title: Simplicity First
details: Minimal setup with markdown-centered project structure helps you focus on writing.
- title: Vue-Powered
details: Enjoy the dev experience of Vue + webpack, use Vue components in markdown, and develop custom themes with Vue.
- title: Performant
details: VuePress generates pre-rendered static HTML for each page, and runs as an SPA once a page is loaded.
.vuepress\theme\components\Home.vue에 yaml내용이 반영되는 것이므로 Home.vue를 직접 편집하는 것도 하나의 방법입니다.
sidebar
사이드 바도 Sidebar***.vue파일이 사용되므로, 필요에 따라서 편집해서 사용합니다.
CSS style
vuepress는 Stylus기법을 사용합니다.
styl파일은 .vuepress\theme\styles에 있으므로 필요에 따라 변경하면 반영됩니다.