跳转到内容
Theme

组件

提示框

Section titled “提示框”

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

自定义标题

Section titled “自定义标题”

提示框中的富内容

Section titled “提示框中的富内容”

提示框 CSS

Section titled “提示框 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);
}

标签页

Section titled “标签页”

基本标签页

Section titled “基本标签页”

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

包含混合内容的标签页

Section titled “包含混合内容的标签页”

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

同步标签页

Section titled “同步标签页”

以下两个标签页组共享 syncKey="pkg"。在一个组中选择标签页，另一个组也会同步更新。

安装命令：

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

运行命令：

Terminal window
npm run dev

步骤

Section titled “步骤”

  1. 克隆仓库

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

  2. 安装依赖项

    Terminal window
    npm install

  3. 启动开发服务器

    Terminal window
    npm run dev

    站点将在 http://localhost:4321 上可访问。

卡片

Section titled “卡片”

单张卡片

Section titled “单张卡片”

Single Card

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

卡片网格

Section titled “卡片网格”

Performance

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

Customizable

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

Accessible

内置无障碍功能，确保内容面向所有人。

Documented

全面的文档让入门过程更加简便。

交错布局

Section titled “交错布局”

Step One

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

Step Two

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

Step Three

通过开发服务器在本地预览效果。

Step Four

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

链接卡片

Section titled “链接卡片”

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

import LinkCard from '@f5-sales-demo/docs-theme/components/LinkCard.astro';
Starlight DocumentationLearn how to build documentation sites with Starlight.
Astro DocumentationExplore the Astro framework for content-driven websites.

带图标

Section titled “带图标”

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

Lucide（lucide:）
Section titled “Lucide（lucide:）”
Web App FirewallFirewall policies and configuration.
Multi-Cloud NetworkingSite connectivity across clouds.
Carbon（carbon:）
Section titled “Carbon（carbon:）”
Security ServicesIBM Carbon security icon set.
Cloud ServicesIBM Carbon cloud icon set.
Material Design Icons（mdi:）
Section titled “Material Design Icons（mdi:）”
Access ControlMaterial Design shield lock icon.
Data ManagementMaterial Design database icon.
Phosphor（phosphor:）
Section titled “Phosphor（phosphor:）”
Threat DefensePhosphor shield icon.
Global NetworkPhosphor globe icon.
Tabler（tabler:）
Section titled “Tabler（tabler:）”
Cloud PlatformTabler cloud icon.
DeploymentTabler rocket icon.
F5 品牌（f5-brand:）
Section titled “F5 品牌（f5-brand:）”
Cloud SecurityF5 branded cloud shield icon.
FirewallF5 branded firewall icon.
F5 分布式云（f5xc:）
Section titled “F5 分布式云（f5xc:）”

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

App & API ProtectionF5 XC web app and API protection icon.
Bot DefenseF5 XC bot defense icon.
HashiCorp Flight（hashicorp-flight:）
Section titled “HashiCorp Flight（hashicorp-flight:）”
TerraformHashiCorp Terraform icon.
ConsulHashiCorp Consul icon.

徽章

Section titled “徽章”

内联徽章变体

Section titled “内联徽章变体”

所有六种徽章变体的内联渲染效果：

Default Note Danger Success Tip Caution

徽章尺寸

Section titled “徽章尺寸”
Small Medium Large

各尺寸与变体的组合效果：

Small Tip Medium Danger Large Success

标题徽章

Section titled “标题徽章”

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

功能完整 Stable

Section titled “功能完整 ”Stable

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

实验性 API Beta

Section titled “实验性 API ”Beta

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

旧版系统 Deprecated

Section titled “旧版系统 ”Deprecated

此标题带有危险徽章，表示已弃用。

新功能 New

Section titled “新功能 ”New

此标题带有提示徽章，表示这是一项新功能。

文档 Updated

Section titled “文档 ”Updated

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

默认徽章 Info

Section titled “默认徽章 ”Info

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

侧边栏徽章

Section titled “侧边栏徽章”

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

表格

Section titled “表格”

简单表格

Section titled “简单表格”
功能状态优先级
暗色模式已支持高
图片缩放已支持中
Mermaid 图表已支持中
标题徽章已支持低

带对齐和代码的表格

Section titled “带对齐和代码的表格”
属性类型默认值描述
titlestring—显示在页眉中的页面标题
descriptionstring""用于 SEO 的 meta 描述
sidebar.ordernumber0侧边栏中的排序顺序
sidebar.badgeobjectnull显示在侧边栏标签旁的徽章
template"doc" | "splash""doc"页面布局模板

图片

Section titled “图片”

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

GitHub Avatar

文件树

Section titled “文件树”
  • 文件夹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

主题检查项

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