Apidog Docs
🇨🇳 繁體中文
  • 🇺🇸 English
  • 🇯🇵 日本語
  • 🇪🇸 Español
  • 🇰🇷 한국인
  • 🇨🇳 简体中文
  • 🇵🇹 Português (Portugal)
  • 🇮🇩 Bahasa Indonesia
  • 🇧🇷 Português (Brasil)
  • 🇻🇳 Tiếng Việt
  • 🇨🇳 繁體中文
🇨🇳 繁體中文
  • 🇺🇸 English
  • 🇯🇵 日本語
  • 🇪🇸 Español
  • 🇰🇷 한국인
  • 🇨🇳 简体中文
  • 🇵🇹 Português (Portugal)
  • 🇮🇩 Bahasa Indonesia
  • 🇧🇷 Português (Brasil)
  • 🇻🇳 Tiếng Việt
  • 🇨🇳 繁體中文
🇨🇳 繁體中文
  • 🇺🇸 English
  • 🇯🇵 日本語
  • 🇪🇸 Español
  • 🇰🇷 한국인
  • 🇨🇳 简体中文
  • 🇵🇹 Português (Portugal)
  • 🇮🇩 Bahasa Indonesia
  • 🇧🇷 Português (Brasil)
  • 🇻🇳 Tiếng Việt
  • 🇨🇳 繁體中文
