使用docbox定制API文档

在公司实习了一个月，由于业务需要，我花了大概一周时间对docbox的安装，编写，定制化等进行了详细的研究，下面给大家分享一下我的总结

什么是docbox

Docbox是一个开源的REST API文档系统。它采用结构化的Markdown文件，并生成带有导航，固定链接的两列布局。下面是官方example图片：

docbox的安装

克隆项目

直接去官网https://github.com/tmcw/docbox，然后克隆即可。

部署方式

在使用npm命令前需要下载Node.js，npm会根据package.json配置文件中的依赖配置下载安装

接着，在/content下放入.md文件，并使用 npm run build 命令，生成一个包含所需要的js代码的bundle.js文件，同时创建一个新的index.html文件

重要的就是index.html、bundle.js、/css这三个文件和文件夹

docbox的编写

• 在/content下放入.md文件（markdown语法俺就不说了哈……）
• 对/src/custom/content.js中添加需要引入的.md文件位置和以及标题
  
  
  注意： /src/custom/content.js中放入的是一级标题、二级和三级标题需要在.md文件中编写。
  
  

定制logo及UI

• 修改/src/custom/index.js文件
  修改对应标签的属性即可，定制时修改生成的index.html是没有用的，因为index.html里的标签是被动态写死的。

更换代码背景色

<div class='round-left pad0y pad1x fill-green code small endpoint-method'>

<div class='endpoint dark fill-blue round '>

插入自己的logo

• 修改/src/components/app.js文件
  

三列改为双列

docbox默认情况下是显示三列布局，但我们可以在app.js下进行修改使之默认为双列布局。将下图的1改为2即可切换双列模式

其他定制UI

像下图一样，我们可以修改并填写代码得到自己想要的页面样式，比如说我在最上方加了一个固定位置的区域，然后可以在这个区域添加相应的超链接等。

app.js里可以找到图中对应的标签和js代码，docbox支持多种语言切换，我们在需要的地方加入我们想要加入的标签，并在/css文件夹中对相应的css文件添加样式就可以定制我们想要的UI啦！！！

下面给大家列出一些用docbox定制API文档的网站

Mapbox API文档
Mapillary的API文档和Tiles文档
HYCON 8th
Wall