1、需求背景
在构建大型网站, 尤其是工具类系统中, 会有一个说明文档模块, 目前我部门开发的两个工具类系统中, 包含大量的静态内容模块（点击跳转到静态网站部分）：ReadPaper BIOS, 这里有两个问题:
1、如何将网站上的静态内容与网站的核心功能隔离开，不影响主流程的敏捷迭代？
2、如何解放开发人员，将这些内容编辑工作交给产品经理或运营人员维护？
2、解决方案
使用vue官网提供的静态资源网站生成工具 : vuePress 官网，快速构建独立的静态文档系统，采用 iframe 的方式嵌入主网站中，流程如下：
1、经过配置，完成项目的搭建，就可以编辑一系列的markdown文档
2、将静态资源网站部署到服务器上(nginx配置web项目)
3、用Jenkins完成项目的构建发布（或手动构建部署）
3、VuePress介绍
VuePress 是一个基于vue.js 实现的静态网站生成器,为支持 Vue 子项目的文档需求而创建的工具, 它由两部分组成:
- 以 Vue 驱动的主题系统的简约静态网站生成工具
- 为编写技术文档而优化的默认主题
由vuePress生成的每个页面,都具有相应的预渲染静态HTML,他们能提供出色的加载性能,并且对SEO友好。
用户在浏览vuePress站点时, 页面是按需加载的。
4、使用成本
- 熟悉markdown语法，可以使用Markdown语法进行网页内容编辑
- 熟悉vuePress工具使用，包括配置、主题和构建流程
- 跨域请求访问，实现主网站和子网站的通讯请求
- web站点服务端部署
5、项目目录
6、实现效果
点击查看 :
7、快速搭建静态资源网站示例
// 1. 创建并进入一个新目录
mkdir vuepress-demo && cd vuepress-demo
// 2. 初始化包管理器
yarn init 或者 npm init
// 3. 将vuePress安装为本地依赖
yarn add -D vuepress 或者 npm install -D vuepress
// 4. 创建第一篇测试文档
mkdir docs && echo '# Hello World'
// 5. 在package.json文件中,添加scripts对象,添加运行脚本
"docs:dev":"vuepress dev docs"
// 6. 本地启动服务器
yarn docs:dev 或者 npm run docs:dev
8、侧边栏配置项
module.exports = {
themeConfig: {
// navbar: false, //禁用导航栏
sidebar: { //侧边拦
'/word-docs/EN/': [
{
title: 'BIOS V2.2',
sidebarDepth: 0, //不深度展开
children: ['','download-V2.2','release-notes-V2.2','statistics-V2.2','quality-V2.2','license-V2.2'],
},
{
title: 'BIOS V2.1',
sidebarDepth: 0,
children: ['introduction-V2.1','download-V2.1','release-notes-V2.1','statistics-V2.1','quality-V2.1','license-V2.1']
},
{
title: 'BIOS V1',
sidebarDepth: 0,
children: ['introduction-V1','download-V1','release-notes-V1','statistics-V1','quality-V1','license-V1'],
}
]
......
}
},
description: 'xxx',
base: '/doc/',
head: [
[
'script',
{
src: '/assets/js/index.js'
}
]
]
}
