Componenti

Note

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

Nota

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

Consiglio

Questa è una nota di tipo tip. Evidenzia una buona pratica o una scorciatoia utile.

Attenzione

Questa è una nota di tipo caution. Avverte di una potenziale insidia o di un comportamento non ovvio.

Pericolo

Questa è una nota di tipo danger. Segnala un’azione distruttiva o irreversibile.

Titoli personalizzati

Titolo nota personalizzato

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

Suggerimento avanzato

È possibile annidare grassetto, corsivo e codice inline all’interno dei componenti note.

Attenzione

Prestare attenzione quando si aggiornano le dipendenze — verificare prima il changelog.

Azione distruttiva

L’esecuzione di git reset --hard scarterà in modo permanente le modifiche non salvate.

Contenuto avanzato nelle note

Nota con contenuto misto

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

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

I componenti note integrati di Starlight hanno angoli arrotondati e un’ombra a più livelli:

.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 dovrebbe essere immediato senza ricaricare la pagina.

Schede con contenuto misto

Testo

Contenuto di 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". La selezione di una scheda in un gruppo deve aggiornare anche l’altro.

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 di pagina rapidi.

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 semplice l’avvio.

Layout sfalsato

Fase uno

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

Fase due

Creare le pagine di contenuto utilizzando il formato MDX.

Fase tre

Visualizzare l’anteprima in locale con il server di sviluppo.

Fase quattro

Distribuire sulla piattaforma di hosting preferita.

Link Card

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 e otto i 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 F5 branded.

FirewallIcona firewall F5 branded.

F5 Distributed Cloud (f5xc:)

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

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

Difesa BotIcona F5 XC di difesa bot.

HashiCorp Flight (hashicorp-flight:)

TerraformIcona HashiCorp Terraform.

ConsulIcona HashiCorp Consul.

Badge

Varianti di badge inline

Tutte e sei le varianti di badge rese 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 nelle intestazioni

Le intestazioni seguenti utilizzano la sintassi del plugin starlight-heading-badges.

Funzionalità completata Stabile

Questa intestazione ha un badge di successo che indica che la funzionalità è stabile.

API sperimentale Beta

Questa intestazione ha un badge di attenzione che indica che l’API è sperimentale.

Sistema legacy Deprecato

Questa intestazione ha un badge di pericolo che indica la deprecazione.

Nuova funzionalità Nuovo

Questa intestazione ha un badge di suggerimento che indica una nuova funzionalità.

Documentazione Aggiornato

Questa intestazione ha un badge di nota che indica aggiornamenti recenti.

Badge predefinito Info

Questa intestazione 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 immagine	Supportato	Media
Diagrammi Mermaid	Supportati	Media
Badge nelle intestazioni	Supportati	Bassa

Tabella con allineamento e codice

Proprietà	Tipo	Predefinito	Descrizione
title	string	—	Titolo della pagina visualizzato nell’intestazione
description	string	""	Meta descrizione per la 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 sottostante verifica il plugin starlight-image-zoom. Fare clic per ingrandire.

Albero 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 differisce per ogni variante di nota (blu, viola, giallo, rosso)
• La tinta di sfondo della nota è visibile sia in modalità chiara che scura
• L’ombra è sottile ma visibile attorno a ciascuna nota
• Angoli arrotondati (0.75rem) su tutte le note
• Il colore dell’indicatore della scheda attiva utilizza il colore di accento
• La linea di connessione dei passaggi è visibile tra i passaggi numerati
• Le schede sincronizzate rimangono sincronizzate quando si passa da un gruppo all’altro
• I blocchi di codice all’interno delle schede vengono renderizzati con la corretta evidenziazione della sintassi
• Il colore del bordo della card si adatta tra le modalità chiara e scura
• L’effetto di sfondo al passaggio del mouse è visibile sulle card
• Il colore dell’icona freccia della LinkCard corrisponde al colore di accento
• Il layout sfalsato sposta verticalmente le card alternate
• Le icone vengono renderizzate correttamente nelle intestazioni delle card
• I colori di sfondo dei badge per variante differiscono tra le modalità scura e 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 nelle intestazioni si allineano inline con il testo dell’intestazione
• Il badge della barra laterale viene renderizzato accanto all’etichetta della pagina
• I colori dei bordi della tabella si adattano tra le modalità chiara e scura
• La riga dell’intestazione della tabella ha uno sfondo distinto
• La sovrapposizione dello zoom dell’immagine funziona al clic (starlight-image-zoom)
• Lo sfondo dell’albero dei file utilizza colori appropriati al tema
• Le icone ereditano il colore del testo corrente