HomeLearning Center
Support CenterAPI ReferencesDownloadChangelog
HomeLearning Center
Support CenterAPI ReferencesDownloadChangelog
  1. 發布 API 文件
  • Apidog 學習中心
  • 開始使用
    • Apidog 簡介
    • Apidog 中的基本概念
    • 導覽 Apidog
    • 快速開始
      • 概覽
      • 建立端點
      • 發送請求
      • 新增斷言
      • 建立測試情境
      • 分享 API 文件
      • 探索更多
    • 遷移到 Apidog
      • 概覽
      • 手動匯入
      • 排程匯入(綁定資料來源)
      • 匯入選項
      • 匯出資料
      • 匯入自
        • 從 Postman 匯入
        • 匯入 OpenAPI 規格
        • 匯入 cURL
        • 匯入 Markdown
        • 從 Insomnia 匯入
        • 從 apiDoc 匯入
        • 匯入 .har 檔案
        • 匯入 WSDL
  • Mock API 資料
    • 概述
    • Smart Mock
    • 自訂模擬
    • 模擬優先順序
    • 模擬腳本
    • 雲端模擬
    • 自託管 Runner 模擬
    • 模擬語言(Locales)
  • 帳號與偏好設定
    • 帳戶設定
    • 產生 OpenAPI 存取權杖
    • 通知
    • 語言設定
    • 快捷鍵
    • 網路代理設定
    • 備份資料
    • 更新 Apidog
    • 刪除帳戶
    • 實驗性功能
  • 傳送請求
    • 概覽
    • SSE 偵錯
    • MCP Client
    • Socket.IO
    • WebSocket
    • Webhook
    • SOAP 或 WebService
    • GraphQL
    • gRPC
    • 使用請求代理代理程式進行偵錯
    • 建立請求
      • 請求歷史記錄
      • 請求基礎
      • 參數與主體
      • 請求標頭
      • 請求設定
      • 偵錯請求
      • 將請求儲存為端點
      • HTTP/2
    • 驗證與授權
      • 概覽
      • CA 和用戶端憑證
      • 授權類型
      • Digest Auth
      • OAuth 1.0
      • OAuth 2.0
      • Hawk 驗證
      • Kerberos
      • NTLM
      • Akamai EdgeGrid
    • 回應和 Cookie
      • 檢視 API 回應
      • 管理 Cookie
      • 概覽
  • 開發和偵錯 API
    • 概觀
    • 產生請求
    • 傳送請求
    • 偵錯案例
    • 測試案例
    • 動態值
    • 驗證回應
    • Design-First 與 Request-First
    • 產生程式碼
    • 環境與變數
      • 概述
      • 使用變數
      • 環境管理
    • Vault 密鑰
      • 概覽
      • HashiCorp Vault
      • Azure Key Vault
      • AWS Secrets Manager
    • 動態值模組
      • Airline
      • 動物
      • 顏色
      • Commerce
      • Company
      • 資料庫
      • Datatype
      • 日期
      • Finance
      • Food
      • Git
      • Hacker
      • Helpers
      • 圖片
      • Internet
      • 位置
      • Lorem
      • 音樂
      • Number
      • Person
      • Phone
      • 科學
      • 字串
      • System
      • Vehicle
      • Word
    • 前置和後置處理器
      • 概覽
      • 斷言
      • 擷取變數
      • Wait
      • 安全性
      • 資料庫操作
        • 概述
        • MySQL
        • MongoDB
        • Redis
        • Oracle Client
      • 使用腳本
        • 概觀
        • 前置處理器指令碼
        • 後置處理器腳本
        • 公開腳本
        • Postman Scripts Reference
        • 呼叫其他程式語言
        • 使用 JS Libraries
        • 視覺化回應
        • 腳本範例
          • 斷言腳本
          • 使用變數
          • 修改請求
          • 其他範例
    • API 偵錯
      • AI Agent Debugger
      • A2A Debugger
  • 設計 API
    • 概覽
    • 建立新的 API 專案
    • 端點基礎
    • APl 設計指南
    • 模組
    • 設定多個請求主體範例
    • 元件
    • 通用欄位
    • 全域參數
    • 端點變更歷史
    • 留言
    • 批次端點管理
    • 自訂協定 API
    • Spec-first 模式 (Beta)
    • 安全方案
      • 概觀
      • 建立安全性方案
      • 使用 Security Scheme
      • 線上文件中的安全性方案
    • 進階功能
      • 自訂端點欄位
      • 關聯的測試場景
      • 端點狀態
      • 參數列表的外觀
      • 端點唯一識別
    • Schemas
      • 概述
      • 建立新 Schema
      • 建立 Schema
      • 從 JSON 等產生 Schema
      • oneOf, allOf, anyOf
      • 使用 Discriminator
  • API 測試
    • 概述
    • 測試情境
      • 建立測試情境
      • 在請求之間傳遞資料
      • 流程控制條件
      • 從端點和端點案例同步資料
      • 從其他專案匯入端點和端點案例
      • 匯出測試情境
    • 測試報告
      • 測試報告
    • 執行測試情境
      • 執行測試場景
      • 批次執行測試場景
      • 資料驅動測試
      • 共享測試資料
      • 排程任務
      • 管理來自其他專案的 API 執行環境
    • 測試套件
      • 概述
      • 建立測試套件
      • 編排測試套件
      • 在本機執行測試套件
      • 透過 CLI 執行測試套件
      • 排程任務
    • 測試 API
      • 整合測試
      • 效能測試
      • 端對端測試
      • 迴歸測試
      • 契約測試
    • Apidog CLI
      • 概覽
      • 安裝並執行 Apidog CLI
      • Apidog CLI 選項
    • CI/CD
      • 概述
      • 與 Github Actions 整合
      • Integrate with Gitlab
      • 與 Jenkins 整合
      • 透過 Git Commit 觸發測試
  • 發布 API 文件
    • 概述
    • 支援的 API 技術
    • 快速分享
    • 檢視 API 文件
    • Markdown 文件
    • 發佈文件網站
    • 自訂登入頁面
    • 自訂版面配置
    • 自訂 CSS、JavaScript、HTML
    • 自訂網域
    • AI Features
    • SEO 設定
    • 進階設定
      • 文件搜尋
      • CORS Proxy
      • 整合 Google Analytics
      • 資料夾樹設定
      • 可見性設定
      • 在文件 URL 中嵌入值
    • API 版本
      • 概述
      • 建立 API 版本
      • 發佈 API 版本
      • 使用 API 版本分享端點
  • 分支
    • 概觀
    • 建立 Sprint 分支
    • 在分支中測試 API
    • 在分支中設計 API
    • 合併 Sprint 分支
    • 管理 Sprint 分支
    • AI Branch (Beta)
  • AI 功能
    • 概觀
    • 啟用 AI 功能
    • 產生測試案例
    • 使用 AI 修改 Schema
    • 端點合規性檢查
    • API 文件完整性檢查
    • AI 驅動的欄位命名
    • 常見問題
  • Apidog MCP 伺服器
    • 概覽
    • 將 Apidog 專案連接至 AI
    • 將已發布的文件連接至 AI
    • 將 OpenAPI 檔案連接到 AI
  • Apidog Europe
    • Apidog Europe
  • 最佳實務
    • 處理 API 簽章
    • 存取受 OAuth 2.0 保護的 API
    • 協作工作流程
    • 管理驗證狀態
  • 離線空間
    • 概述
  • 管理
    • 管理專案
      • 管理專案
      • 通知設定
      • 管理專案成員
      • 專案資源
        • 資料庫連線
        • Git 連線
    • 管理團隊
      • 管理團隊
      • 管理團隊成員
      • 團隊活動
      • 團隊角色與權限
      • 團隊資源
        • General Runner
        • 團隊變數
        • 請求代理代理程式
      • 即時協作
        • 團隊協作
    • 入門檢查清單
      • 基本概念
      • 入門指南
    • 管理組織
      • 管理組織
      • 組織角色與權限
      • 方案管理
        • 組織中的帳單管理員
      • 單一登入 (SSO)
        • SSO 概覽
        • 設定 Microsoft Entra ID
        • 設定 Okta
        • 為組織設定 SSO
        • 管理使用者帳戶
        • 將群組對應到團隊
      • SCIM 佈建
        • SCIM 佈建簡介
        • Microsoft Entra ID
        • Okta
      • 組織資源
        • 自託管 Runner
  • 帳單
    • 概觀
    • 點數
    • 升級您的方案
    • 替代付款方式
    • 管理訂閱
    • 將付費團隊移至組織
  • 附加元件
    • API Hub
    • Apidog Intellij IDEA 外掛
    • 瀏覽器擴充功能
      • Chrome
      • Microsoft Edge
    • 請求代理
      • Web 中的請求代理
      • 共用文件中的請求代理
      • 用戶端中的請求代理
  • 資料與安全
    • 資料儲存與安全性
    • 使用者資料隱私與安全
    • 請求路由與資料安全
  • 參考
    • API 設計優先方法
    • Apidog OpenAPI 規格擴充
    • JSONPath
    • XPath
    • 正規表示式
    • JSON Schema
    • CSV 檔案格式
    • 安裝 Java 環境
    • Runner 部署環境
    • Apidog Markdown 語法
    • Apidog Swagger 擴充
      • 概述
      • x-apidog-folder
      • x-apidog-status
      • x-apidog-name
      • x-apidog-maintainer
    • Apidog JSON Schema 擴充
      • 概述
      • x-apidog-mock
      • x-apidog-orders
      • x-apidog-enum
  • 支援中心
  1. 發布 API 文件

