构建你的 API 参考结构

了解如何通过图标和描述在多个页面中构建 API 参考结构

GitBook 不仅仅是渲染你的 OpenAPI 规范。它还允许你自定义 API 参考文档，以获得更好的清晰度、导航和品牌展示。

将操作拆分到多个页面

为了让你的文档井然有序，GitBook 可以将你的 API 操作拆分为独立的页面。每个页面都由 OpenAPI 规范中的一个标签生成。要将操作归组到同一页面，请为每个操作分配相同的标签：

openapi.yaml

paths:
  /pet:
    put:
      tags:
        - pet
      summary: 更新现有宠物。
      description: 通过 Id 更新现有宠物。
      operationId: updatePet

重新排序目录中的页面

GitBook 中页面的顺序与 OpenAPI tags 数组中的标签顺序一致：

openapi.yaml

tags:
  - name: pet
  - name: store
  - name: user

将页面嵌套到分组中

要构建多级导航，请在标签中使用 x-parent （或 parent）来定义层级结构：

openapi.yaml

tags:
  - name: everything
  - name: pet
    x-parent: everything
  - name: store
    x-parent: everything

上面的示例将创建如下所示的目录：

全部
├── 宠物
└── 商店

如果某个页面没有描述，GitBook 会自动为其子页面显示基于卡片的布局。

自定义页面标题、图标和描述

你可以使用 tags 部分中的自定义扩展，为页面添加标题、图标和描述。所有 Font Awesome 图标 都支持通过 x-page-icon.

openapi.yaml

tags:
  - name: pet
    # 显示在目录和页面中的页面标题
    x-page-title: Pet
    # 显示在目录中以及页面标题旁边的图标
    x-page-icon: dog
    # 显示在标题上方的描述
    x-page-description: 宠物太棒了！
    # 页面内容
    description: 关于你的宠物的一切

使用 GitBook Blocks 构建丰富的描述

标签描述字段支持 GitBook markdown，包括 高级块 例如选项卡：

openapi.yaml

---
tags:
  - name: pet
    description: |
      这里是宠物的详细信息。

      {% tabs %}
      {% tab title="Dog" %}
      这里是狗狗
      {% endtab %}

      {% tab title="Cat" %}
      这里是猫猫
      {% endtab %}

      {% tab title="Rabbit" %}
      这里是兔子
      {% endtab %}
      {% endtabs %}

高亮 schema

你可以使用 GitBook markdown 在 GitBook 描述中高亮一个 schema。以下示例高亮了 “petstore” 规范中的 “Pet” schema：

openapi.yaml

---
tags:
  - name: pet
      description: |
          {% openapi-schemas spec="petstore" schemas="Pet" grouped="false" %}
              Pet 对象
          {% endopenapi-schemas %}

记录 webhook 端点

在使用 OpenAPI 3.1 时，GitBook 也支持记录 webhook 端点。

你可以直接在 OpenAPI 文件中使用 webhooks 字段来定义你的 webhook，其作用类似于 paths 用于常规 API 端点：

openapi.yaml

---
openapi: 3.1.0 # Webhooks 从 OpenAPI 3.1 开始可用

webhooks:
  newPet:
    post:
      summary: 新宠物事件
      description: 系统中新宠物的信息
      requestBody:
        content:
          application/json:
            schema:
              $ref: "#/components/schemas/Pet"
      responses:
        "200":
          description: 返回 200 状态以表示数据已成功接收