Jamdesk Documentation logo

组件概览

了解 Jamdesk 的 MDX 组件,包括卡片、标签页、提示框和代码块,为文档内容选择合适的组件。

Jamdesk 提供可在任何页面中使用的 MDX 组件。本概览帮助你为内容选择合适的组件。

用法

直接将组件插入 MDX:

<Card title="Quickstart" icon="rocket" href="/quickstart">

  Launch your docs in minutes.

</Card>

布局与导航

折叠面板

可折叠的内容区段,用户可以只展开所需内容。适用于常见问题、功能列表和配置选项。

卡片

了解如何使用 Card 组件构建可点击且样式丰富的容器,并在网格布局中添加图标、图片、链接和 CTA。

用于并排显示卡片、磁贴和其他内容的响应式网格布局。会自动适应屏幕尺寸。

框架

Frame 可将图片和演示包裹在带边框的容器中,并支持可选标题,使文档视觉效果保持一致。

面板

使用 Panel 将警告或快速参考等自定义内容固定在侧边栏中,使其在读者滚动时保持可见。

步骤

用于设置流程、教程和故障排除的编号分步指南。支持图标、代码块和嵌套内容。

标签页

用于展示互斥内容的可切换面板,例如包管理器或编程语言。匹配的标签页标题会在整个页面中同步。

磁贴

磁贴通过样式化的图案背景和醒目的图片区域展示内容预览。适用于集成、模板或视觉图库。

树状图

通过交互式展开/折叠和键盘导航显示文件与文件夹层级结构。适用于项目结构文档。

视图

创建可根据读者所选框架或语言进行调整的文档。整个区段会根据用户选择进行切换。

内容与强调

徽章

用于显示状态、类别和元数据的行内标签——提供 11 种颜色变体、4 种尺寸、图标、胶囊形/圆角形状和描边轮廓。

提示框

了解如何使用 Note、Tip、Warning、Danger、Check 和自定义 Callout 组件,突出显示文档中的关键信息。

可展开内容

Expandable 为内容创建简单的显示/隐藏切换,适用于读者可能希望查看但并非主要流程必需的内容。

工具提示

在悬停时显示定义和上下文。定义术语、解释缩写或链接到相关内容,同时避免页面杂乱。

更新

以时间线形式展示包含日期、描述和类别标签的变更日志条目。可与目录集成以便导航。

可见性

在同一页面上向人类读者和 AI 代理显示不同内容。仅供代理使用的上下文、指令和定义不会显示在渲染后的文档中。

代码与数据

代码组

在标签页界面中显示代码块。使用 cURL、Python 和 JavaScript 等多种语言展示相同操作。

示例

在桌面设备的右侧固定侧边栏中固定代码块,方便读者滚动时参考。支持多语言标签页。

字段

使用 ParamField 和 ResponseField 组件记录 API 参数和响应字段。支持类型、默认值和嵌套对象。

提示词

使用 Prompt 展示可复用的 AI 指令,并支持复制、内置打开操作、自定义目标、图标和紧凑显示选项。

表格

将数据整理为行和列。支持 Markdown 表格和带排序、高亮及跨行跨列功能的 Table 组件。

图表与视觉内容

颜色

Color 组件显示调色板,可用于记录设计系统、品牌指南或任何颜色规范。

Mermaid 图表

根据文本格式的 Mermaid 语法渲染流程图、时序图、时间线、饼图等内容。图表会在构建时生成 SVG。

D2 图表

根据文本格式的 D2 语法渲染架构图、流程图、时序图和 SQL 模型。图表会渲染为 SVG,并自动适配浅色和深色主题。

用户互动

邮件订阅

使用 EmailSubscribe 组件向任何文档页面添加新闻通讯或变更日志注册表单:七个提供商支持原生采集,其余提供商支持嵌入。

小组件

使用 Widget MDX 组件在文档中嵌入实时 What's New 小组件演示:触发按钮可在模态框中打开变更日志,无需 script 标签。