自訂 CSS、JavaScript、HTML

發布 API 文件時,你可以加入自訂的全域 HTML、CSS 和 JavaScript,以個人化頁面樣式並擴充功能。
此功能適用於:
嵌入第三方服務(例如聊天機器人、AI 助理)
修改預設樣式(例如字型、顏色、背景)
新增互動元素(例如按鈕、彈出視窗、快速回饋)
善用此功能,可以讓你的文件更能體現品牌識別,並改善使用者體驗。

CSS#

透過自訂 CSS,你可以變更字型、隱藏元素、調整邊距、修改顏色等。
由於文件結構可能會在未來更新中變更,我們建議遵循以下兩項原則,以確保你的樣式持續有效:
1.
使用保留的 CSS 變數
2.
使用保留的 CSS 類別名稱

使用保留的 CSS 變數#

Apidog 提供了一組以 --g- 為前綴的 CSS 變數,用於控制基本頁面樣式,例如字型、顏色和背景。這些變數能良好適應淺色與深色模式,使你的樣式更穩定且更易維護。
常用變數參考
範例:變更主要文字顏色

使用保留的 CSS 類別名稱#

若要針對特定區域進行樣式設定,請使用 Apidog 保留的 .g- 前綴類別名稱。這些名稱相對穩定,較不容易因 DOM 變更而失效。
常用 CSS 類別參考
範例:隱藏左側邊欄

檢查頁面結構與類別名稱#

