Componentes

Asides

Cada tipo de aside utiliza la sintaxis de valla ::: con su título predeterminado.

Títulos personalizados

Contenido enriquecido dentro de Asides

A continuación se muestra un bloque de código dentro de un aside:

npm install @astrojs/starlight

Una lista de elementos:

Primer elemento con texto en negrita
Segundo elemento con código en línea
Tercer elemento con un enlace a la documentación de Starlight

CSS de Asides

Los componentes aside integrados de Starlight tienen esquinas redondeadas y una sombra en capas:

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

Pestañas

Este es el contenido de la pestaña de descripción general. Contiene texto sin formato para verificar la representación básica de pestañas.

Pestañas con contenido mixto

Contenido de párrafo simple en la primera pestaña.

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

Elemento uno dentro de una pestaña
Elemento dos con texto en negrita
Elemento tres con código en línea

Pestañas sincronizadas

Estos dos grupos de pestañas comparten syncKey="pkg". Seleccionar una pestaña en un grupo debe actualizar el otro.

Comando de instalación:

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

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

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

Comando de ejecución:

npm run dev

pnpm dev

yarn dev

Pasos

Clonar el repositorio

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

Instalar dependencias
Ventana de terminal
```
npm install
```
Iniciar el servidor de desarrollo
Ventana de terminal
```
npm run dev
```
El sitio estará disponible en http://localhost:4321.

Tarjetas

Tarjeta individual

Single Card

Esta es una tarjeta independiente con un icono. Las tarjetas son útiles para destacar información clave o funcionalidades.

Cuadrícula de tarjetas

Performance

Astro ofrece cero JavaScript por defecto para cargas de página rápidas.

Customizable

Starlight proporciona amplias opciones de temas y complementos.

Accessible

Las funciones de accesibilidad integradas garantizan que el contenido llegue a todos.

Documented

La documentación completa hace que comenzar sea sencillo.

Diseño escalonado

Step One

Configure los ajustes de su proyecto y las variables de entorno.

Step Two

Cree sus páginas de contenido utilizando el formato MDX.

Step Three

Previsualice localmente con el servidor de desarrollo.

Step Four

Implemente en la plataforma de alojamiento de su elección.

Tarjetas de enlace

El tema proporciona un componente LinkCard que funciona con o sin iconos. Impórtelo desde el tema:

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

Starlight DocumentationLearn how to build documentation sites with Starlight.

Astro DocumentationExplore the Astro framework for content-driven websites.

Con iconos

Agregue una prop icon usando la sintaxis prefijo:nombre. Se admiten los ocho paquetes de iconos — consulte la documentación de Paquetes de iconos para el catálogo completo.

Lucide (`lucide:`)

Web App FirewallFirewall policies and configuration.

Multi-Cloud NetworkingSite connectivity across clouds.

Carbon (`carbon:`)

Security ServicesIBM Carbon security icon set.

Cloud ServicesIBM Carbon cloud icon set.

Material Design Icons (`mdi:`)

Access ControlMaterial Design shield lock icon.

Data ManagementMaterial Design database icon.

Phosphor (`phosphor:`)

Threat DefensePhosphor shield icon.

Global NetworkPhosphor globe icon.

Tabler (`tabler:`)

Cloud PlatformTabler cloud icon.

DeploymentTabler rocket icon.

F5 Brand (`f5-brand:`)

Cloud SecurityF5 branded cloud shield icon.

FirewallF5 branded firewall icon.

F5 Distributed Cloud (`f5xc:`)

Estos iconos son multicolor y utilizan propiedades personalizadas de CSS para la adaptación de color en modo claro/oscuro.

App & API ProtectionF5 XC web app and API protection icon.

Bot DefenseF5 XC bot defense icon.

HashiCorp Flight (`hashicorp-flight:`)

TerraformHashiCorp Terraform icon.

ConsulHashiCorp Consul icon.

Insignias

Variantes de insignias en línea

