Enlaces de encabezado personalizados

[Discourse]

	Resumen	Custom Header Links te permite añadir fácilmente enlaces de texto personalizados a la cabecera.
	Vista previa	Vista previa en Discourse Theme Creator
	Enlace al Repositorio	GitHub - discourse/discourse-custom-header-links · GitHub
	¿Nuevo en Temas de Discourse?	Guía para principiantes sobre el uso de Temas de Discourse

Instalar este componente de tema

Dado que este es un official tema componente mantenido por el equipo de Discourse, las solicitudes de Support, Contribute > Bug, Contribute > UX y Contribute > Feature se pueden realizar en las categorías respectivas aquí en Meta, y etiquetadas con la etiqueta de componente de tema apropiada. Haz clic en un enlace a continuación para iniciar una.
Soporte Error UX Característica

---

Características

Escritorio

Móvil

(debido al espacio muy limitado, no se recomienda añadir más de un enlace en móvil)

---

Configuración

Configuración	Descripción
custom_header_links	La lista estructurada de enlaces a mostrar en la cabecera. Cada enlace se configura a través de un formulario con campos individuales (ver más abajo).
links_position	Controla si los enlaces aparecen en el lado derecho (predeterminado) o izquierdo de la cabecera, cerca del logotipo. Cuando se establece en left, todos los enlaces se ocultan automáticamente en las páginas de temas para dejar espacio para el título del tema, independientemente de la configuración individual de hide_on_scroll de cada enlace.

---

Añadir Enlaces

Los enlaces se configuran a través de un formulario estructurado en la configuración del componente de tema. Haz clic en Añadir para añadir un nuevo enlace. Cada enlace tiene los siguientes campos:

Campo	Requerido	Descripción
Texto	Sí	La etiqueta visible para el enlace. Máx. 100 caracteres. También determina la clase CSS aplicada al enlace (ver CSS Customisation más abajo).
Título	No	El texto de información sobre herramientas que se muestra al pasar el ratón sobre el enlace. Máx. 1000 caracteres.
URL	Sí	La URL a la que apunta el enlace. Puede ser una ruta relativa (ej. /faq) o una URL completa. Máx. 2048 caracteres.
Vista	No	Controla en qué dispositivo aparece el enlace. Si se deja sin configurar, el enlace se muestra en todos los dispositivos (igual que vdm). Ver valores a continuación.
Objetivo	No	Controla cómo se abre el enlace. Si se deja sin configurar, por defecto se abre en una nueva pestaña (igual que blank). Ver valores a continuación.
Ocultar al desplazarse	No	Controla si el enlace se oculta cuando el título del tema se hace visible en la cabecera en las páginas de temas. Por defecto es keep. Solo se aplica cuando links_position se establece en right — ver nota a continuación. Ver valores a continuación.
Local	No	Si se establece, el enlace solo se muestra cuando el idioma de la página del sitio coincide con este valor. Dejar en blanco para mostrar el enlace en todas las configuraciones regionales. Ver detalles a continuación.

Valores de Vista:

Valor	Comportamiento
vdm	Visible en escritorio y móvil
vdo	Visible solo en escritorio
vmo	Visible solo en móvil
(sin configurar)	Igual que vdm — visible en todos los dispositivos

Valores de Objetivo:

Valor	Comportamiento
blank	Se abre en una nueva pestaña
self	Se abre en la misma pestaña
(sin configurar)	Por defecto se abre en una nueva pestaña (igual que blank)

Valores de Ocultar al desplazarse:

Valor	Comportamiento
keep	El enlace permanece visible incluso cuando el título del tema se muestra en la cabecera (predeterminado)
remove	El enlace se oculta cuando el título del tema se vuelve visible en las páginas de temas

hide_on_scroll solo se aplica cuando links_position es right. Cuando links_position es left, todos los enlaces se ocultan juntos en las páginas de temas independientemente de su configuración individual de hide_on_scroll.

Aquí hay un ejemplo de hide_on_scroll en acción (con links_position establecido en right):

Most Liked y Privacy están configurados en keep, por lo que permanecen visibles cuando el título se expande. Los otros enlaces están configurados en remove, por lo que se ocultan cuando el título se vuelve visible. Este comportamiento solo afecta a las páginas de temas.

---

Filtrado por Idioma (Locale)

El campo Locale te permite mostrar un enlace solo cuando el sitio está configurado en un idioma específico. Esto es útil para comunidades multilingües que desean enlaces de cabecera diferentes por idioma.

• Establece el campo en un código de idioma regional como en, de, fr, zh_CN, etc.
• La coincidencia no distingue entre mayúsculas y minúsculas, y tanto los separadores - como _ se tratan de forma idéntica, por lo que en-US, en_US y en_us coinciden igualmente.
• Si el campo de idioma regional se deja en blanco, el enlace se muestra en todas las configuraciones regionales. Esta es la configuración recomendada para la mayoría de los sitios con un solo idioma.
• También se añade una clase CSS headerLink--{locale} al elemento del enlace, que se puede utilizar para una selección CSS adicional.

Problema común: Si tus enlaces no aparecen, comprueba si has configurado accidentalmente un valor de locale que no coincide con el idioma configurado de tu sitio. Dejar el campo de idioma regional en blanco es seguro y siempre mostrará el enlace.

---

Personalización CSS

Cada enlace recibe automáticamente una clase CSS derivada de su valor de Texto: los espacios se sustituyen por guiones, el texto se convierte a minúsculas y se añade -custom-header-links.

Por ejemplo:

• Un enlace con el texto Privacy recibe la clase privacy-custom-header-links
• Un enlace con el texto Visit Shop recibe la clase visit-shop-custom-header-links

Estilizar todos los enlaces de la cabecera:

.custom-header-links .headerLink a {
  font-size: var(--font-up-1);
  color: var(--header_primary);
}

Estilizar un enlace específico (ej. un enlace con el texto “Privacy”):

.custom-header-links .headerLink.privacy-custom-header-links a {
  color: var(--tertiary);
}
.custom-header-links .headerLink.privacy-custom-header-links a:hover {
  color: var(--tertiary-high);
}

Mostrar u ocultar un enlace según el estado de inicio de sesión:

Discourse añade una clase anon a la etiqueta <html> para los usuarios que han cerrado la sesión. Puedes usar esto para mostrar u ocultar enlaces condicionalmente:

/* Ocultar "Dashboard" a los usuarios no registrados */
html.anon .dashboard-custom-header-links {
  display: none;
}

/* Ocultar "Sign Up" a los usuarios registrados */
html:not(.anon) .sign-up-custom-header-links {
  display: none;
}

El display: none de CSS es un mecanismo de ocultación solo visual. El HTML del enlace sigue presente en el código fuente de la página. No lo utilices para proteger URL sensibles o sujetas a control de acceso.

Reordenar enlaces con CSS (usando el order de flexbox):

.custom-header-links li {
  &:nth-child(1) { order: 3; }
  &:nth-child(2) { order: 1; }
  &:nth-child(3) { order: 2; }
}

Usa la ruta /my para enlaces específicos del usuario, para evitar codificar un nombre de usuario:

/my/messages     → la bandeja de entrada del usuario actual
/my/activity     → la actividad del usuario actual

---

¿Alojado por nosotros? Los componentes de tema están disponibles para su uso en nuestros planes Pro, Business y Enterprise.

---

Aspectos destacados del registro de cambios:

• La configuración custom_header_links se migró de un formato de lista delimitada por comas a una interfaz de formulario estructurada de tipo objects. Si configuraste previamente enlaces usando la entrada de texto separada por comas anterior, la migración debería haber conservado tus datos automáticamente.