El shortcode button genera enlaces con apariencia de botón para dirigir a otras páginas de la documentación o a recursos externos.
Uso básico #
Utiliza parámetros nombrados para definir el destino, el texto y las opciones del botón:
{{< button href="/docs/latest/getting-started" name="Comenzar" icon="rocket" type="primary" >}}
{{< button href="https://github.com/zkreations/hudocs" name="GitHub" icon="github" >}}
Resultado #
Parámetros #
| Parámetro | Posición | Tipo | Requerido | Descripción |
|---|---|---|---|---|
href | 0 | string | Sí | URL de destino, interna o externa. |
name | 1 | string | Sí | Texto visible. También admite title y text como alias. |
icon | 2 | string | No | Nombre de un ícono de Meteor Icons. |
type | 3 | string | No | Variante visual, como primary o secondary. |
rel | 4 | string | No | Valor personalizado del atributo rel. |
Sintaxis posicional #
Los parámetros pueden proporcionarse por posición en el orden indicado en la tabla:
{{< button "/docs/latest/getting-started/installation/" "Comenzar" "rocket" "primary" "nofollow" >}}
Variantes #
Botón estándar #
Utiliza la apariencia definida por el tema cuando no se especifica type:
{{< button href="#demo" name="Descargar guía" >}}
Botón primario #
El valor primary genera la clase btn-primary:
{{< button href="#demo" name="Instalación rápida" type="primary" >}}
Botón secundario #
El valor secondary genera la clase btn-secondary:
{{< button href="#demo" name="Explorar funciones" type="secondary" >}}
Validación #
El atributo href y la etiqueta del botón son obligatorios. Si falta href o no se proporciona name, title o text, Hugo detiene la compilación e informa del parámetro faltante.
Resolución de enlaces #
El shortcode delega la resolución de la URL y de los atributos target y rel en el partial resolve-link. Para las rutas internas, resolve-link utiliza relLangURL para generar la URL correspondiente al idioma activo.