VuePress由两部分组成:一部分是支持用 Vue 开发主题的极简静态网站生成器,另一个部分是为书写技术文档而优化的默认主题。它的诞生初衷是为了支持 Vue 及其子项目的文档需求。
它以 Markdown 为中心的项目结构,以最少的配置帮助你专注于写作;享受 Vue + webpack 的开发体验,可以在 Markdown 中使用 Vue 组件,又可以使用 Vue 来开发自定义主题;它会为每个页面预渲染生成静态的 HTML,同时,每个页面被加载的时候,将作为 SPA 运行。
module.exports = {
title: 'Hello VuePress',
description: 'Hello, my friend!',
head: [
['link', {
rel: 'icon',
href: `/favicon.ico`
}]
],
dest: './docs/.vuepress/dist',
ga: '',
evergreen: true,
}
---
home: true
heroImage: /favicon.ico
actionText: 快速上手 →
actionLink: /guide/
features:
- title: 简洁至上
details: 以 Markdown 为中心的项目结构,以最少的配置帮助你专注于写作。
- title: Vue驱动
details: 享受 Vue + webpack 的开发体验,在 Markdown 中使用 Vue 组件,同时可以使用 Vue 来开发自定义主题。
- title: 高性能
details: VuePress 为每个页面预渲染生成静态的 HTML,同时在页面被加载的时候,将作为 SPA 运行。
footer: MIT Licensed | Copyright © 2018-present xxxxxx
---
README.md中的内容已完美呈现!
配置导航
首先在docs目录下建立文件
每个文件夹下的README.md就是当前目录的内容;
让我们通过config.js文件配置相应导航
themeConfig: {
nav: [
{ text: 'Home', link: '/' },
{ text: 'Guide', link: '/guide/' },
{
text: 'Languages',
items: [
{ text: 'Chinese', link: '/language/chinese' },
{ text: 'English', link: '/language/english' }
]
},
{ text: 'External', link: 'https://www.baidu.com' },
]
}
为guide文件下的README.md添加内容:
## This is guide
content...
### title3
content...
### title3-01
## small title
content...
运行项目点击导航Guide,或是通过Home页点击“快速上手”会看到如下画面:
此时我们能够看到guide内容已成功显示,点击Lanuages能看到下拉,点击External会跳转到百度;
配置侧边栏
依旧在config.js文件下的themeConfig属性下添加:
sidebarDepth: 2,
sidebar: [
{
title: 'Guide',
collapsable: false,
children: ['/guide/']
}
]
注:通过 themeConfig.sidebarDepth 来修改它的行为。默认的深度是 1,它将提取到 h2 的标题,设置成 0 将会禁用标题(headers)链接,同时,最大的深度为 2,它将同时提取 h2 和 h3 标题。
配置好后,运行项目
总结
通过上述操作,本项目已成功完成了技术文档的基本模型,如更个性化的配置可通过官网按需求优化;
到此,本文结束~