zoukankan      html  css  js  c++  java
  • 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

  • 相关阅读:
    你想了解数据库吗,进来瞧一瞧吧,详细的数据库解读
    MySQL8.0-INFORMATION_SCHEMA增强
    工作总结:涉及数据库、软件测试等内容
    MySQL高级-MySQL锁
    年轻就该多尝试,教你20小时Get一项新技能
    “TensorFlow 开发者出道计划”全攻略,玩转社区看这里!
    MySQL数据库高级操作(图文详解)
    JAVA RMI helloworld入门
    JAVA8 十大新特性详解
    Java 8 Lambda表达式探险
  • 原文地址:https://www.cnblogs.com/dshvv/p/15386262.html
Copyright © 2011-2022 走看看