사이트 공통 항목 설정 메뉴, 사이드바
dev_docs폴더에 about.md를 만듭니다.
.vuepress폴더에 public폴더와 config.js파일을 만들고 다음을 입력합니다.
public폴더에는 정적파일(이미지 파일등)을 넣어 놓는 곳입니다.
module.exports = {
themeConfig: {
logo : 'logo.png', // \dev_docs\.vuepress\public\logo.png
search: true, // 검색기능
nav: [ //헤더 메뉴
{ text: 'Home', link: '/' },
{ text: 'About', link: '/about.html' },
{ text: '서브메뉴',
items: [
{ text: '메뉴１', link: '/' },
{ text: '메뉴２', link: '/about.html' },
]
}
],
sidebar: [ //사이드바 링크
['/', '사이드바 메뉴１'],
['/about.html', '사이드바 메뉴２'],
]
}
}
npm run dev
브라우져http://localhost:8080/로 확인합니다.
config.js를 수정하면 내용이 바로 반영이 안되므로 Ctrl + C후에 npm run dev를 다시 실행 할 필요가 있습니다.
페이지 별 meta요소 설정
페이지 별 title, description등의 meta요소는 md파일 상부에 yaml형식으로 기술하면 반영됩니다.(---로 감싸야 됨)
*config.js의 locales에서도 설정 가능합니다.
---
title: 페이지 타이틀
description: 페이지 설명문
meta:
- name: keywords
content: 키워드
- property: og:image
content: http://localhost:8080/logo.png
- property: og:desciption
content: 페이지 설명문
---
다음과 같은 html로 변환 됩니다.
<title>페이지 타이틀</title>
<meta name="description" content="페이지 설명문">
<meta name="keywords" content="키워드">
<meta property="og:image" content="http://localhost:8080/logo.png">
<meta property="og:desciption" content="페이지 설명문">