Componenti

Note a margine

Ogni tipo di nota a margine utilizza la sintassi del delimitatore ::: con il proprio titolo predefinito.

Nota

Questa è una nota a margine di tipo nota. Richiama l’attenzione su informazioni supplementari di cui il lettore dovrebbe essere consapevole.

Consiglio

Questa è una nota a margine di tipo suggerimento. Evidenzia una best practice o una scorciatoia utile.

Attenzione

Questa è una nota a margine di tipo attenzione. Avverte di un potenziale problema o di un comportamento non ovvio.

Pericolo

Questa è una nota a margine di tipo pericolo. Segnala un’azione distruttiva o irreversibile.

Titoli personalizzati

Titolo nota personalizzato

Questa nota a margine utilizza il componente <Aside> con un titolo personalizzato.

Suggerimento avanzato

È possibile annidare testo in grassetto, corsivo e codice inline all’interno dei componenti nota a margine.

Attenzione

Fare attenzione quando si aggiornano le dipendenze — verificare prima il registro delle modifiche.

Azione distruttiva

L’esecuzione di git reset --hard scarterà permanentemente le modifiche non salvate.

Contenuto avanzato nelle note a margine

Nota a margine con contenuto misto

Ecco un blocco di codice all’interno di una nota a margine:

npm install @astrojs/starlight

Un elenco di elementi:

• Primo elemento con testo in grassetto
• Secondo elemento con codice inline
• Terzo elemento con un link alla documentazione di Starlight

CSS delle note a margine

I componenti nota a margine integrati di Starlight presentano angoli arrotondati e un’ombra a strati:

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

Schede

Schede di base

Panoramica

Questo è il contenuto della scheda panoramica. Contiene testo semplice per verificare il rendering di base delle schede.

Dettagli

Questa è la scheda dei dettagli. Il passaggio tra le schede deve essere immediato senza ricaricare la pagina.

Schede con contenuto misto

Testo

Contenuto paragrafo semplice nella prima scheda.

Codice

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

Elenco

• Elemento uno all’interno di una scheda
• Elemento due con testo in grassetto
• Elemento tre con codice inline

Schede sincronizzate

Questi due gruppi di schede condividono syncKey="pkg". Selezionando una scheda in un gruppo, l’altro si aggiorna di conseguenza.

Comando di installazione:

npm

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

pnpm

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

yarn

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

Comando di esecuzione:

npm

npm run dev

pnpm

pnpm dev

yarn

yarn dev

Passaggi

1. Clonare il repository

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

2. Installare le dipendenze

   npm install

3. Avviare il server di sviluppo

   npm run dev

   Il sito sarà disponibile all’indirizzo http://localhost:4321.

Card

Card singola

Card singola

Questa è una card autonoma con un’icona. Le card sono utili per evidenziare informazioni o funzionalità chiave.

Griglia di card

Prestazioni

Astro fornisce zero JS per impostazione predefinita per caricamenti rapidi delle pagine.

Personalizzabile

Starlight offre ampie opzioni di tematizzazione e plugin.

Accessibile

Le funzionalità di accessibilità integrate garantiscono che il contenuto raggiunga tutti.

Documentato

Una documentazione completa rende l’avvio semplice e immediato.

Layout sfalsato

Passaggio uno

Configurare le impostazioni del progetto e le variabili d’ambiente.

Passaggio due

Creare le pagine di contenuto nel formato MDX.

Passaggio tre

Visualizzare in anteprima localmente con il server di sviluppo.

Passaggio quattro

Distribuire sulla piattaforma di hosting desiderata.

Card con link

Il tema fornisce un componente LinkCard che funziona con o senza icone. Importarlo dal tema:

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

Documentazione di StarlightScopri come creare siti di documentazione con Starlight.

Documentazione di AstroEsplora il framework Astro per siti web basati sui contenuti.

Con icone

Aggiungere una prop icon utilizzando la sintassi prefisso:nome. Tutti gli otto pacchetti di icone sono supportati — consultare la documentazione dei Pacchetti di icone per il catalogo completo.

Lucide (lucide:)

Firewall per applicazioni web (WAF)Policy e configurazione del firewall.

Rete multi-cloudConnettività dei siti tra cloud.

Carbon (carbon:)

Servizi di SicurezzaSet di icone di sicurezza IBM Carbon.

Servizi CloudSet di icone cloud IBM Carbon.

Material Design Icons (mdi:)

Controllo degli accessiIcona lucchetto scudo Material Design.

Gestione dei datiIcona database Material Design.

Phosphor (phosphor:)

Difesa dalle minacceIcona scudo Phosphor.

Rete globaleIcona globo Phosphor.

Tabler (tabler:)

Piattaforma CloudIcona cloud Tabler.

DistribuzioneIcona razzo Tabler.

F5 Brand (f5-brand:)

