VitePress 文章目录自动化助手，一键生成导航，告别繁琐配置

2023-02-22 22:38:56

释放文档管理的双手：VitePress Auto Sidebar 插件

1. VitePress Auto Sidebar：简介

VitePress 作为基于 Vue.js 的静态站点生成器，其快速、轻便的特性深受开发者喜爱。然而，随着文档数量的激增，手动配置目录（sidebar）的繁琐性成为不可忽视的痛点。为此，VitePress Auto Sidebar 插件应运而生，它能自动读取项目中的 Markdown 文章，基于目录结构生成 sidebar 和 nav 配置，大幅简化文档管理流程。

2. 安装与使用

安装 VitePress Auto Sidebar 插件只需在项目中运行 npm install vitepress-auto-sidebar 命令。在 vitepress.config.js 文件中添加以下配置：

module.exports = {
  plugins: [
    'vitepress-auto-sidebar'
  ]
}

如此一来，插件的安装与配置便已完成。

3. 插件功能

3.1 读取项目文章

插件自动读取项目中的 Markdown 文章，将文章路径和标题存储在内存中，用于生成 sidebar 和 nav 配置。

3.2 生成 sidebar 和 nav 配置

根据文章路径和标题，插件自动生成 sidebar 和 nav 配置。sidebar 配置用于左侧目录导航，nav 配置用于顶部导航栏。

3.3 应用 sidebar 和 nav 配置

生成的 sidebar 和 nav 配置被应用到 VitePress 站点中，从而在文档网站中自动呈现目录导航和导航栏。

4. 自定义与常见问题解答

4.1 自定义 sidebar 和 nav 配置

在 vitepress.config.js 文件中配置 sidebar 和 nav 选项，可对 sidebar 和 nav 配置进行自定义。

4.2 插件是否支持多级目录？

插件支持多级目录，根据文章目录结构自动生成多级目录导航。

4.3 插件是否支持分组？

插件支持分组，可通过配置 sidebarGroups 选项对 sidebar 进行分组。

4.4 其他常见问题解答

如何查看生成的 sidebar 和 nav 配置？

console.log(require('vitepress-auto-sidebar').getSidebar())
console.log(require('vitepress-auto-sidebar').getNav())

如何排除某些文章？

module.exports = {
  plugins: [
    'vitepress-auto-sidebar',
    {
      exclude: ['/README.md', '/LICENSE.md']
    }
  ]
}

如何使用自定义渲染函数？

module.exports = {
  plugins: [
    'vitepress-auto-sidebar',
    {
      renderSidebarItem: (item) => {
        return `<li><a href="${item.link}">${item.text}</a></li>`
      }
    }
  ]
}