Composants

Apartés

Chaque type d’aparté utilise la syntaxe de délimiteur ::: avec son titre par défaut.

Note

Ceci est un aparté de type note. Il attire l’attention sur des informations complémentaires dont le lecteur doit avoir connaissance.

Astuce

Ceci est un aparté de type conseil. Il met en avant une bonne pratique ou un raccourci utile.

Attention

Ceci est un aparté de type mise en garde. Il avertit d’un écueil potentiel ou d’un comportement non évident.

Danger

Ceci est un aparté de type danger. Il signale une action destructive ou irréversible.

Titres personnalisés

Custom Note Title

Cet aparté utilise le composant <Aside> avec un titre personnalisé.

Pro Tip

Vous pouvez imbriquer du gras, de l’italique et du code en ligne à l’intérieur des composants d’aparté.

Watch Out

Soyez prudent lors de la mise à jour des dépendances — consultez d’abord le journal des modifications.

Destructive Action

L’exécution de git reset --hard supprimera définitivement les modifications non validées.

Contenu enrichi dans les apartés

Aparté avec contenu mixte

Voici un bloc de code à l’intérieur d’un aparté :

npm install @astrojs/starlight

Une liste d’éléments :

• Premier élément avec du texte en gras
• Deuxième élément avec du code en ligne
• Troisième élément avec un lien vers la documentation Starlight

CSS des apartés

Les composants d’aparté intégrés de Starlight reçoivent des coins arrondis et une ombre superposée :

.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);
}

Onglets

Onglets de base

Overview

Voici le contenu de l’onglet aperçu. Il contient du texte brut pour vérifier le rendu de base des onglets.

Details

Voici l’onglet détails. Le basculement entre les onglets doit être instantané sans rechargement de page.

Onglets avec contenu mixte

Text

Contenu de paragraphe simple dans le premier onglet.

Code

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

List

• Élément un dans un onglet
• Élément deux avec du texte en gras
• Élément trois avec du code en ligne

Onglets synchronisés

Ces deux groupes d’onglets partagent syncKey="pkg". La sélection d’un onglet dans un groupe doit mettre à jour l’autre.

Commande d’installation :

npm

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

pnpm

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

yarn

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

Commande d’exécution :

npm

npm run dev

pnpm

pnpm dev

yarn

yarn dev

Étapes

1. Cloner le dépôt

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

2. Installer les dépendances

   npm install

3. Démarrer le serveur de développement

   npm run dev

   Le site sera disponible à l’adresse http://localhost:4321.

Cartes

Carte unique

Single Card

Voici une carte autonome avec une icône. Les cartes sont utiles pour mettre en évidence des informations ou des fonctionnalités clés.

Grille de cartes

Performance

Astro délivre zéro JS par défaut pour des chargements de page rapides.

Customizable

Starlight offre de nombreuses options de thématisation et d’extensions.

Accessible

Les fonctionnalités d’accessibilité intégrées garantissent que le contenu est accessible à tous.

Documented

Une documentation complète facilite la prise en main.

Disposition décalée

Step One

Configurez les paramètres de votre projet et les variables d’environnement.

Step Two

Créez vos pages de contenu au format MDX.

Step Three

Prévisualisez localement avec le serveur de développement.

Step Four

Déployez sur la Plateforme d’hébergement de votre choix.

Cartes avec liens

Le thème fournit un composant LinkCard qui fonctionne avec ou sans icônes. Importez-le depuis le thème :

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

Starlight DocumentationApprenez à créer des sites de documentation avec Starlight.

Astro DocumentationExplorez le framework Astro pour les sites web axés sur le contenu.

Avec icônes

Ajoutez une prop icon en utilisant la syntaxe préfixe:nom. Les huit paquets d’icônes sont pris en charge — consultez la documentation des Paquets d’icônes pour le catalogue complet.

Lucide (lucide:)

Web App FirewallPolitiques de pare-feu et configuration.

Multi-Cloud NetworkingConnectivité de site entre les clouds.

Carbon (carbon:)

Services de SécuritéJeu d'icônes de sécurité IBM Carbon.

Services CloudJeu d'icônes cloud IBM Carbon.

Material Design Icons (mdi:)

Contrôle d'accèsIcône cadenas de bouclier Material Design.

Gestion des donnéesIcône base de données Material Design.

Phosphor (phosphor:)

Défense contre les menacesIcône bouclier Phosphor.

Réseau mondialIcône globe Phosphor.

Tabler (tabler:)

Plateforme CloudIcône cloud Tabler.

DéploiementIcône fusée Tabler.

F5 Brand (f5-brand:)

Sécurité CloudIcône bouclier cloud de marque F5.

