• 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');
    
    module.exports = {
      lang: 'zh-CN',
      title: 'Iconify',
      description: 'JavaScript高级程序设计 红宝书',
      base: '/iconify-book/dist/',
      dest: './dist',
      themeConfig: {
        sidebar, //重点这里 引入
        navbar: [
          {
            text: '博客',
            link: 'https://www.cnblogs.com/dshvv',
          },
          {
            text: '语雀',
            link: 'https://www.yuque.com/dingshaohua',
          }
        ]
      }
    }
    

    每次新建了一个markdown文件的时候,只需要运行一下 node ./utils/gen-side.js 然后再启动项目即可npm run docs-dev

  • 相关阅读:
    Permission Denial: opening provider 隐藏的android:exported属性的含义
    GPL & Apache License
    JAVA把毫秒数转换成日期
    Android开发–Intent-filter属性详解
    [转]unix/linux中的dup()系统调用
    【转载】技术的正宗与野路子
    virtualbox -centos ping不通外网
    GNU Make 手册中文版
    Git源码学习
    git-gui
  • 原文地址:https://www.cnblogs.com/dshvv/p/15386262.html
Copyright © 2020-2023  润新知