vuepress wiki系统

支持markdown的wiki系统

一.背景

VuePress 由两部分组成：第一部分是一个极简静态网站生成器，它包含由 Vue 驱动的主题系统和插件 API，另一个部分是为书写技术文档而优化的默认主题，它的诞生初衷是为了支持 Vue 及其子项目的文档需求。

每一个由 VuePress 生成的页面都带有预渲染好的 HTML，也因此具有非常好的加载性能和搜索引擎优化（SEO）。同时，一旦页面被加载，Vue 将接管这些静态内容，并将其转换成一个完整的单页应用（SPA），其他的页面则会只在用户浏览到的时候才按需加载。

优势

  • markdown编写
  • 静态化页面
  • 轻量化,不需要数据库等的支持,可以与github wiki系统集成

二.基本使用

  1. 安装
    • 安装node >8
    • npm vuepress i -g
  2. 搭建
    VuePress 遵循 “约定优于配置” 的原则，推荐的目录结构如下：
.
├── docs
│   ├── .vuepress (可选的)
│   │   ├── components (可选的)
│   │   ├── theme (可选的)
│   │   │   └── Layout.vue
│   │   ├── public (可选的)
│   │   ├── styles (可选的)
│   │   │   ├── index.styl
│   │   │   └── palette.styl
│   │   ├── templates (可选的, 谨慎配置)
│   │   │   ├── dev.html
│   │   │   └── ssr.html
│   │   ├── config.js (可选的)
│   │   └── enhanceApp.js (可选的)
│   │ 
│   ├── README.md
│   ├── guide
│   │   └── README.md
│   └── config.md
│ 
└── package.json
  1. config.js 核心配置文件

主要维护导航菜单配置

  • nav

顶部导航栏

nav: [
    {text: '主页', link: '/'},
    {text: 'JAVA', link: '/java/',
        items: [
            {text: 'spring', link: '/java/spring/'},
            {text: 'jpa', link: '/java/jpa/'},
        ]
    },
    {text: 'VUE', link: '/vue/'},
    {text: 'Hadoop', link: '/hadoop/'},
],

四个一级菜单,通过items嵌套二级菜单

  • sidebar

侧边导航栏

 sidebar: {
    '/java/': [
        ['/java/', 'java简介'],
        {
            title: "spring",
            collapsable: false,
            children: [
                ['/java/spring/Security.md', 'spring安全框架'],
                ['/java/spring/Social.md', 'spring social'],
            ]
        }],
}

1.侧边栏通过children进行嵌套
2.通过link地址匹配与nav保持同步

三.场景

  • 项目文档系统
  • 个人博客系统

参考资料

VuePress 中文网