vuepress 配置文件分类管理

avatar
作者
筋斗云
阅读量:2

背景

在.vuepress的config.js配置文件中,我们需要设置head, plugins, nav三项主要配置。

如果都写在config.js就会显得很臃肿,不便于维护。

代码

config.js
const headConf = require("./config/headConf"); const pluginsConf = require("./config/pluginsConf"); const navConf = require("./config/navConf");  module.exports = {     title: 'JeecgFlow',     description: 'JeecgFlow是基于jeecgboot开源版本集成activiti, flowable,camunda,实现快速开发的脚手架',     head:  headConf,     plugins: pluginsConf,     themeConfig: {         logo: '/assets/img/logo.png',         nav: navConf       },       configureWebpack: {         resolve: {           alias: {             '@alias': 'path/to/some/dir'           }         }       }  }  

headConf.js

module.exports = [     ['link', { rel: 'icon', href: '/assets/img/favicon.ico' }],     ['meta', { name: 'author', content: 'xxx' }],     ['meta', { name: 'keywords', content: 'xxx, flowable,camunda' }],     [         'script', {}, `         var _hmt = _hmt || [];         (function() {           var hm = document.createElement("script");           hm.src = "https://hm.baidu.com/hm.js?e8706f16d97116d6080cba0e30affba2";           var s = document.getElementsByTagName("script")[0];            s.parentNode.insertBefore(hm, s);         })();         </script>                 `     ]      ] 

navConf.js

module.exports = [     { text: '首页', link: '/' },     { text: '指南', link: '/about/' },     { text: '业务案例', link: '/case/' },     {       text: '知识点',       items: [         { text: '基础篇', items: [           { text: '定时器', link: '/timer/' },           { text: '四大网关', link: '/gateway/' },           { text: '消息事件', link: '/message/' },           { text: '信号事件', link: '/signal/' },           { text: '补偿事件', link: '/offset/' },           { text: '错误事件', link: '/error/' },         ] },         { text: '进阶篇', items: [           { text: '子流程', link: '/subprocess/' },           // { text: '决策表', link: '/subprocess/' },           // { text: '连接器', link: '/subprocess/' },         ] }       ]     },     { text: '项目交付', link: '/ship/' },     { text: '常见问题', link: '/faq/' },     { text: '视频教程', link: 'https://space.bilibili.com/408246123' },     { text: '官网', link: 'http://www.jeecgflow.com' },   ] 

pluginsConf.js

module.exports = {     '@vuepress/back-to-top': true,     '@vuepress/google-analytics':{       'ga': 'G-G45H9LT9CL'     },     "vuepress-plugin-auto-sidebar": {       nav: true     },     '@vuepress/medium-zoom': {       selector: 'img.zoom',       options: {         margin: 16       }     }   } 

按照以上步骤,即完成了config分类设置。

最终成品: doc.jeecgflow.com

广告一刻

为您即时展示最新活动产品广告消息,让您随时掌握产品活动新动态!