vuePress2.x 多頁面 多目錄生成方案

前言

因為官網介紹的都只有一個‘一級標題’ 只有一個markdown文件
最終編譯后也只有一個html文件，類似於spa 單頁項目
如何才有多頁項目呢
百度查詢 網上插件庫有很多，大部分不能用，
后來還是自己想出來的，很簡單，辦法如下

方案

新建文件 utils>gen-side.js

const fs = require('fs');

fs.readdir('./docs',(err,files)=>{
	if (err) {
		console.log(err);
	} else{
		const sidebar = files.filter(item=>item.indexOf('.md')>-1&&item!=='index.md');
		sidebar.unshift('index.md');
		sidebar.sort((a,b)=>{return a - b});
		const content = `module.exports =${JSON.stringify(sidebar)}`;
		fs.writeFile('./utils/sidebar.js', content, { encoding: 'utf8' }, err => {console.log(err);});
	}
})

或者

const fs = require('fs');

fs.readdir('./docs', (err, files) => {
	if (err) {
		console.log(err);
	} else {
		const sidebar = files.filter(item => item.indexOf('.md') > -1 && item !== 'index.md');
		sidebar.sort((a, b) => { return a - b });
		const sidebarFull = sidebar.map(item => ({
			text: item.substr(0, item.length - 3),
			link: item
		}))
		sidebarFull.unshift({
			text: '簡介',
			link: 'index.md'
		});
		const content = `module.exports =${JSON.stringify(sidebarFull)}`;
		fs.writeFile('./utils/sidebar.js', content, { encoding: 'utf8' }, err => { console.log(err); });
	}
})

然后引入使用
[項目名]/docs/.vuepress/config.js

const sidebar = require('../../utils/sidebar');
const { defaultTheme } = require('@vuepress/theme-default')

module.exports = {
  lang: 'zh-CN',
  title: 'JavaScript高級程序設計（第4版）',
  description: 'JavaScript高級程序設計 紅寶書',
  base: '/red-treasure-book/dist/',
  dest: './dist',
  head: [['script', { src: './js/head.js' }]],
  theme: defaultTheme({
    sidebar,
    navbar: [
      {
        text: '博客',
        link: 'https://www.cnblogs.com/dshvv',
      },
      {
        text: '語雀',
        link: 'https://www.yuque.com/dingshaohua',
      },
      {
        text: '關於我',
        link: 'https://www.baidu.com/s?wd=甲乙丙丁少',
      }
    ]
  })
}

每次新建了一個markdown文件的時候，只需要運行一下 node ./utils/gen-side.js 然后再啟動項目即可npm run docs-dev

不同子路徑中使用不同的側邊欄

如果你想在不同子路徑中使用不同的側邊欄，你可以將該配置項設置為 側邊欄對象 ：

export default {
  theme: defaultTheme({
    // 側邊欄對象
    // 不同子路徑下的頁面會使用不同的側邊欄
    sidebar: {
      '/guide/': [
        {
          text: 'Guide',
          children: ['/guide/README.md', '/guide/getting-started.md'],
        },
      ],
      '/reference/': [
        {
          text: 'Reference',
          children: ['/reference/cli.md', '/reference/config.md'],
        },
      ],
    },
  }),
}

用這個腳本 生成即可

import fs from 'fs';
import path from 'path';

// 此腳本用於vuepress生成菜單 支持不同路由對應不同目錄（我這里只支持兩層嵌套目錄）
const travel = (dir) => {
  const sidebar = {};
  const handel = (dir) => {
    for (const file of fs.readdirSync(dir)) {
      if (file !== '.vuepress' && file !== 'README.md' && file !== '_category_.json' && file !== 'index.md') {
        const pathName = path.join(dir, file);
        const pathNameArr = pathName.split('\\'); // 根據這個判斷當前遍歷到第幾次了
        if (pathNameArr.length === 2) {  // 遍歷第1層的時候 將文件夾作為pathNameSpace
          sidebar[`/${file}/`] = [];
        } else if (pathNameArr.length === 3) { // 遍歷第2層的時候 將文件夾作為折疊導航，文件則不導航
          if (fs.statSync(pathName).isDirectory()) {
            console.log(pathName);
            sidebar[`/${pathNameArr.at(1)}/`].push({
              text: pathNameArr.at(-1).split('_').join(' '),
              link: (pathName.replace('docs', '') + '\\index.md').split('\\').join('/'),
              collapsible: true,
              children: []
            });
          } else {
            sidebar[`/${pathNameArr.at(1)}/`].push({
              text: pathNameArr.at(-1).replace('.md', '').split('_').join(' '),
              link: pathName.replace('docs', '').split('\\').join('/')
            });
          }
        } else if (pathNameArr.length === 4) { // 遍歷第3層的時候 3層的文件夾就是你的markdown，不能再有目錄 我這里只支持兩層嵌套目錄
          const current = sidebar[`/${pathNameArr.at(1)}/`].find((item) => {
            return item.text == pathNameArr.at(2).split('_').join(' ')
          });
          current.children.push({
            text: pathNameArr.at(-1).replace('.md', '').split('_').join(' '),
            link: pathName.replace('docs', '').split('\\').join('/'),
          });
        }


        if (fs.statSync(pathName).isDirectory()) {
          handel(pathName);
        } else {

        }
      }
    }
  }
  handel(dir);
  return sidebar;
}

const sidebar = travel('docs/')
const content = `export default ${JSON.stringify(sidebar, null, 2)}`;
fs.writeFile("./utils/sidebar.ts", content, { encoding: "utf8" }, (err) => {
  console.log(err);
});