vuepress 配置文件分类管理

背景

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

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

代码

config.js
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

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>        
        `
    ]
    
]
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

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

相关推荐
水w4 天前
VuePress v2 快速搭建属于自己的个人博客网站
开发语言·前端·vue·vuepress
寒山李白2 个月前
VuePress搭建文档网站/个人博客(详细配置)主题配置-侧边栏配置
前端·vue.js·vue·博客·vuepress·网站
星石传说4 个月前
vuepress搭建个人文档
项目·vuepress·个人文档
PeterJXL4 个月前
自建搜索引擎-基于美丽云
搜索引擎·博客·博客搭建·vuepress·美丽云
PeterJXL5 个月前
VuePress 的更多配置
博客·博客搭建·vuepress
PeterJXL5 个月前
关于 VuePress 的插件
博客搭建·vuepress
PeterJXL5 个月前
VuePress介绍
vue·博客·博客搭建·vuepress
小妖剑5 个月前
10分钟部署一个个人博客
vue·博客·vuepress
Shayn6665 个月前
[已解决] 使用vuepress-plugin-search-pro时编译出错Error: SlimSearch: duplicate ID
前端·vue·vuepress