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 模拟
    • 模拟语言(区域设置)
  • 账号与偏好设置
    • 账户设置
    • 生成 OpenAPI 访问令牌
    • 通知
    • 语言设置
    • 快捷键
    • 网络代理配置
    • 备份数据
    • 更新 Apidog
    • 删除账户
    • 实验性功能
  • 发送请求
    • 概述
    • SSE 调试
    • MCP 客户端
    • Socket.IO
    • WebSocket
    • Webhook
    • SOAP 或 WebService
    • GraphQL
    • gRPC
    • 使用请求代理 Agent 进行调试
    • 创建请求
      • 请求历史
      • 请求基础
      • 参数和主体
      • 请求头部
      • 请求设置
      • 调试请求
      • 将请求保存为端点
      • HTTP/2
    • 身份验证与授权
      • 概述
      • CA 和客户端证书
      • 授权类型
      • Digest Auth
      • OAuth 1.0
      • OAuth 2.0
      • Hawk 身份验证
      • Kerberos
      • NTLM
      • Akamai EdgeGrid
    • 响应和 Cookie
      • 查看 API 响应
      • 管理 Cookie
      • 概述
  • 开发和调试 API
    • 概述
    • 生成请求
    • 发送请求
    • 调试用例
    • 测试用例
    • 动态值
    • 验证响应
    • Design-First vs Request-First
    • 生成代码
    • 环境与变量
      • 概览
      • 使用变量
      • 环境管理
    • Vault 密钥
      • 概述
      • HashiCorp Vault
      • Azure Key Vault
      • AWS Secrets Manager
    • 动态值模块
      • Airline
      • 动物
      • 颜色
      • 商务
      • Company
      • 数据库
      • 数据类型
      • 日期
      • Finance
      • 食物
      • Git
      • Hacker
      • Helpers
      • 图像
      • Internet
      • 位置
      • Lorem
      • 音乐
      • 数字
      • Person
      • 电话
      • 科学
      • String
      • System
      • Vehicle
      • Word
    • 前置和后置处理器
      • 概述
      • 断言
      • 提取变量
      • 等待
      • 安全
      • 数据库操作
        • 概述
        • MySQL
        • MongoDB
        • Redis
        • Oracle 客户端
      • 使用脚本
        • 概述
        • 预处理器脚本
        • 后处理器脚本
        • 公共脚本
        • Postman 脚本参考
        • 调用其他编程语言
        • 使用 JS 库
        • 可视化响应
        • 脚本示例
          • 断言脚本
          • 使用变量
          • 修改请求
          • 其他示例
    • API 调试
      • AI Agent Debugger
      • A2A 调试器
  • 设计 API
    • 概述
    • 创建新的 API 项目
    • 端点基础
    • API 设计指南
    • 模块
    • 配置多个请求主体示例
    • 组件
    • 通用字段
    • 全局参数
    • 端点变更历史
    • 评论
    • 批量端点管理
    • 自定义协议 API
    • Spec-first 模式(Beta)
    • 安全方案
      • 概述
      • 创建安全方案
      • 使用安全方案
      • 在线文档中的安全方案
    • 高级功能
      • 自定义端点字段
      • 关联的测试场景
      • 端点状态
      • 参数列表的外观
      • 端点唯一标识
    • Schemas
      • 概述
      • 创建新 Schema
      • 构建 Schema
      • 从 JSON 等生成 Schema
      • oneOf, allOf, anyOf
      • 使用 Discriminator
  • Apidog Europe
    • Apidog Europe
  • API 测试
    • 概述
    • 测试场景
      • 创建测试场景
      • 在请求之间传递数据
      • 流程控制条件
      • 从端点和端点用例同步数据
      • 从其他项目导入端点和端点用例
      • 导出测试场景
    • 测试报告
      • 测试报告
    • 运行测试场景
      • 运行测试场景
      • 批量运行测试场景
      • 数据驱动测试
      • 共享测试数据
      • 定时任务
      • 管理来自其他项目的 API 运行环境
    • 测试套件
      • 概述
      • 创建测试套件
      • 编排测试套件
      • 本地运行测试套件
      • 通过 CLI 运行测试套件
      • 定时任务
    • 测试 API
      • 集成测试
      • 性能测试
      • 端到端测试
      • 回归测试
      • 契约测试
    • Apidog CLI
      • 概述
      • 安装和运行 Apidog CLI
      • Apidog CLI 选项
    • CI/CD
      • 概述
      • 与 Github Actions 集成
      • 与 Gitlab 集成
      • 与 Jenkins 集成
      • 通过 Git Commit 触发测试
  • 发布 API 文档
    • 概述
    • 支持的 API 技术
    • 快速分享
    • 查看 API 文档
    • Markdown 文档
    • 发布文档站点
    • 自定义登录页面
    • 自定义布局
    • 自定义 CSS、JavaScript、HTML
    • 自定义域名
    • AI 功能
    • SEO 设置
    • 高级设置
      • 文档搜索
      • CORS 代理
      • 集成 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
  • 最佳实践
    • 处理 API 签名
    • 访问受 OAuth 2.0 保护的 API
    • 协作工作流
    • 管理身份验证状态
  • 离线空间
    • 概述
  • 管理
    • 管理项目
      • 管理项目
      • 通知设置
      • 管理项目成员
      • 项目资源
        • 数据库连接
        • Git 连接
    • 管理团队
      • 管理团队
      • 管理团队成员
      • 团队活动
      • 团队角色与权限
      • 团队资源
        • General Runner
        • 团队变量
        • 请求代理 Agent
      • 实时协作
        • 团队协作
    • 入门检查清单
      • 基本概念
      • 入门指南
    • 管理组织
      • 管理组织
      • 组织角色与权限
      • 套餐管理
        • 组织中的账单管理员
      • 单点登录 (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 功能目前仍在开发中。敬请期待发布。

常见问题#

Custom JS 不生效?
请确保你是通过 custom domain 访问文档。自定义 JavaScript 仅在使用已绑定的自定义域名时执行。
在自定义 JavaScript 中应该使用 'load' 还是 'DOMContentLoaded'?
Modified at 2026-06-09 08:55:47
Previous
自定义布局
Next
自定义域名
Built with