跳转到主要内容

Insert endpoint block

插入端点块

P0 写法:在编辑器里用源码 / HTML模式粘贴约定骨架,再改文案。编辑器「插入 API 块」按钮是后续增强,当前不依赖。

步骤

  1. 新建页(建议页名:动词 · 路径,一端点一页)。
  2. 编辑器切到源码(或 HTML)模式。
  3. 清空默认空段落,粘贴下方「完整骨架」。
  4. 改:方法徽章类名、路径、operationId、参数表、curl / fetch、响应 JSON。
  5. 保存后在阅读壳预览;对照示例页 获取小部件。

方法徽章类名

方法类名
GETcb-api-method cb-api-method--get
POSTcb-api-method cb-api-method--post
PUTcb-api-method cb-api-method--put
PATCHcb-api-method cb-api-method--patch
DELETEcb-api-method cb-api-method--delete

必填块顺序

  1. 根包裹 div.cb-api(一页一个)
  2. h1 操作名
  3. .cb-api-endpoint(方法徽章 + path)
  4. .cb-api-meta(可选但推荐)
  5. 简述 p
  6. 参数表 table.cb-api-table(有则写)
  7. 请求示例:至少 curl,建议再给 fetch(可用 details.cb-api-fold 折叠)
  8. 响应:状态码芯片 + JSON 示例

禁止

  • 不要嵌 Scalar / Swagger / Redoc / 试调表单
  • 不要一页堆多个端点
  • 不要用系统 /api/docs 的 api-method 色块
  • 不要把产品接口写进 /api/docs

更完整的类名表见本书 如何复制使用;概述骨架见 开始使用。

完整骨架(复制用)

下面是与「获取小部件」同构的 HTML。粘贴后把示例字段换成你的接口即可。

HTML 源码
<!-- 酷可 API 端点页骨架 · 粘贴到 BookStack 页 HTML/源码模式 -->
<!-- 一端点一页 · 甲·浅底方章 · 仅 curl/fetch 静态示例 · 勿嵌试调器 -->
<!-- PRE 20261102apiFoldPre:Header open fold · 请求示例 collapsed fold -->
<div class="cb-api">
  <h1>获取小部件</h1>

  <div class="cb-api-endpoint">
    <span class="cb-api-method cb-api-method--get">GET</span>
    <code class="cb-api-path">/v1/widgets/<var>id</var></code>
  </div>

  <p class="cb-api-meta">operationId: <code>getWidget</code> · 分组: Widgets · 鉴权: Bearer Token</p>

  <p>按 ID 返回单个小部件。路径参数 <code class="cb-api-param">id</code> 为资源主键;响应体字段以本文示例为准(可替换为你的 OAS 示例)。</p>

  <h2>Path 参数</h2>
  <table class="cb-api-table">
    <thead>
      <tr><th>名称</th><th>位置</th><th>类型</th><th>必填</th><th>说明</th></tr>
    </thead>
    <tbody>
      <tr>
        <td><code>id</code></td>
        <td>path</td>
        <td><span class="cb-api-type">string</span></td>
        <td><span class="cb-api-required">必填</span></td>
        <td>小部件 ID</td>
      </tr>
    </tbody>
  </table>

  <details class="cb-api-fold" open>
    <summary>Header 参数</summary>
    <table class="cb-api-table">
      <thead>
        <tr><th>名称</th><th>位置</th><th>类型</th><th>必填</th><th>说明</th></tr>
      </thead>
      <tbody>
        <tr>
          <td><code>Authorization</code></td>
          <td>header</td>
          <td><span class="cb-api-type">string</span></td>
          <td><span class="cb-api-required">必填</span></td>
          <td><code>Bearer &lt;token&gt;</code></td>
        </tr>
      </tbody>
    </table>
  </details>

  <details class="cb-api-fold">
    <summary>请求示例</summary>
    <div class="cb-api-example">
      <span class="cb-api-example__label">curl(静态示例;本页无试调表单)</span>
      <pre><code>curl -sS 'https://api.example.com/v1/widgets/wdg_42'   -H 'Authorization: Bearer YOUR_TOKEN'   -H 'Accept: application/json'</code></pre>
    </div>
    <div class="cb-api-example">
      <span class="cb-api-example__label">fetch</span>
      <pre><code>fetch('https://api.example.com/v1/widgets/wdg_42', {
  headers: {
    'Authorization': 'Bearer YOUR_TOKEN',
    'Accept': 'application/json'
  }
}).then(r =&gt; r.json())</code></pre>
    </div>
  </details>

  <h2>响应</h2>
  <h3><span class="cb-api-status">200</span> 成功</h3>
  <div class="cb-api-example">
    <span class="cb-api-example__label">application/json</span>
    <pre><code>{
  "id": "wdg_42",
  "name": "Demo Widget",
  "status": "active",
  "updated_at": "2026-11-02T08:00:00Z"
}</code></pre>
  </div>

  <h3><span class="cb-api-status cb-api-status--err">404</span> 未找到</h3>
  <p>ID 不存在或不在当前鉴权范围。</p>
  <div class="cb-api-example">
    <pre><code>{
  "error": {
    "code": 404,
    "message": "Widget not found"
  }
}</code></pre>
  </div>
</div>