2019-10-22 seo达人
使用docbox定制API文档
什么是docbox
docbox的安装
克隆项目
部署方式
docbox的编写
定制logo及UI
更换代码背景色
插入自己的logo
三列改为双列
其他定制UI
在公司实习了一个月，由于业务需要，我花了大概一周时间对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'>
1
<div class='endpoint dark fill-blue round '>
1
插入自己的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
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务。