背景
记录vuepress配置步骤，以便下次使用快速上手。
读此文章之前默认您已经学会了创建vuepress项目。
vuepres快速开始
最终成品
doc.jeecgflow.com
配置步骤
创建`.vuepress` 目录。
你的文档目录下创建一个
.vuepress目录。创建.vuepress/config.js
module.exports = {title: 'Hello VuePress',description: 'Just playing around'
}
修改默认主题
在文档项目的根目录下的README.md文件设置默认主题
---
home: true
heroImage: /hero.png
heroText: Hero 标题
tagline: Hero 副标题
actionText: 快速上手 →
actionLink: /zh/guide/
features:
- title: 简洁至上details: 以 Markdown 为中心的项目结构，以最少的配置帮助你专注于写作。
- title: Vue驱动details: 享受 Vue + webpack 的开发体验，在 Markdown 中使用 Vue 组件，同时可以使用 Vue 来开发自定义主题。
- title: 高性能details: VuePress 为每个页面预渲染生成静态的 HTML，同时在页面被加载的时候，将作为 SPA 运行。
footer: MIT Licensed | Copyright © 2018-present Evan You
---
导航栏目logo
在.vuepress创建public文件夹，并在此创建assets/img文件夹。放入logo.png
module.exports = {themeConfig: {logo: '/assets/img/logo.png',}
}
创建导航栏目连接
在 .vuepress/config.js 文件夹进行添加nav配置信息。
module.exports = {title: 'xxx',description: 'xxx',themeConfig: {logo: '/assets/img/logo.png',nav: [{ text: '首页', link: '/' },{ text: '介绍', link: '/me/' },{ text: '安装', link: '/install/' },{text: 'Languages',ariaLabel: 'Language Menu',items: [{ text: 'Chinese', link: '/language/chinese/' },{ text: 'Japanese', link: '/language/japanese/' }]},{text: '工作流',items: [{ text: 'Activiti', items: [{ text: 'Chinese', link: '/language/chinese/' },{ text: 'Japanese', link: '/language/japanese/' }] },{ text: 'Flowable', items: [{ text: 'Chinese', link: '/language/chinese/' },{ text: 'Japanese', link: '/language/japanese/' }] },{ text: 'Camunda', items: [{ text: 'Chinese', link: '/language/chinese/' },{ text: 'Japanese', link: '/language/japanese/' }] }]},{ text: '官网', link: 'http://www.jeecgflow.com' },]},configureWebpack: {resolve: {alias: {'@alias': 'path/to/some/dir'}}}
}
导航栏更多配置
侧边栏使用
文章内快速检索，也就是为文章生成TOC目录。在所需文章设置sidebar: auto
此种方式使用较少！！！
---
sidebar: auto
---## 一级标题
### 1.1 小标题## 二级标题
### 1.1 小标题## 三级标题
### 1.1 小标题## 四级标题
### 1.1 小标题
全局配置，在.vuepress/config.js进行全局侧边栏自动生成配置
themeConfig: {logo: '/assets/img/logo.png',sidebar: 'auto'}
分组侧边栏, 在.vuepress/config.js， 根据某一个导航连接进行配置
sidebar: [{title: 'Bpmn', // 必要的path: '/bpmn/', // 可选的, 标题的跳转链接，应为绝对路径且必须存在collapsable: false, // 可选的, 默认值是 true,sidebarDepth: 1, // 可选的, 默认值是 1children: ['/bpmn/b-activiti','/bpmn/b-flowable','/bpmn/b-camunda']}
],
WX20240615-092428@2x.png
SEO
- 在.vuepress/config.js 添加如下配置， 可以完成SEO基本配置
module.exports = {head: [['link', { rel: 'icon', href: '/assets/img/favicon.ico' }],['meta', { name: 'author', content: 'xxx' }],['meta', { name: 'keywords', content: 'JeecgFlow是基于jeecgboot开源版本集成activiti, flowable,camunda' }]],}
back to top
yarn add -D @vuepress/plugin-back-to-topmodule.exports = {plugins: ['@vuepress/back-to-top']
}
google分析
yarn add -D @vuepress/plugin-google-analytics
module.exports = {plugins: [['@vuepress/google-analytics',{'ga': '' // UA-00000000-0}]]
}
分割config配置
主要分割heade, plugins,nav, sidebar。
vuepress-plugin-auto-sidebar
npm i vuepress-plugin-auto-sidebar -D
module.exports = {plugins: [["vuepress-plugin-auto-sidebar", {// options}]]
}
参考链接
VuePress数据统计添加
