自定义脚本

使用 CSS 为 HTML 元素设置样式，或添加自定义 CSS 和 JavaScript，全面定制文档的外观与使用体验。

使用 Tailwind CSS 进行样式设计

使用 Tailwind CSS v3 为 HTML 元素设置样式。你可以控制布局、间距、颜色及其他视觉属性。常见的类包括：

w-full - 宽度占满
aspect-video - 16:9 比例
rounded-xl - 大圆角
block, hidden - 显示控制
dark:hidden, dark:block - 深色模式下的可见性

不支持 Tailwind CSS 的任意值语法。若需自定义值，请改用 style 属性。

<img style={{ width: '350px', margin: '12px auto' }} src="/path/image.jpg" />

使用 style 属性可能会在页面加载时导致布局位移，尤其是在自定义模式的页面中。请改用 Tailwind CSS 类或自定义 CSS 文件，以避免位移或闪烁。

添加自定义 CSS

将 CSS 文件添加到你的存储库中，这些文件中定义的类名会在你所有的 MDX 文件中生效并可用。引用和常用元素的样式可能会发生变化。请谨慎使用自定义样式，因为未来更新中可能出现不兼容的变更。例如，你可以添加以下 style.css 文件以自定义导航栏和页脚的样式。

#navbar {
  background: #fffff2;
  padding: 1rem;
}

footer {
  margin-top: 2rem;
}

Mintlify 提供两种类型的 CSS 定位钩子：

ID 选择器：页面级唯一元素，在 CSS 中使用 #value { } 定位
元素选择器：组件和布局元素，在 CSS 中使用 value { } 定位（无 # 或 . 前缀）

使用”检查元素”来定位你要自定义的元素引用。

ID 选择器

每个 ID 在每个页面上只出现一次。在 CSS 中使用 #value 来定位。例如，#navbar { background: red; }。

页面布局

#body-content — 页面主体的最外层容器。
#content-area — 主要内容区域，不包括侧边栏和目录。
#content — 内容区域内的内部内容元素。
#header — 页面级头部元素。
#banner — 显示在导航栏上方的公告横幅。
#footer — 页脚。也可用作元素选择器：footer。
#page-title — 每个页面顶部的 <h1> 标题。
#pagination — 底部分页栏，包含上一页和下一页链接。
#panel — 浮动面板覆盖层。也可用作元素选择器：panel。
#background-color — 页面背景颜色元素。

导航

#navbar — 顶部导航栏。
#topbar-cta-button — 顶栏中的行动号召按钮。
#mobile-nav — 移动端导航覆盖层。
#mobile-nav-content — 移动端导航覆盖层内的内容区域。

侧边栏

#sidebar — 侧边栏导航面板。
#sidebar-content — 侧边栏内可滚动的内容区域。

#table-of-contents — 页面右侧的目录面板。
#table-of-contents-layout — 目录的布局容器。
#table-of-contents-content — 目录内可滚动的内容。

搜索

#search-bar-entry — 顶栏中的搜索栏触发器。
#search-bar-entry-mobile — 移动端的搜索栏触发器。
#search-input — 搜索模态框内的文本输入字段。

AI 助手

#assistant-entry — 顶栏中的 AI 助手按钮。
#assistant-entry-mobile — 移动端的 AI 助手按钮。
#chat-assistant-sheet — AI 助手聊天面板。
#chat-assistant-textarea — AI 助手面板内的文本输入。

API 参考

#request-example — API playground 中的请求示例面板。
#response-example — API playground 中的响应示例面板。
#api-playground-input — API playground 的输入区域。
#endpoints-menu-trigger — 打开端点选择器下拉菜单的按钮。

代码块

#ask-ai-code-block-button — 代码块上显示的 “Ask AI” 按钮。
#code-snippet-feedback-button — 代码片段上的反馈按钮。
#code-snippet-feedback-textarea — 代码片段反馈表单内的文本区域。

反馈

#feedback-thumbs-up — 页面底部的点赞按钮。
#feedback-thumbs-down — 页面底部的点踩按钮。
#feedback-form — 点踩后显示的反馈表单。
#feedback-form-input — 反馈表单内的文本输入。
#feedback-form-cancel — 反馈表单内的取消按钮。
#feedback-form-submit — 反馈表单内的提交按钮。

页面上下文菜单

本地化

#localization-select-trigger — 打开语言选择器的按钮。
#localization-select-content — 语言选择器的下拉内容。
#localization-select-item — 选择器中的单个语言选项。

变更日志

#changelog-filters — 变更日志页面上的过滤控件。
#changelog-filters-content — 变更日志过滤面板内的内容区域。

多视图

文本选择

元素选择器

这些元素可以在页面上出现多个实例。在 CSS 中使用 value 来定位。例如，accordion { border: 1px solid red; }。

内容组件

页面布局

mdx-content — 已渲染的 MDX 内容区域。
panel — 浮动面板组件。也可用作 ID 选择器：#panel。
eyebrow — 页面标题上方显示的小标签。
link — 锚点链接元素。
breadcrumb-list — 面包屑导航列表。
breadcrumb-item — 单个面包屑项。

顶栏导航

