使用docbox定制API文档 - 蓝蓝设计_UI设计公司

帝皇彩票官网

使用docbox定制API文档

2019-10-22 释然 前端及开发文章及欣赏

使用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.bjhbys.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计  cs界面设计  ipad界面设计  包装设计  图标定制  用户体验 、交互设计、 网站建设 平面设计服务

标签: 使用docbox定制API文档

Powered by sitemap
迪士尼彩乐园 吉利彩票投注 帝皇彩票官网 博发彩票开户 帝皇彩票官网 吉利彩票投注 桔子彩票开奖 大象彩票APP 状元彩票平台 福建快三注册