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