mirror of
https://github.com/mintlify/docs.git
synced 2026-09-14 13:35:46 +08:00
mintlify[bot]
4b465465dd
Generated-By: mintlify-agent Co-authored-by: mintlify[bot] <109931778+mintlify[bot]@users.noreply.github.com>
139 lines
5.2 KiB
Plaintext
139 lines
5.2 KiB
Plaintext
---
|
|
title: "Banner"
|
|
description: "Añade un banner descartable en la parte superior de tu sitio de documentación para mostrar anuncios importantes, notas de lanzamiento o notificaciones."
|
|
keywords: ["banner", "anuncios", "en todo el sitio"]
|
|
boost: 3
|
|
---
|
|
|
|
Usa banners para mostrar anuncios, actualizaciones o notificaciones importantes en todo tu sitio de documentación. Los banners aparecen en la parte superior de cada página, admiten formato Markdown y puedes hacer que sean descartables. De manera predeterminada, los banners usan el color definido por la propiedad `colors.dark` en tu `docs.json`. Puedes cambiar la apariencia con la propiedad `type` o anular por completo el fondo con `color`.
|
|
|
|
Para añadir un banner, usa la propiedad `banner` en tu `docs.json`:
|
|
|
|
<CodeGroup>
|
|
```json Product announcements wrap
|
|
"banner": {
|
|
"content": "🚀 ¡La versión 2.0 ya está disponible! Consulta nuestro [registro de cambios](/changelog) para más detalles.",
|
|
"dismissible": true
|
|
}
|
|
```
|
|
|
|
```json Maintenance notices wrap
|
|
"banner": {
|
|
"content": "⚠️ Mantenimiento programado: la API no estará disponible el 15 de diciembre, de 2 a 4 a. m. UTC",
|
|
"type": "warning",
|
|
"dismissible": false
|
|
}
|
|
```
|
|
|
|
```json Critical notices wrap
|
|
"banner": {
|
|
"content": "**Acción requerida:** rota tus claves de API antes del 1 de enero. [Guía de migración](/migration)",
|
|
"type": "critical",
|
|
"dismissible": true
|
|
}
|
|
```
|
|
|
|
```json Custom color wrap
|
|
"banner": {
|
|
"content": "🎉 ¡Únete a nosotros en nuestra conferencia anual!",
|
|
"color": {
|
|
"light": "#7C3AED",
|
|
"dark": "#5B21B6"
|
|
},
|
|
"dismissible": true
|
|
}
|
|
```
|
|
</CodeGroup>
|
|
|
|
<Note>
|
|
También puedes configurar banners por idioma configurando `banner` en `navigation.languages`. Consulta [Banners específicos por idioma](#language-specific-banners).
|
|
</Note>
|
|
|
|
<div id="properties">
|
|
## Propiedades
|
|
</div>
|
|
|
|
<ResponseField name="content" type="string" required>
|
|
El contenido de texto que se muestra en el banner. Admite formato MDX básico, incluyendo enlaces, negrita y cursiva. No se admiten componentes personalizados.
|
|
</ResponseField>
|
|
|
|
<ResponseField name="dismissible" type="boolean">
|
|
Indica si los usuarios pueden cerrar el banner. Cuando es `true`, aparece un botón de cierre. Si un usuario cierra el banner, permanece oculto para él hasta que actualices el contenido del banner. De manera predeterminada, es `false`.
|
|
</ResponseField>
|
|
|
|
<ResponseField name="type" type="string">
|
|
El estilo visual del banner. Controla el color de fondo para que los visitantes puedan reconocer rápidamente la urgencia del mensaje. De manera predeterminada, es `info`.
|
|
|
|
- `info`: Usa el color principal de la marca. Ideal para anuncios de producto y actualizaciones generales.
|
|
- `warning`: Usa un fondo ámbar. Ideal para avisos de precaución, como mantenimientos programados o próximas obsolescencias.
|
|
- `critical`: Usa un fondo rojo. Ideal para avisos urgentes que requieren atención inmediata, como interrupciones o acciones obligatorias.
|
|
</ResponseField>
|
|
|
|
<ResponseField name="color" type="object">
|
|
Anula el color de fondo del banner con un valor hexadecimal personalizado. Cuando se establece, tiene prioridad sobre el color implícito por `type`. El texto del banner es blanco, así que elige un fondo lo suficientemente oscuro para que siga siendo legible.
|
|
|
|
<Expandable title="propiedades de color">
|
|
<ResponseField name="light" type="string">
|
|
Color hexadecimal usado en modo claro. Si solo se proporciona `dark`, también se usa en modo claro.
|
|
</ResponseField>
|
|
|
|
<ResponseField name="dark" type="string">
|
|
Color hexadecimal usado en modo oscuro. Si solo se proporciona `light`, también se usa en modo oscuro.
|
|
</ResponseField>
|
|
</Expandable>
|
|
</ResponseField>
|
|
|
|
<div id="language-specific-banners">
|
|
## Banners específicos por idioma
|
|
</div>
|
|
|
|
Configura distintos banners para cada idioma en tu documentación. Define los banners específicos por idioma en el array `navigation.languages` de tu `docs.json`.
|
|
|
|
```json
|
|
{
|
|
"navigation": {
|
|
"languages": [
|
|
{
|
|
"language": "en",
|
|
"banner": {
|
|
"content": "🚀 Version 2.0 is now live! See our [changelog](/en/changelog) for details.",
|
|
"dismissible": true
|
|
},
|
|
"groups": [
|
|
{
|
|
"group": "Getting started",
|
|
"pages": ["en/overview", "en/quickstart"]
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"language": "es",
|
|
"banner": {
|
|
"content": "🚀 ¡La versión 2.0 ya está disponible! Consulta nuestro [registro de cambios](/es/changelog) para más detalles.",
|
|
"dismissible": true
|
|
},
|
|
"groups": [
|
|
{
|
|
"group": "Getting started",
|
|
"pages": ["es/overview", "es/quickstart"]
|
|
}
|
|
]
|
|
}
|
|
]
|
|
},
|
|
"banner": {
|
|
"content": "🚀 ¡La versión 2.0 ya está disponible!",
|
|
"dismissible": true
|
|
}
|
|
}
|
|
```
|
|
|
|
<div id="fallback-behavior">
|
|
### Comportamiento de respaldo
|
|
</div>
|
|
|
|
Los banners siguen un orden de prioridad al decidir qué contenido mostrar:
|
|
|
|
1. **Banner específico por idioma**: Si el idioma actual tiene una configuración de `banner`, esta tendrá prioridad.
|
|
2. **Banner global**: Si no existe un banner específico por idioma, se muestra el `banner` global.
|