[Tools] 撰寫 API 工具:Slate 安裝與使用(windows)

itsems
itsems_frontend
Published in
8 min readMay 31, 2020
最近一直看到很多人在討論 slate,手上剛好有點空檔,就來摸摸看

slate 是一個可以用 md 撰寫 API 文件的輕量級工具,是用 ruby 執行,支援 Linux or macOS,不支援 windows,官方文件是說 windows 可能可以跑,但是不支援,不過我是跑起來了,打包後是靜態的 html 檔案,也可以推上 github

使用上除了保留 md 的單頁 link 功能之外,中間和右側的內容是同步滑動的,預設出的版面還會開啟內建的搜尋功能,還有很多人蠻喜歡的 import 另一支 md 文件的功能。

Outline:
1. Install
2. Intro
3. Demo
4. Build / Deploy

Install

前往 slate github 後,把這個 repo fork 到自己的空間,接下來 clone 進自己的電腦

  1. 執行 slate 需要安裝 ruby,windows 安裝這邊
  2. 還需要安裝 bundler:
$ gem install bundler

都裝好之後,執行官網的指令:

$ bundle install
$ bundle exec middleman server // 第一次安裝好之後,之後每次執行都是跑這段

就會看到已經跑起來啦:

Intro

安裝好之後,就可以來看看了,因為 Slate 使用 md 編寫,官網很貼心的在安裝流程後還附上 md 的格式

我們要寫的檔案,是 /source/index.html.md 這支,點開就可以看到預設的範例:

接下來一一來看這支 md 的內容:

第一大塊大部分是一些設定,對應如下圖:

language_tabs :API 文件可能寫給使用不同語言的人,所以這邊可以設定需要的語言,整頁右側內容會像是分頁一樣切換,支援的語言清單在這邊

includes :includes 的內容是另一支 md,他會自動引入在最下面的位置,要引入的 md 要放在 /includes 資料夾下

這邊有官方 wiki 針對 includes 更詳細的說明,有興趣的人可以刷刷

search :是一個內建的搜尋功能,true/false 開啟關閉

官方 wiki 文件說明在這邊

也因為是自己用 md 寫,所以看起來其實沒有什麼規定的格式,這邊列下幾個預設範例中有用到的幾種格式:

H1 大標與內文:

右側文字對應:

> :右側的說明文字

```語言 … ``` :剛剛設定的所需語言的 code block,在上方的語言分頁切換

```ruby
# This is some Ruby
```

```python
# This is some Python
```

H2 與 code block 生成位置:

code block 會生在上一個內文的下方,以上圖來看, ##Get All Kittens 下面是 ruby 的 code block,所以執行起來可以看到 code block 就在這個 h2 Get All Kittens 的下方:

把 devtool 開啟來看就很明顯了,對得很整齊

H3 — api 說明方式和參數表格

這邊的寫法就如 md 的格式一樣,可以寫這個 api 的方法,和參數及說明

Response JSON

response 的 json 也可以用剛剛的 code block 方式寫:

aside 提示說明文字

有底色的說明文字是 aside ,有3種可以使用:

  1. notice: 藍底提醒
<aside class="notice">You must replace <code>meowmeowmeow</code> with your personal API key.</aside>

2. success: 綠底成功

<aside class="success">Remember — a happy kitten is an authenticated kitten!</aside>

3. warning: 紅底警告

<aside class="warning">Inside HTML code blocks like this one, you can't use Markdown, so use <code>&lt;code&gt;</code> blocks to denote code.</aside>

大致的說明差不多到這邊,下面來試著寫一個簡易的 api 看看

Usage

現在試著來寫一個簡易的 GET 試試看,

URL: http://example.com/myapi/getInfo

Headers: Content-Type: application/json

Response 200:

{
"active": false,
"name": "emma",
"age": 18,
"info": {
"cell": "0912356789",
"gender": "female"
}
}

Description: Get member’s information

我把 index.html.md 的內容清空,只留下第一大段的設定,把 users 這一類的 api 用 includes 的方式另外寫一支再插入,只使用 javascript 這個語言,設定 api 的 base url 是 myapi

另外在 /includes 資料夾中新增我要寫會員類的 _users.md

給一個大標

# Users

第一支 api 名稱

## Get User Info

我想要我的 code block 插入在這個 api 名稱的下方,所以接下來插入 js code block:

```javascript...
...
```

接著加上這支 api 的說明

Get member's information

Methods

### HTTP Request`GET /getInfo`

Headers

### Headers`Content-Type: application/json`

Response

> The above command returns JSON structured like this:```json
{
...
}
```

Response 回應資料說明

| Parameter | Default | Description |
|-|-|-|
| active | false | If the account has been activated |
...

簡單的 get api 就寫好了。

Build / Deploy

寫好之後,可以發布到 github 上,也可以純粹 build 出一份靜態的 html 檔案就好,要看的人打開這包 html 就可以了。

Build:

$ bundle exec middleman build --clean
會打包出一份像是這樣子的,點開 index.html 就可以看到剛剛執行出來的畫面

如果要部署到 github 上,要先連結自己的 github repo,如果有下載 GitHub Desktop 就先 push 上去,push 之後執行

忘記怎麼設定的話看這邊:VS code+Github 設定

$ deploy.sh

稍待一下之後,就會看到剛剛寫的 api 文件上去啦

官方 Deploy 文件說明這邊

內容若有任何錯誤,歡迎留言交流指教! 🐬

--

--

itsems
itsems_frontend

Stay Close to Anything that Makes You Glad You are Alive.