Giter VIP home page Giter VIP logo

vitepress-auto-configure-nav-sidebar's Introduction

@w3ctech-editorial-department/vitepress-auto-configure-nav-sidebar

vitepress 自动生成导航栏以及边栏

Feature

  • 支持功能
    • 自动生成 nav 和 sidebar 配置
    • TypeScript 支持
    • 目录/文件前缀设置,默认为「📂」/「✏️」,目录前缀也可能会有「📜」
    • 目录/文件的过滤

Usage

安装插件

pnpm add --save-dev|-D @w3ctech-editorial-department/vitepress-auto-configure-nav-sidebar

vitepress 配置中使用插件,示例如下

import AutoConfigureNavSidebarPlugin from '@w3ctech-editorial-department/vitepress-auto-configure-nav-sidebar'

const { nav, sidebar } = AutoConfigureNavSidebarPlugin({
  collapsed: true,
  isCollapse: true,
  showNavIcon: false,
  singleLayerNav: true,
  showSidebarIcon: true,
  ignoreFolders: ['.vuepress'],
})

module.exports = {
  themeConfig: {
    nav,
    sidebar,
  },
}

Options

属性 类型 默认值 描述
entry String 'docs' 设置相对于项目根目录的检索入口
singleLayerNav Boolean false 是否设置单层 nav
showTopLevelIndexUnderNav Boolean false 是否在 nav 展示 index
showSidebarIcon Boolean false 显示 sidebar 修饰
showNavIcon Boolean true 显示 nav 修饰
isCollapsible Boolean true sidebar 是否可折叠
ignoreFolders String[] [] 需要排除的一些目录
ignoreFiles String[] [] 需要排除的一些文件
filePrefix String ✏️ 文件前缀修饰,有助于区分
dirPrefix String 📂 目录前缀修饰,有助于区分
collapsed Boolean false sidebar 默认不折叠
customParentFolderName String '' 自定义侧边栏父文件夹的显示文本,不设置或为空还是默认显示原父文件夹名
customIndexFileName String '' 自定义侧边栏 index.md 文件的显示文本,不设置或为空还是默认显示原文件名

vitepress-auto-configure-nav-sidebar's People

Stargazers

Jrson avatar Kalila avatar h7ml avatar jackloves111 avatar  avatar 流浪大法师 avatar

Watchers

yubo avatar Wendy avatar Fei (Faye) Fang avatar 流浪大法师 avatar SheroLXZ avatar NingYanGuo avatar Jiayi Li avatar Chu avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.