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啦?。。?br />
下面給大家列出一些用docbox定制API文檔的網站
Mapbox API文檔
Mapillary的API文檔和Tiles文檔
HYCON 8th
Wall
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務。