Logo

El tema muestra un logotipo en el encabezado del sitio de cada sitio de documentación.

Recursos de logotipo disponibles

El tema incluye dos archivos de logotipo en el directorio assets/:

Archivo	Formato	Descripción
assets/f5-logo.svg	SVG	Logotipo de F5 en Cloud Red (#e4002b)
assets/github-avatar.png	PNG	Avatar de la organización de GitHub (predeterminado)

Logotipo predeterminado

El logotipo predeterminado se establece en la fábrica createF5xcDocsConfig en config.ts:

const logo = options.logo || { src: '@f5-sales-demo/docs-theme/assets/github-avatar.png' };

Si no se proporciona ninguna opción logo, se utiliza el PNG del avatar de GitHub. La ruta es un especificador de paquete npm resuelto a través del mapa exports en package.json.

Reemplazar el logotipo

Opción 1: Usar el logotipo SVG de F5

Pase la opción logo a createF5xcDocsConfig:

import { createF5xcDocsConfig } from '@f5-sales-demo/docs-theme/config';

export default createF5xcDocsConfig({
  logo: { src: '@f5-sales-demo/docs-theme/assets/f5-logo.svg' },
});

Opción 2: Usar un logotipo personalizado

Coloque su archivo de logotipo en el repositorio de contenido y haga referencia a él:

import { createF5xcDocsConfig } from '@f5-sales-demo/docs-theme/config';

export default createF5xcDocsConfig({
  logo: { src: './src/assets/my-logo.svg' },
});

Opción 3: Logotipos separados para modo claro y oscuro

Starlight admite logotipos separados para el modo claro y oscuro:

import { createF5xcDocsConfig } from '@f5-sales-demo/docs-theme/config';

export default createF5xcDocsConfig({
  logo: {
    light: './src/assets/logo-light.svg',
    dark: './src/assets/logo-dark.svg',
  },
});

Directrices

• Use formato SVG — las imágenes rasterizadas (PNG, JPG) funcionarán, pero no escalarán correctamente en todos los tamaños
• Incluya un viewBox — garantiza que el logotipo escale proporcionalmente (p. ej., viewBox="0 0 100 100")
• Mantenga el tamaño del archivo pequeño — el logotipo se carga en cada página; procure que sea inferior a 10 KB
• Pruébelo en ambos temas — verifique que el logotipo se vea correctamente tanto en el modo claro como en el oscuro