元件

提示框

每種提示框類型均使用 ::: 圍欄語法搭配其預設標題。

自訂標題

提示框內的豐富內容

以下是提示框內的程式碼區塊：

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 預設不輸出 JavaScript，實現快速頁面載入。

可自訂

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 Icons (`mdi:`)

存取控制Material Design 盾牌鎖定圖示。

資料管理Material Design 資料庫圖示。

Phosphor (`phosphor:`)

威脅防禦Phosphor 盾牌圖示。

全球網路Phosphor 地球圖示。

Tabler (`tabler:`)

雲端平台Tabler 雲端圖示。

部署Tabler 火箭圖示。

F5 品牌 (`f5-brand:`)

雲端安全F5 品牌雲端盾牌圖示。

防火牆F5 品牌防火牆圖示。

F5 Distributed Cloud (`f5xc:`)

這些圖示為多色圖示，並使用 CSS 自訂屬性進行亮色／暗色模式的色彩適配。

應用程式與 API 保護F5 XC Web 應用程式與 API 保護圖示。

機器人防禦F5 XC 機器人防禦圖示。

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 Avatar

檔案樹

目錄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）
檔案樹背景使用符合主題的顏色
圖示繼承當前文字顏色