国产精品一久久香蕉产线看,国产精品妇女一二三区,国产在线无码一区二区三区

使用docbox定制API文檔

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啦！！！

下面給大家列出一些用docbox定制API文檔的網站

Mapbox API文檔

Mapillary的API文檔和Tiles文檔

HYCON 8th

Wall

藍藍設計( www.lzhte.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗、交互設計、 網站建設 、平面設計服務。

使用docbox定制API文檔

分類

日歷

鏈接

個人資料

存檔