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

帝皇彩票官网

追求卓越一诺千金

蓝蓝设计,2011年成立,主创清华团队,专注软件和互联网ui设计开发。擅长企业信息化管理、监控、大数据软件UIUE咨询和设计开发服务。立足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文档 « 中台是什么?听听大咖的看法 | 帝皇彩票官网2020年最全设计趋势»


蓝蓝 http://www.bjhbys.com

订阅Rss
状元彩票开奖 桔子彩票网址 迪士尼彩乐园官方网址 安徽快3走势 桔子彩票登陆 桔子彩票网址 迪士尼彩乐园 吉利彩票导航 北京赛车 全民彩票