使用技術:
- VuePress - Vue 驅動的靜態網站生成器
倉庫地址:https://github.com/yinian-R/v...
全局安裝
## 安裝
yarn global add vuepress # 或者:npm install -g vuepress
現有項目
如果你想在一個現有項目中使用 VuePress,同時想要在該項目中管理文檔,則應該將 VuePress 安裝爲本地依賴。
## 沒有項目可以初始化
yarn init
## 將 VuePress 作爲一個本地依賴安裝
yarn add -D vuepress # 或者:npm install -D vuepress
## 新建一個 docs 文件夾
mkdir docs
## 新建一個 markdown 文件
echo '# Hello VuePress!' > docs/README.md
## 開始寫作
npx vuepress dev docs
接着,在 package.json 里加一些腳本:
{
"scripts": {
"docs:dev": "vuepress dev docs",
"docs:build": "vuepress build docs"
}
}
基本配置
.
├─ docs
│ ├─ README.md
│ └─ .vuepress
│ └─ config.js
一個 VuePress 網站必要的配置文件是 .vuepress/config.js,它應該導出一個 JavaScript 對象:
module.exports = {
title: 'Hello VuePress',
description: 'Just playing around'
}
靜態資源
創建public文件夾,主要用於存放靜態資源
.
├─ docs
│ └─ .vuepress
│ └─ public
│ └─ image
│ └─ favicon.ico
添加網站 favicon,修改 .vuepress/config.js 內容
module.exports = {
head:[
['link', {rel:'icon', href:'/image/favicon.ico'}]
]
};
導航欄
你可以通過 themeConfig.nav 增加一些導航欄鏈接:
module.exports = {
themeConfig: {
nav: [
{ text: '主頁', link: '/' },
{ text: '配置', link: '/guide/' },
{
text: '語言',
items: [
{ text: '中文', link: '/language/chinese/' },
{ text: 'English', link: '/language/english/' }
]
},
{ text: 'GitHub', link: 'https://github.com' }
]
}
};
側邊欄
想要使 側邊欄(Sidebar)生效,需要配置 themeConfig.sidebar,基本的配置,需要一個包含了多個鏈接的數組:
module.exports = {
themeConfig: {
sidebar: [
'/',
['/hello', 'hello page']
]
}
};