元件

提示框

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

自訂標題

提示框內的豐富內容

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

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 屬性。所有八個圖示套件均受支援 — 請參閱 Icon Packages 文件以取得完整目錄。

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 測試版

此標題帶有注意徽章，表示 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）
FileTree 背景使用符合佈景主題的色彩
圖示繼承目前的文字色彩