Sicurezza CloudIcona scudo cloud con segno di spunta del brand F5.

FirewallIcona firewall del brand F5.

F5 Distributed Cloud (f5xc:)

Queste icone sono multicolore e utilizzano proprietà CSS personalizzate per l’adattamento dei colori in modalità chiara/scura.

Protezione di app e APIIcona di protezione per app web e API di F5 XC.

Difesa BotIcona di difesa bot di F5 XC.

HashiCorp Flight (hashicorp-flight:)

TerraformIcona HashiCorp Terraform.

ConsulIcona HashiCorp Consul.

Badge

Varianti di badge inline

Tutte e sei le varianti di badge renderizzate inline:

Predefinito Nota Pericolo Successo Suggerimento Attenzione

Dimensioni dei badge

Piccolo Medio Grande

Ogni dimensione con una variante:

Suggerimento piccolo Pericolo medio Successo grande

Badge nei titoli

I seguenti titoli utilizzano la sintassi del plugin starlight-heading-badges.

Funzionalità completata Stabile

Questo titolo ha un badge di successo che indica che la funzionalità è stabile.

API sperimentale Beta

Questo titolo ha un badge di attenzione che indica che l’API è sperimentale.

Sistema legacy Deprecato

Questo titolo ha un badge di pericolo che indica la deprecazione.

Nuova funzionalità Nuovo

Questo titolo ha un badge di suggerimento che indica una nuova funzionalità.

Documentazione Aggiornato

Questo titolo ha un badge di nota che indica aggiornamenti recenti.

Badge predefinito Info

Questo titolo ha un badge predefinito senza variante specificata.

Badge nella barra laterale

Controllare la barra laterale: questa pagina ha un badge “Nuovo” con la variante tip applicata tramite frontmatter.

Tabelle

Tabella semplice

Funzionalità	Stato	Priorità
Modalità scura	Supportata	Alta
Zoom immagini	Supportato	Media
Diagrammi Mermaid	Supportati	Media
Badge nei titoli	Supportati	Bassa

Tabella con allineamento e codice

Proprietà	Tipo	Predefinito	Descrizione
title	string	—	Titolo della pagina visualizzato nell’intestazione
description	string	""	Meta descrizione per SEO
sidebar.order	number	0	Ordine di ordinamento nella barra laterale
sidebar.badge	object	null	Badge mostrato accanto all’etichetta della barra laterale
template	"doc" | "splash"	"doc"	Template di layout della pagina

Immagini

L’immagine seguente testa il plugin starlight-image-zoom. Fare clic per ingrandire.

Struttura dei file

• Directorysrc/

  • Directorycontent/

    • Directorydocs/

      • 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 Questa pagina
      • 10-mermaid.mdx
      • 11-footer.mdx
      • 12-style-enhancement-guide.mdx
  • Directoryplugins/

    • remark-mermaid.mjs
• Directorystyles/

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

Verifiche del tema

• Il colore del bordo sinistro varia per ogni variante di nota a margine (blu, viola, giallo, rosso)
• La tinta di sfondo delle note a margine è visibile sia in modalità chiara che scura
• L’ombra del riquadro è sottile ma visibile attorno a ogni nota a margine
• Angoli arrotondati (0.75rem) su tutte le note a margine
• Il colore dell’indicatore attivo delle schede utilizza il colore di accento
• La linea di connessione dei passaggi è visibile tra i passaggi numerati
• Le schede sincronizzate rimangono sincronizzate quando si passa tra i gruppi
• I blocchi di codice all’interno delle schede vengono renderizzati con la corretta evidenziazione della sintassi
• Il colore del bordo delle card si adatta tra la modalità chiara e quella scura
• L’effetto di sfondo al passaggio del mouse è visibile sulle card
• Il colore dell’icona freccia di LinkCard corrisponde al colore di accento
• Il layout sfalsato sposta verticalmente le card alternate
• Le icone vengono renderizzate correttamente all’interno delle intestazioni delle card
• I colori di sfondo dei badge per variante differiscono tra la modalità scura e quella chiara
• I badge in modalità scura utilizzano toni profondi (red-4, jade-4, tangerine-4, eggplant-4, bay-4)
• I badge in modalità chiara utilizzano toni chiari (red-1, jade-1, tangerine-1, eggplant-1, bay-1)
• I badge nei titoli si allineano inline con il testo del titolo
• Il badge della barra laterale viene renderizzato accanto all’etichetta della pagina
• I colori del bordo delle tabelle si adattano tra la modalità chiara e quella scura
• La riga di intestazione della tabella ha uno sfondo distinto
• Lo zoom dell’immagine con overlay funziona al clic (starlight-image-zoom)
• Lo sfondo della struttura dei file utilizza colori appropriati al tema
• Le icone ereditano il colore del testo corrente