Vuepress Plugin Auto Sidebar 使用教程

Vuepress Plugin Auto Sidebar 使用教程

vuepress-plugin-auto-sidebar项目地址:https://gitcode.com/gh_mirrors/vu/vuepress-plugin-auto-sidebar

1. 项目的目录结构及介绍

Vuepress Plugin Auto Sidebar 项目的目录结构如下：

├── docs
│   ├── .vuepress
│   │   ├── config.js
│   │   └── public
│   ├── exampleMenu1
│   │   ├── exampleSubMenu1-1
│   │   │   └── file1.md
│   │   ├── exampleSubMenu1-2
│   │   │   └── exampleSubMenu1-2-1
│   │   │       └── file1.md
│   │   └── exampleSubMenu1-2
│   │       ├── file1.md
│   │       └── README.md
│   └── README.md
├── LICENSE
├── package.json
├── README.md
└── yarn.lock

目录结构介绍

• docs: 存放文档内容的目录。
  • .vuepress: Vuepress 配置目录。
    • config.js: Vuepress 主配置文件。
    • public: 静态资源目录。
  • exampleMenu1: 示例菜单目录。
    • exampleSubMenu1-1: 子菜单目录。
      • file1.md: Markdown 文件。
    • exampleSubMenu1-2: 子菜单目录。
      • exampleSubMenu1-2-1: 子菜单目录。
        • file1.md: Markdown 文件。
    • exampleSubMenu1-2: 子菜单目录。
      • file1.md: Markdown 文件。
      • README.md: 自述文件。
  • README.md: 项目主页内容。
• LICENSE: 项目许可证文件。
• package.json: 项目依赖和脚本配置文件。
• README.md: 项目自述文件。
• yarn.lock: Yarn 锁定文件。

2. 项目的启动文件介绍

项目的启动文件主要是 package.json 中的脚本配置。以下是常用的启动命令：

{
  "scripts": {
    "dev": "vuepress dev docs",
    "build": "vuepress build docs"
  }
}

启动命令介绍

• npm run dev: 启动开发服务器，实时预览文档变化。
• npm run build: 构建生产环境的静态站点。

3. 项目的配置文件介绍

项目的配置文件主要是 docs/.vuepress/config.js。以下是一个基本的配置示例：

module.exports = {
  title: 'Vuepress Auto Sidebar',
  description: '自动生成侧边栏的插件',
  plugins: [
    'vuepress-plugin-auto-sidebar'
  ],
  themeConfig: {
    nav: [
      { text: 'Home', link: '/' },
      { text: 'Guide', link: '/guide/' }
    ]
  }
}

配置文件介绍

• title: 网站标题。
• description: 网站描述。
• plugins: 引入的插件，这里使用了 vuepress-plugin-auto-sidebar。
• themeConfig: 主题配置，包括导航栏配置等。

通过以上配置，可以实现自动生成侧边栏的功能。

vuepress-plugin-auto-sidebar项目地址:https://gitcode.com/gh_mirrors/vu/vuepress-plugin-auto-sidebar