2019-10-22 seo達(dá)人
使用docbox定制API文檔
什么是docbox
docbox的安裝
克隆項(xiàng)目
部署方式
docbox的編寫
定制logo及UI
更換代碼背景色
插入自己的logo
三列改為雙列
其他定制UI
在公司實(shí)習(xí)了一個(gè)月，由于業(yè)務(wù)需要，我花了大概一周時(shí)間對docbox的安裝，編寫，定制化等進(jìn)行了詳細(xì)的研究，下面給大家分享一下我的總結(jié)
什么是docbox
Docbox是一個(gè)開源的REST API文檔系統(tǒng)。它采用結(jié)構(gòu)化的Markdown文件，并生成帶有導(dǎo)航，固定鏈接的兩列布局。下面是官方example圖片：
docbox的安裝
克隆項(xiàng)目
直接去官網(wǎng)https://github.com/tmcw/docbox，然后克隆即可。
部署方式
在使用npm命令前需要下載Node.js，npm會(huì)根據(jù)package.json配置文件中的依賴配置下載安裝
接著，在/content下放入.md文件，并使用 npm run build 命令，生成一個(gè)包含所需要的js代碼的bundle.js文件，同時(shí)創(chuàng)建一個(gè)新的index.html文件
重要的就是index.html、bundle.js、/css這三個(gè)文件和文件夾
docbox的編寫
在/content下放入.md文件（markdown語法俺就不說了哈……）
對/src/custom/content.js中添加需要引入的.md文件位置和以及標(biāo)題
注意： /src/custom/content.js中放入的是一級(jí)標(biāo)題、二級(jí)和三級(jí)標(biāo)題需要在.md文件中編寫。
定制logo及UI
修改/src/custom/index.js文件
修改對應(yīng)標(biāo)簽的屬性即可，定制時(shí)修改生成的index.html是沒有用的，因?yàn)閕ndex.html里的標(biāo)簽是被動(dòng)態(tài)寫死的。
更換代碼背景色
<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默認(rèn)情況下是顯示三列布局，但我們可以在app.js下進(jìn)行修改使之默認(rèn)為雙列布局。將下圖的1改為2即可切換雙列模式
其他定制UI
像下圖一樣，我們可以修改并填寫代碼得到自己想要的頁面樣式，比如說我在最上方加了一個(gè)固定位置的區(qū)域，然后可以在這個(gè)區(qū)域添加相應(yīng)的超鏈接等。
app.js里可以找到圖中對應(yīng)的標(biāo)簽和js代碼，docbox支持多種語言切換，我們在需要的地方加入我們想要加入的標(biāo)簽，并在/css文件夾中對相應(yīng)的css文件添加樣式就可以定制我們想要的UI啦?。?！
下面給大家列出一些用docbox定制API文檔的網(wǎng)站
Mapbox API文檔
Mapillary的API文檔和Tiles文檔
HYCON 8th
Wall
藍(lán)藍(lán)設(shè)計(jì)( www.wnxcall.com )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)。
藍(lán)藍(lán)設(shè)計(jì)的小編 http://www.wnxcall.com