VuePress-Parse-Bar

A simple plugin for vuepress to generate sidebar or navbar.

Motivation

I used to use docsify to generate my static web files.

In docsify, I can put a markdown file named _sidebar.md in the subdirectory of my documents to represent the sidebar.

However, I found that I need to use javascript to configure my sidebar when I use vuepress's default theme. And it's trivial.

How to use

1. install the package

npm i -D vuepress-parse-bar

2. config your vuepress

docs
├── example1/
│   ├── example1-1.md
│   ├── example1-2.md
│   ├── index.md
│   └── sidebar.md
├── example2/
│   ├── example2-1.md
│   ├── example2-2.md
│   ├── index.md
│   └── sidebar.md
├── index.md
├── navbar.md
└── .vuepress/
    └── config.js

import { viteBundler } from '@vuepress/bundler-vite'
import { defaultTheme } from '@vuepress/theme-default'
import { defineUserConfig } from 'vuepress'
import path from 'node:path'
import url from 'url'
import {parseBar, scanBarFile} from 'vuepress-parse-bar'

const __filename = url.fileURLToPath(new url.URL(import.meta.url));
const workspace = path.resolve(__filename, '..', '..');

export default defineUserConfig({
  bundler: viteBundler(),
  title: 'VuePress-Parse-Bar',
  base: '/vuepress-parse-bar/',
  repo: 'h-hg/vuepress-parse-bar',
  theme: defaultTheme({
    navbar: parseBar(path.join(workspace, 'navbar.md'), '/', false),
    sidebar: {
      '/example1/': parseBar(path.join(workspace, 'example1', 'sidebar.md'), '/example1'),
      '/example2/': parseBar(path.join(workspace, 'example2', 'sidebar.md'), '/example2'),
    }
    // Alternative, you can use the following configuration,
    // and it will scan all the sidebar.md automatically
    // sidebar: scanBarFile(workspace, '/', 'sidebar.md')
  }),
})