コンポーネント

アサイド

各アサイドタイプは、デフォルトのタイトルとともに ::: フェンス構文を使用します。

カスタムタイトル

アサイド内のリッチコンテンツ

アサイド内のコードブロックです：

npm install @astrojs/starlight

項目のリスト：

太字テキストを含む最初の項目
インラインコードを含む2番目の項目
Starlight ドキュメントへのリンクを含む3番目の項目

アサイドの 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);

タブ内の項目1
太字テキストを含む項目2
インラインコードを含む項目3

同期タブ

これらの2つのタブグループは 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 は広範なテーマ設定とプラグインオプションを提供します。

アクセシブル

組み込みのアクセシビリティ機能により、すべてのユーザーがコンテンツにアクセスできます。

ドキュメント化済み

充実したドキュメントにより、スムーズに始められます。

スタガーレイアウト

ステップ1

プロジェクトの設定と環境変数を構成します。

ステップ2

MDX 形式を使用してコンテンツページを作成します。

ステップ3

開発サーバーでローカルプレビューを確認します。

ステップ4

選択したホスティングプラットフォームにデプロイします。

リンクカード

テーマはアイコンの有無にかかわらず動作する LinkCard コンポーネントを提供します。テーマからインポートしてください：

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

Starlight ドキュメントStarlight でドキュメントサイトを構築する方法を学びましょう。

Astro ドキュメントコンテンツ駆動型 Web サイトのための Astro フレームワークを探索しましょう。

アイコン付き

prefix:name 構文を使用して icon プロップを追加します。8つのアイコンパックすべてがサポートされています — 完全なカタログはアイコンパッケージのドキュメントを参照してください。

Lucide (`lucide:`)

Web アプリファイアウォール (WAF)ファイアウォールポリシーと設定。

マルチクラウドネットワーククラウド間のサイト接続。

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 保護アイコン。

Bot 防御F5 XC Bot 防御アイコン。

HashiCorp Flight (`hashicorp-flight:`)

TerraformHashiCorp Terraform アイコン。

ConsulHashiCorp Consul アイコン。

バッジ

インラインバッジのバリアント

6つのバッジバリアントをインラインでレンダリング：

デフォルト注記危険成功ヒント注意

バッジサイズ

スモールミディアムラージ

バリアント付きの各サイズ：

スモールヒントミディアム危険ラージ成功

見出しバッジ

以下の見出しは starlight-heading-badges プラグイン構文を使用しています。

機能完成安定版

この見出しには、機能が安定していることを示す成功バッジが付いています。

実験的 API ベータ

この見出しには、API が実験的であることを示す注意バッジが付いています。

レガシーシステム非推奨

この見出しには、非推奨であることを示す危険バッジが付いています。

新機能新機能

この見出しには、新機能であることを示すヒントバッジが付いています。

ドキュメント更新済み

この見出しには、最近更新されたことを示す注記バッジが付いています。

デフォルトバッジ情報

この見出しには、バリアントが指定されていないデフォルトバッジが付いています。

サイドバーバッジ

サイドバーを確認してください：このページには、フロントマター経由で tip バリアントが適用された「New」バッジがあります。

テーブル

シンプルなテーブル

機能	ステータス	優先度
ダークモード	サポート済み	高
画像ズーム	サポート済み	中
Mermaid ダイアグラム	サポート済み	中
見出しバッジ	サポート済み	低

配置とコードを含むテーブル

プロパティ	タイプ	デフォルト	説明
`title`	`string`	—	ヘッダーに表示されるページタイトル
`description`	`string`	`""`	SEO 用のメタディスクリプション
`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 の背景はテーマに適した色を使用する
アイコンは現在のテキストカラーを継承する