组件 · Cloudflare Style Guide

当您向 Cloudflare 文档做出贡献时，您可以使用我们的自定义组件来添加其他格式，例如按钮、标签页和可折叠区域。

本指南向您介绍将组件导入并添加到页面的基本知识。请参阅本样式指南中的每个组件页面，以了解每个组件的具体 props 和要求。

我们的组件基于 Astro 组件 ↗，并使用 MDX ↗（Markdown 的扩展版本）编写。了解更多关于 Cloudflare 文档框架的信息。

将组件添加到页面

要将组件添加到页面：

通过在 frontmatter 正下方直接添加以下文本，将组件导入到页面：

import { COMPONENT_NAME } from "~/components";

;

例如，如果您要将 DashButton 组件添加到 Images 快速入门页面，则该页面对应的 MDX 文件顶部将如下所示：

---
pcx_content_type: get-started
title: Getting started
 products:
   - images
sidebar:
  order: 2
---

import { DashButton } from "~/components";

;

通过在页面上您希望组件显示的任何位置添加以下文本，将组件添加到页面：

<COMPONENT_NAME PROP_NAME="PROP_VALUE" />

例如，如果您要将 DashButton 组件添加到 Images 快速入门页面中的某些步骤，MDX 文件将如下所示：

1. 在 Cloudflare 仪表板中，转到 **Transformations** 页面。

   <DashButton url="/?to=/:account/images/transformations" />

2. 转到您要启用 transformations 的特定区域。

这是该示例在发布后的显示效果：

选择正确的组件

要为您的用例选择正确的组件，请浏览下表，其中包含我们最常用的组件以及每个组件的直观示例。有关所有可用组件及其用例的完整文档，请浏览本样式指南中的各个组件页面。

组件	说明与直观示例
`APIRequest`	特制的 API 请求块。生成带有必需 API 令牌权限的可执行 cURL API 命令。
`Badge`	小型描述性药丸标签。使用状态、版本、类别或其他简短的元数据来标记内容。
`DashButton`	仪表板深层链接按钮。将用户从文档直接链接到 Cloudflare 仪表板的特定相关部分。
`Details`	点击展开的内容块。隐藏非核心、复杂或先进的技术内容，允许用户在需要时展开该区域。
`DirectoryListing`	自动生成的子页面列表。在指定的文档文件夹路径内自动生成指向子页面的可导航链接列表。
`Feature`	产品功能列表项。通过描述和直接链接按钮突出显示产品功能。
`FeatureTable`	产品计划对比表。显示详细的功能信息，包括其在不同 Cloudflare 定价计划中的可用性。
`GlossaryTooltip`	悬停激活的词汇表弹出窗口。为从文档词汇表中提取的技术术语提供非侵入式的、悬停激活的定义。
`LinkCard`	导航卡片。以极具视觉吸引力的格式呈现相关的教程、概念或指南。
`PackageManagers`	命令切换标签页。显示不同包管理器对应的等效安装或执行命令。
`Plan`	产品计划可用性徽章。显示产品或特定功能所需的计划。
`RelatedProduct`	格式化的产品参考。直观地突出显示并链接到特定的、互补的 Cloudflare 产品，同时展示该产品的 logo。
`ResourcesBySelector`	可过滤的代码示例库。根据内容类型或产品提取并显示代码示例和资源列表。
`Stream`	可嵌入的视频播放器。显示针对 Cloudflare Stream 优化的视频播放器。
`Tabs` and `TabItem`	可切换的内容标签页。允许在不同代码语言或配置方法的内容视图之间轻松切换。
`Type` and `MetaInfo`	关于字段或属性的药丸状数据类型徽章和元数据注释。`Type` 表示 API 参数数据类型（`String`、`Integer`），而 `MetaInfo` 表示元数据约束（`Required`、`Optional`、`Read-only`）。
`WranglerConfig`	标签页式的 Wrangler 配置显示。显示 Wrangler 配置文件（JSONC 和 TOML）和绑定（binding），并支持自动格式切换。
`YouTube`	可嵌入的视频播放器。嵌入具有指定视频 ID 的 YouTube 视频播放器。