您现在的位置是：首页 > 文章详情

yidocs-auto，vitepress 文档侧边栏和导航栏自动生成工具

日期：2023-05-23点击：413收藏

yidocs-auto

作用

vitepress 导航栏和侧边栏自动生成工具

无需手写侧边栏和顶部导航栏配置！！！

谁开发的

官网 https://yicode.tech

yicode（易编程）系列软件开发生态，全部由陈随易自 2019 年维护至今。

致力于为中小企业、外包公司、软件工作室和个人开发者，提供技术规范、项目模板、效率工具等。

效果

实际效果，请浏览易文档 https://doc.yicode.tech 查看。

本文档的 顶部导航 和 左侧目录，均为自动生成。

截图

安装

以下方式，根据自己的情况，任选一种

npm install @yicode/yidocs-auto -D
pnpm add @yicode/yidocs-auto -D
yarn add @yicode/yidocs-auto -D

使用

参考如下案例即可

import { defineConfig } from 'vitepress';

import { docsAuto } from '@yicode/yidocs-auto';

let { sideBar, navBar } = docsAuto();

export default defineConfig({
    base: '/',
    title: '易文档 - 随易科技',
    description: '何以解忧，唯有代码。',
    lastUpdated: true,
    markdown: {
        theme: 'material-theme-palenight',
        lineNumbers: true
    },
    outDir: './dist',
    srcDir: './markdown',
    titleTemplate: false,
    head: [
        //
        [
            //
            'link',
            {
                rel: 'stylesheet',
                href: 'https://static.yicode.tech/vitepress/vitepress.css'
            }
        ],
        [
            'link',
            {
                rel: 'shortcut icon',
                href: '/favicon.ico'
            }
        ]
    ],
    themeConfig: {
        logo: '/logo.png',
        lastUpdatedText: '更新时间',
        siteTitle: '易文档',
        outline: 'deep',
        outlineTitle: '大纲',
        socialLinks: [
            //
            { icon: 'github', link: 'https://github.com/chenbimo' }
        ],
        footer: {
            message: '随易科技 - 用心做软件',
            copyright: 'Copyright © 2019-present 随易科技'
        },
        docFooter: {
            prev: '上一页',
            next: '下一页'
        },
        nav: navBar, // 注意：这里不需要手动配置了
        sidebar: sideBar // 注意：这里不需要手动配置了
    }
});

结构

.
├── markdown
│   ├── 1-开源
│   │   ├── 1-yite-cli
│   │   │   ├── 1-基本简介
│   │   │   │   ├── 1-基本介绍.md
│   │   │   │   └── 2-快速体验.md
│   │   │   └── 2-项目架构
│   │   │       └── 1-目录含义.md
│   │   ├── 2-yibase-vue3
│   │   │   └── 1-基本介绍
│   │   │       └── 1-基本介绍.md
│   │   └── 3-yiapi
│   │       ├── 1-基本简介
│   │       │   ├── 1-基本介绍.md
│   │       │   └── 2-快速体验.md
│   │       └── 2-项目架构
│   │           └── 1-目录含义.md
│   ├── 2-关于
│   │   └── 1-站长信息
│   │       ├── 1-关于站长.md
│   │       └── 2-程序人生.md
│   ├── public
│   │   ├── favicon.ico
│   │   └── logo.png
│   └── index.md
└── package.json