Pare-feuIcône pare-feu de marque F5.

F5 Distributed Cloud (f5xc:)

Ces icônes sont multicolores et utilisent des propriétés CSS personnalisées pour l’adaptation des couleurs en mode clair/sombre.

Protection des applications et des APIIcône de protection des applications web et des API F5 XC.

Défense BotIcône de défense bot F5 XC.

HashiCorp Flight (hashicorp-flight:)

TerraformIcône HashiCorp Terraform.

ConsulIcône HashiCorp Consul.

Badges

Variantes de badges en ligne

Les six variantes de badges rendues en ligne :

Default Note Danger Success Tip Caution

Tailles de badges

Small Medium Large

Chaque taille avec une variante :

Small Tip Medium Danger Large Success

Badges dans les titres

Les titres suivants utilisent la syntaxe du plugin starlight-heading-badges.

Fonctionnalité complète Stable

Ce titre comporte un badge de succès indiquant que la fonctionnalité est stable.

API expérimentale Beta

Ce titre comporte un badge de mise en garde indiquant que l’API est expérimentale.

Système hérité Deprecated

Ce titre comporte un badge de danger indiquant la dépréciation.

Nouvelle fonctionnalité New

Ce titre comporte un badge de conseil indiquant une nouvelle fonctionnalité.

Documentation Updated

Ce titre comporte un badge de note indiquant des mises à jour récentes.

Badge par défaut Info

Ce titre comporte un badge par défaut sans variante spécifiée.

Badge dans la barre latérale

Consultez la barre latérale : cette page comporte un badge « New » avec la variante tip appliquée via le frontmatter.

Tableaux

Tableau simple

Fonctionnalité	Statut	Priorité
Mode sombre	Pris en charge	Haute
Zoom sur les images	Pris en charge	Moyenne
Diagrammes Mermaid	Pris en charge	Moyenne
Badges dans les titres	Pris en charge	Basse

Tableau avec alignement et code

Propriété	Type	Défaut	Description
title	string	—	Titre de la page affiché dans l’en-tête
description	string	""	Méta-description pour le référencement
sidebar.order	number	0	Ordre de tri dans la barre latérale
sidebar.badge	object	null	Badge affiché à côté du libellé de la barre latérale
template	"doc" | "splash"	"doc"	Modèle de mise en page

Images

L’image ci-dessous teste le plugin starlight-image-zoom. Cliquez pour agrandir.

Arborescence de fichiers

• Répertoiresrc/

  • Répertoirecontent/

    • Répertoiredocs/

      • 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 Cette page
      • 10-mermaid.mdx
      • 11-footer.mdx
      • 12-style-enhancement-guide.mdx
  • Répertoireplugins/

    • remark-mermaid.mjs
• Répertoirestyles/

  • custom.css
• astro.config.mjs
• package.json

Vérifications du thème

• La couleur de la bordure gauche diffère selon la variante d’aparté (bleu, violet, jaune, rouge)
• La teinte de fond des apartés est visible en mode clair et en mode sombre
• L’ombre portée est subtile mais visible autour de chaque aparté
• Coins arrondis (0.75rem) sur tous les apartés
• La couleur de l’indicateur d’onglet actif utilise la couleur d’accentuation
• La ligne de connexion des étapes est visible entre les étapes numérotées
• Les onglets synchronisés restent synchronisés lors du basculement entre les groupes
• Les blocs de code à l’intérieur des onglets sont rendus avec la coloration syntaxique appropriée
• La couleur de bordure des cartes s’adapte entre les modes clair et sombre
• L’effet de survol est visible sur les cartes
• La couleur de l’icône de flèche des cartes avec liens correspond à la couleur d’accentuation
• La disposition décalée décale verticalement les cartes alternées
• Les icônes s’affichent correctement dans les en-têtes de cartes
• Les couleurs de fond des badges par variante diffèrent entre les modes sombre et clair
• Les badges en mode sombre utilisent des tons profonds (red-4, jade-4, tangerine-4, eggplant-4, bay-4)
• Les badges en mode clair utilisent des tons clairs (red-1, jade-1, tangerine-1, eggplant-1, bay-1)
• Les badges dans les titres s’alignent en ligne avec le texte du titre
• Le badge de la barre latérale s’affiche à côté du libellé de la page
• Les couleurs de bordure des tableaux s’adaptent entre les modes clair et sombre
• La ligne d’en-tête du tableau a un arrière-plan distinct
• L’effet de zoom des images fonctionne au clic (starlight-image-zoom)
• L’arborescence de fichiers utilise des couleurs adaptées au thème
• Les icônes héritent de la couleur de texte courante