除了上述保留的 CSS 變數和類別名稱之外,你也可以使用瀏覽器的開發者工具,找出要修改的頁面元素對應的類別名稱,然後撰寫 CSS 來調整樣式。
建議優先使用以 .g- 開頭的類別名稱。這些名稱由平台保留,結構相對穩定,不容易失效。對於其他結構類別名稱,請謹慎使用,以避免產品升級後樣式失效。
你可以在瀏覽器中開啟已發布的文件網站,並使用開發者工具(開發者模式/主控台)查看頁面結構與樣式類別名稱:
Mac:Command + Option + I或fn + F12
Windows:Ctrl + Shift + I或fn + F12或F12
開啟後,點選「元素選取器」(滑鼠圖示),然後點擊頁面上的任意區域,即可查看該區域對應的 HTML 標籤與類別名稱。
你也可以使用搜尋功能(Cmd/Ctrl + F)來定位類別名稱。
image.png

JavaScript#

自訂 JavaScript 用於嵌入 AI 助理或支援小工具等第三方服務。注意:Apidog 的自訂 JavaScript 欄位不支援 <script> 或 <style> 標籤。你必須將其轉換為純 JavaScript。例如:
❌ 原始寫法(不支援)
✅ 轉換為純 JavaScript
如果你想嵌入第三方指令碼或樣式,但不確定如何將其改寫為純 JS 格式,可以複製以下提示詞並貼到 AI 工具(例如 Claude)中,讓 AI 幫你自動轉換:
I'm using Apidog's "Custom JavaScript" feature, which only allows pure JavaScript (no <script> or <style> tags).

Please convert the following code to pure JavaScript. Here are the requirements:
1. Rewrite the <script> tag to document.createElement('script') dynamic creation method;
2. Inject the <style> content into the newly created style tag and insert the head;
3. Please use standard methods (such as createElement, appendChild) for all DOM operations, and do not use document.write;
4. If the original code uses `window.addEventListener('DOMContentLoaded', ...)` or `window.addEventListener('load', ...)` only to wait for the page before running code, remove the event listener and run the code directly. Apidog executes custom JavaScript after the documentation page has been rendered, so the browser's `load` event may already have passed by that time; code registered inside a `load` listener may not be executed;
5. The final generated JavaScript should be able to run directly in the browser without any explanation.

Original code:
---
(paste your code here)
---
基於安全性,自訂 JavaScript 只有在透過 Custom domain 存取文件時才會生效。
如果你透過 Apidog 提供的預設文件地址存取(例如以 https://xxx.apidog.io/ 開頭),自訂 JS 將不會被載入與執行。
請確保程式碼本身可靠,以避免影響正常載入或破壞頁面結構。
自訂 JavaScript 會在文件頁面完成渲染後執行。由於瀏覽器的 load 事件在當時可能已經觸發過,因此放在 window.addEventListener('load', ...) 內的程式碼可能不會執行。在大多數情況下,請改為直接執行你的程式碼:

範例:可展開/收合方塊#

點擊下方按鈕以展開/收合 iframe 對話框
「點擊按鈕以展開/收合 iframe 對話框」的指令碼
使用方式:
1
將程式碼貼到 Apidog 的「Custom JavaScript」區域。
2
透過你的自訂網域造訪文件網站
3
右下角會出現一個按鈕;點擊即可開啟聊天 iframe。
4
將 iframe.src 替換為你的 AI 服務,例如:
自訂 CSS 和 JavaScript

範例:嵌入 Chatbase 小工具#

「嵌入 Chatbase 聊天小工具」的指令碼
使用方式:
1
建立 Chatbase 應用程式,取得嵌入程式碼,並使用上方提示詞將其轉換為純 JS。
image.png
將轉換後的程式碼貼到 Apidog 的 Custom JS 區段。
2
透過你的自訂網域造訪文件網站。
3
右下角會出現一個按鈕。點擊它即可開啟對話視窗。
自訂 CSS 和 JavaScript

HTML#

HTML 功能目前仍在開發中。敬請期待正式發布。

常見問題#

自訂 JS 無法運作?
請確認你是透過 custom domain 造訪文件。自訂 JavaScript 只有在使用已綁定的自訂網域時才會執行。
我應該在自訂 JavaScript 中使用 'load' 還是 'DOMContentLoaded'?
Modified at 2026-06-11 10:26:02
Previous
自訂版面配置
Next
自訂網域
Built with