组件

提示框

每种提示框类型均使用 ::: 围栏语法及其默认标题。

自定义标题

提示框内的富内容

以下是提示框内的代码块：

npm install @astrojs/starlight

项目列表：

第一项，包含粗体文本
第二项，包含 行内代码
第三项，包含指向 Starlight 文档的链接

提示框 CSS

Starlight 内置提示框组件具有圆角和分层阴影效果：

.starlight-aside {
  border-radius: 0.75rem;
  box-shadow: 0 2px 4px rgba(0,0,0,0.04), 0 8px 16px rgba(0,0,0,0.08), 0 24px 48px rgba(0,0,0,0.12);
}

标签页

基本标签页

概览
详情

这是概览标签页的内容。包含纯文本，用于验证基本标签页渲染效果。

包含混合内容的标签页

第一个标签页中的纯段落内容。

const greeting = "Hello from a code block inside a tab!";
console.log(greeting);

标签页内的第一项
第二项，包含粗体文本
第三项，包含 行内代码

同步标签页

这两组标签页共享 syncKey="pkg"。在一组中选择某个标签页后，另一组也会随之更新。

安装命令：

npm install @f5-sales-demo/docs-theme

pnpm add @f5-sales-demo/docs-theme

yarn add @f5-sales-demo/docs-theme

运行命令：

npm run dev

pnpm dev

yarn dev

步骤

克隆仓库

git clone https://github.com/example/repo.git
cd repo

安装依赖项
Terminal window
```
npm install
```
启动开发服务器
Terminal window
```
npm run dev
```
站点将在 http://localhost:4321 上可用。

卡片

单个卡片

这是一个带有图标的独立卡片。卡片适合用于突出显示关键信息或功能特性。

卡片网格

性能

Astro 默认零 JS 输出，实现快速页面加载。

可定制

Starlight 提供丰富的主题和插件选项。

无障碍

内置无障碍功能确保内容惠及所有人。

文档齐全

全面的文档使入门变得简单直接。

错落布局

第一步

配置您的项目设置和环境变量。

第二步

使用 MDX 格式创建内容页面。

第三步

使用开发服务器在本地预览。

第四步

部署到您选择的托管平台。

链接卡片

主题提供了一个 LinkCard 组件，支持有图标或无图标两种形式。从主题中导入：

import LinkCard from '@f5-sales-demo/docs-theme/components/LinkCard.astro';

Starlight 文档学习如何使用 Starlight 构建文档站点。

Astro 文档探索面向内容驱动网站的 Astro 框架。

带图标

使用 prefix:name 语法添加 icon 属性。支持全部八个图标包——完整目录请参阅图标包文档。

Lucide (`lucide:`)

Web 应用防火墙防火墙策略与配置。

多云网络跨云站点连接。

Carbon (`carbon:`)

安全服务IBM Carbon 安全图标集。

云服务IBM Carbon 云图标集。

Material Design 图标 (`mdi:`)

访问控制Material Design 盾牌锁图标。

数据管理Material Design 数据库图标。

Phosphor (`phosphor:`)

威胁防御Phosphor 盾牌图标。

全球网络Phosphor 地球图标。

Tabler (`tabler:`)

云平台Tabler 云图标。

部署Tabler 火箭图标。

F5 品牌 (`f5-brand:`)

云安全F5 品牌云盾图标。

防火墙F5 品牌防火墙图标。

F5 分布式云 (`f5xc:`)

这些图标为多色图标，使用 CSS 自定义属性适配亮色/暗色模式的颜色。

应用与 API 防护F5 XC Web 应用与 API 防护图标。

Bot 防御F5 XC Bot 防御图标。

HashiCorp Flight (`hashicorp-flight:`)

TerraformHashiCorp Terraform 图标。

ConsulHashiCorp Consul 图标。

徽章

行内徽章变体

全部六种徽章变体的行内渲染效果：

默认注意危险成功技巧警告

徽章尺寸

小中大

每种尺寸配合变体：

小型技巧中型危险大型成功

标题徽章

以下标题使用 starlight-heading-badges 插件语法。

功能完整稳定

该标题带有成功徽章，表示功能已稳定。

实验性 API Beta

该标题带有警告徽章，表示 API 处于实验阶段。

旧版系统已废弃

该标题带有危险徽章，表示已废弃。

新功能新增

该标题带有技巧徽章，表示新增功能。

文档已更新

该标题带有注意徽章，表示近期有所更新。

默认徽章信息

该标题带有未指定变体的默认徽章。

侧边栏徽章

请查看侧边栏：本页面通过 frontmatter 应用了带有 tip 变体的”新增”徽章。

表格

简单表格

功能	状态	优先级
暗色模式	已支持	高
图片缩放	已支持	中
Mermaid 图表	已支持	中
标题徽章	已支持	低

带对齐和代码的表格

属性	类型	默认值	描述
`title`	`string`	—	显示在页眉中的页面标题
`description`	`string`	`""`	用于 SEO 的 Meta 描述
`sidebar.order`	`number`	`0`	侧边栏中的排序顺序
`sidebar.badge`	`object`	`null`	显示在侧边栏标签旁边的徽章
`template`	`"doc" \| "splash"`	`"doc"`	页面布局模板

图片

下方图片用于测试 starlight-image-zoom 插件。点击可放大查看。

GitHub 头像

文件树

文件夹src/
- 文件夹content/
  - 文件夹docs/
    index.mdx
    01-environment-variables.mdx
    02-build-pipeline.mdx
    03-astro-config.mdx
    04-logo.mdx
    05-colors.mdx
    07-typography.mdx
    08-code-blocks.mdx
    09-components.mdx 本页
    10-mermaid.mdx
    11-footer.mdx
    12-style-enhancement-guide.mdx
- 文件夹plugins/
  - remark-mermaid.mjs
文件夹styles/
- custom.css
astro.config.mjs
package.json

主题检查项

每种提示框变体的左边框颜色各不相同（蓝色、紫色、黄色、红色）
提示框背景色调在亮色和暗色模式下均可见
每个提示框周围的盒阴影效果细腻但可见
所有提示框具有圆角效果（0.75rem）
标签页激活指示器颜色使用强调色
编号步骤之间的连接线可见
在组之间切换时，同步标签页保持同步
标签页内的代码块具有正确的语法高亮
卡片边框颜色在亮色和暗色模式之间自适应
卡片上的悬停背景效果可见
LinkCard 箭头图标颜色与强调色一致
错落布局使交替卡片在垂直方向上偏移
图标在卡片标题中正确渲染
各变体的徽章背景色在暗色和亮色模式下有所不同
暗色模式徽章使用深色调（red-4、jade-4、tangerine-4、eggplant-4、bay-4）
亮色模式徽章使用浅色调（red-1、jade-1、tangerine-1、eggplant-1、bay-1）
标题徽章与标题文本行内对齐
侧边栏徽章显示在页面标签旁边
表格边框颜色在亮色和暗色模式之间自适应
表格标题行具有明显的背景色
图片缩放遮罩层在点击时生效（starlight-image-zoom）
文件树背景使用与主题相适应的颜色
图标继承当前文本颜色