Las seis variantes de insignias representadas en línea:

Default Note Danger Success Tip Caution

Tamaños de insignias

Small Medium Large

Cada tamaño con una variante:

Small Tip Medium Danger Large Success

Insignias en encabezados

Los siguientes encabezados utilizan la sintaxis del complemento starlight-heading-badges.

Función completa Stable

Este encabezado tiene una insignia de éxito que indica que la función es estable.

API experimental Beta

Este encabezado tiene una insignia de precaución que indica que la API es experimental.

Sistema heredado Deprecated

Este encabezado tiene una insignia de peligro que indica que está en desuso.

Nueva función New

Este encabezado tiene una insignia de consejo que indica una nueva función.

Documentación Updated

Este encabezado tiene una insignia de nota que indica actualizaciones recientes.

Insignia predeterminada Info

Este encabezado tiene una insignia predeterminada sin variante especificada.

Insignia en la barra lateral

Consulte la barra lateral: esta página tiene una insignia “New” con la variante tip aplicada mediante frontmatter.

Tablas

Tabla simple

Función	Estado	Prioridad
Modo oscuro	Compatible	Alta
Zoom de imagen	Compatible	Media
Diagramas Mermaid	Compatible	Media
Insignias en encabezados	Compatible	Baja

Tabla con alineación y código

Propiedad	Tipo	Predeterminado	Descripción
`title`	`string`	—	Título de página mostrado en el encabezado
`description`	`string`	`""`	Meta descripción para SEO
`sidebar.order`	`number`	`0`	Orden de clasificación en la barra lateral
`sidebar.badge`	`object`	`null`	Insignia mostrada junto a la etiqueta de la barra lateral
`template`	`"doc" \| "splash"`	`"doc"`	Plantilla de diseño de página

Imágenes

La imagen a continuación prueba el complemento starlight-image-zoom. Haga clic para ampliar.

GitHub Avatar

Árbol de archivos

Directoriosrc/
- Directoriocontent/
  - Directoriodocs/
    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 Esta página
    10-mermaid.mdx
    11-footer.mdx
    12-style-enhancement-guide.mdx
- Directorioplugins/
  - remark-mermaid.mjs
Directoriostyles/
- custom.css
astro.config.mjs
package.json

Verificaciones del tema

El color del borde izquierdo difiere por variante de aside (azul, morado, amarillo, rojo)
El tinte de fondo del aside es visible en los modos claro y oscuro
La sombra de caja es sutil pero visible alrededor de cada aside
Esquinas redondeadas (0.75rem) en todos los asides
El color del indicador activo de pestaña utiliza el color de acento
La línea de conexión de pasos es visible entre pasos numerados
Las pestañas sincronizadas permanecen sincronizadas al cambiar entre grupos
Los bloques de código dentro de las pestañas se representan con el resaltado de sintaxis adecuado
El color del borde de la tarjeta se adapta entre los modos claro y oscuro
El efecto de fondo al pasar el cursor es visible en las tarjetas
El color del icono de flecha de LinkCard coincide con el color de acento
El diseño escalonado desplaza verticalmente las tarjetas alternas
Los iconos se representan correctamente dentro de los encabezados de tarjetas
Los colores de fondo de las insignias por variante difieren entre los modos oscuro y claro
Las insignias en modo oscuro utilizan tonos profundos (red-4, jade-4, tangerine-4, eggplant-4, bay-4)
Las insignias en modo claro utilizan tonos claros (red-1, jade-1, tangerine-1, eggplant-1, bay-1)
Las insignias en encabezados se alinean en línea con el texto del encabezado
La insignia de la barra lateral se representa junto a la etiqueta de la página
Los colores de borde de la tabla se adaptan entre los modos claro y oscuro
La fila de encabezado de la tabla tiene un fondo diferenciado
El zoom de imagen funciona al hacer clic (starlight-image-zoom)
El fondo del árbol de archivos utiliza colores apropiados para el tema
Los iconos heredan el color de texto actual