nav-logo — 导航栏中的 Logo。
navbar-link — 导航栏内的链接元素。
nav-anchors — 顶栏中锚点链接的容器。
nav-anchor — 顶栏中的单个锚点链接。
nav-tabs — 顶部导航中的标签页栏。
nav-tabs-item — 顶部导航标签页栏中的单个标签页项。
mobile-nav-tabs-item — 移动导航标签页栏中的标签页项。
topbar-right-container — 顶栏的右侧部分。
nav-tag-pill — 导航中显示的标签徽章。
nav-tag-pill-text — 导航标签徽章中的文本。

顶栏下拉菜单

产品选择器

侧边栏

sidebar-group — 侧边栏中的相关链接分组。
sidebar-group-icon — 侧边栏分组的图标。
sidebar-group-header — 侧边栏分组的标题标签。
sidebar-title — 侧边栏中的顶级标题。
sidebar-nav-group-divider — 侧边栏导航分组之间的分隔线。

toc — 目录容器。
toc-item — 目录中的单个标题条目。

页脚

footer — 标准页脚。也可用作 ID 选择器：#footer。
advanced-footer — 包含额外列或内容的扩展页脚。

分页

pagination-prev — 分页栏中的上一页链接。
pagination-next — 分页栏中的下一页链接。
pagination-title — 分页栏中显示的页面标题。

API 参考

api-section — 单个 API 端点的完整部分。
api-section-heading — API 端点部分的标题区域。
api-section-heading-title — API 端点部分标题中的标题文本。
api-section-heading-subtitle — API 端点部分标题中的副标题。
field — API 参考中的参数或属性字段。
option-dropdown — 用于在 API 选项之间选择的下拉菜单。
tryit-button — 打开 API playground 的 “Try it” 按钮。
method-pill — 端点上的 HTTP 方法徽章（GET、POST 等）。
method-nav-pill — 侧边栏导航中显示的 HTTP 方法徽章。
prompt — API 参考中的 prompt 组件。

AI 助手

chat-assistant-sheet — AI 助手面板容器。
chat-assistant-sheet-header — AI 助手面板的头部。
chat-assistant-sheet-content — AI 助手面板的内容区域。
chat-assistant-input — AI 助手面板内的文本输入。
chat-assistant-floating-input — AI 助手的浮动输入变体。
chat-assistant-send-button — AI 助手面板中的发送按钮。
chat-assistant-disclaimer-text — AI 助手面板中显示的免责声明文本。
chat-assistant-payload-item — 助手面板中的单条消息或结果项。
starter-question-text — 空助手面板中显示的建议起始问题。

反馈

feedback-toolbar — 包含页面反馈控件的工具栏。
contextual-feedback-container — 上下文内联反馈的容器。
contextual-feedback-form — 内联上下文反馈表单。
contextual-feedback-form-title — 上下文反馈表单的标题。
contextual-feedback-input — 上下文反馈表单内的文本输入。
contextual-feedback-button — 上下文反馈表单内的操作按钮。
contextual-feedback-form-submit-button — 上下文反馈表单的提交按钮。

代码片段反馈

身份验证

多视图

multi-view-item — 多视图切换器中的单个视图选项。
multi-view-dropdown — 用于在多个视图之间选择的下拉菜单。
multi-view-dropdown-trigger — 打开多视图下拉菜单的按钮。
multi-view-dropdown-content — 多视图下拉菜单的内容区域。
multi-view-dropdown-item — 多视图下拉菜单中的单个项。

目录页

directory — 目录页的根容器。
directory-group — 目录内的相关页面分组。
directory-page — 目录中的单个页面条目。
directory-card — 目录中以卡片形式显示的页面条目。

404 页面

not-found-container — 404 页面的根容器。
not-found-status-code — 404 页面上的状态码显示。
not-found-title — 404 页面上的标题。
not-found-description — 404 页面上的描述文本。
not-found-recommended-pages-list — 404 页面上显示的推荐页面列表。
not-found-recommended-page-link — 推荐页面列表中的单个链接。

颜色

color — 色彩样本元素。
color-row — 色彩样本分组行。
color-item — 颜色行中的单个颜色项。

文件树

tree — 文件树容器。
tree-folder — 文件树中的文件夹条目。
tree-file — 文件树中的文件条目。

数据属性

自定义 JavaScript

自定义 JS 允许你在全局添加自定义可执行代码，相当于在每个页面都插入一个包含 JS 代码的 <script> 标签。 Mintlify 会将文档站点的 content 目录中的任何 .js 文件注入到每个文档页面。比如，你可以添加下面的 ga.js 文件，在整个文档站点启用 Google Analytics。

window.dataLayer = window.dataLayer || [];
function gtag() {
  dataLayer.push(arguments);
}
gtag('js', new Date());

gtag('config', 'TAG_ID');

请谨慎使用，避免造成安全漏洞。

快速入门

组织

自定义

创建内容

编写 API 文档

部署

优化

使用 Tailwind CSS 进行样式设计

添加自定义 CSS

ID 选择器

元素选择器

自定义 JavaScript

快速入门

组织

自定义

创建内容

编写 API 文档

部署

优化

​使用 Tailwind CSS 进行样式设计

​添加自定义 CSS

​ID 选择器

​元素选择器

​自定义 JavaScript

使用 Tailwind CSS 进行样式设计

添加自定义 CSS

ID 选择器

元素选择器

自定义 JavaScript