VuePress 搭建开发文档_vuepress 搭建文档-优快云博客

vuepress官网：https://vuepress.vuejs.org/zh/guide/getting-started.html
目录结构
.
├── docs
│ ├── .vuepress (可选的)
│ │ ├── components (可选的)
│ │ ├── theme (可选的)
│ │ │ └── Layout.vue
│ │ ├── public (可选的)
│ │ ├── styles (可选的)
│ │ │ ├── index.styl
│ │ │ └── palette.styl
│ │ ├── templates (可选的, 谨慎配置)
│ │ │ ├── dev.html
│ │ │ └── ssr.html
│ │ ├── config.js (配置文件的入口文件)
│ │ └── enhanceApp.js (可选的)
│ │
│ ├── README.md
│ ├── guide
│ │ └── README.md
│ └── config.md
│
└── package.json

基本配置【.vuepress/config.js】

网站的标题，描述信息配置

module.exports = {
  title: 'Hello VuePress',  // 网站标题
  description: 'Just playing around' // 网站描述
}

导航栏配置

module.exports = {
  .................
  themeConfig: {
    nav: [
      { text: 'Home', link: '/' },
      { text: 'foo', link: '/foo/' },
    ]
  }
}

在 docs 目录下新建 foo 文件夹，在foo 文件夹内新建 README.md 文件，否则点击 foo 页面会展示 404
在这里插入图片描述
3) 侧边栏

	module.exports = {
    ..................
    themeConfig: { 
        ................
        sidebar: { // 侧边栏配置
            '/foo/': [
              ['fooOne', '哈哈'],
              ['fooTwo', '嘿嘿']
            ]
          }
      }
  };

在 foo 文件夹下新建fooOne.md、fooTwo.md 文件

4）动态生成导航栏、侧边栏

4.1 新建 .vuepress/utils/nav-sidebar-auto.js 文件

const fs = require('fs');
const path = require('path');
const resolvePath = (dir) => path.resolve(__dirname, dir);
const dir = resolvePath('../../pages');  // 获取 pages 文件夹绝对路径 

const nav = []; // 导航栏
const sidebar = {}; // 侧边栏

// 动态生成导航栏
function createNav() {
  const  pages_folders = fs.readdirSync(dir);  // 读取 pages 下面所有的文件夹
  pages_folders.forEach(folder => { // 遍历文件夹
    const folder_Path = path.join(dir, folder); // 获取 pages 下文件夹绝对路径，eg: /xxx/.../pages/01_bar
    const folderInfo = fs.statSync(folder_Path); // 获取文件夹相关信息
    // 排除mac 文件：.DS_Store
    if(folderInfo.isDirectory && folder !== '.DS_Store') {
      const files = fs.readdirSync(folder_Path); // 获取文件夹下面所有文件名
      const text = folder.split('_')[1];
      const link = `/pages/${folder}/`;
      // 默认文件夹下第一个文件作为跳转
      nav.push({ text, link: link });
      sidebar[link] = createSideBar(files);
    }
  });
  console.log(nav);
  console.log(sidebar);
}

// 动态生成侧边栏
function createSideBar(files, pages = []) {
  files.forEach( file => {
    if (/\.md$/i.test(file) && file !== 'README.md') {// 
      const name = file.slice(0, -3);
      pages.push(name);
    }
  });
  return pages;
}

createNav();

module.exports = { nav, sidebar };

4.2 在 config.js 文件中引用

const { nav, sidebar } = require('./utils/nav-sidebar-auto.js');
module.exports = {
    title: '前端代码规范',
    description: '前端代码规范文档',
    themeConfig: {
        nav,
        sidebar
      }
  };

4.3 新建 pages 文件夹，文件夹内放几个.md 的测试文件
在这里插入图片描述
备注： 1.侧边栏取.md 文件内 title 的值
2. .md 文件内不能有错误语法，否则侧边栏显示路径

默认主题配置

 主题负责整个网站的布局和交互细节,默认主题提供了一些选项，可以自定义首页、导航栏、 侧边栏【[默认主题](https://vuepress.vuejs.org/zh/theme/default-theme-config.html)】

配置文件： docs/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
---