Configuración del menú de navegación

Personaliza el menú de navegación de tu sitio para incluir páginas personalizadas, enlaces externos y etiquetas bilingües.

¿Qué es el menú de navegación?

El menú de navegación aparece en el encabezado de tu sitio y proporciona enlaces a:

Tus historias (generados automáticamente)
Páginas personalizadas (Acerca de, Créditos, etc.)
Índice de objetos (incluido automáticamente)
Recursos externos (opcional)

Cómo funciona

La navegación se configura a través de _data/navigation.yml. Este enfoque basado en datos te da control completo sobre la estructura y etiquetas del menú.

Cuando existe navigation.yml, Telar lo usa para construir el menú. Si el archivo falta, aparece un menú básico incluido en el código, con enlaces a Historias, Objetos y Acerca de.

Crear tu archivo de navegación

Paso 1: crea el archivo

Agrega navigation.yml al directorio _data/:

_data/
├── navigation.yml    # Tu configuración de navegación personalizada
├── objects.json      # Datos de objetos generados
└── project.json      # Datos de proyecto generados

Paso 2: define la estructura de tu menú

Aquí hay una configuración básica:

menu:
  - title_en: "Stories"
    titulo_es: "Historias"
    url: "/"

  - title_en: "Objects"
    titulo_es: "Objetos"
    url: "/objects/"

  - title_en: "About"
    titulo_es: "Acerca de"
    url: "/about/"

  - title_en: "Credits"
    titulo_es: "Créditos"
    url: "/credits/"

Campos requeridos

Cada elemento del menú necesita:

Campo	Propósito	Ejemplo
`title_en`	Etiqueta en inglés	`"About"`
`titulo_es`	Etiqueta en español	`"Acerca de"`
`url`	URL de la página	`"/about/"`

Campos opcionales

Campo	Propósito	Ejemplo
`external`	Abre en nueva pestaña	`true`

Tipos de elementos de menú

Páginas internas

Enlaza a páginas dentro de tu sitio:

- title_en: "Methodology"
  titulo_es: "Metodología"
  url: "/methodology/"

La URL debe coincidir con el nombre de archivo de tu página (methodology.md → /methodology/).

Enlaces externos

Enlaza a recursos externos:

- title_en: "Project Archive"
  titulo_es: "Archivo del Proyecto"
  url: "https://archive.example.org"
  external: true

Cuando external: true, el enlace se abre en una nueva pestaña con target="_blank".

Página de inicio de historias

Enlaza a la lista de historias:

- title_en: "Stories"
  titulo_es: "Historias"
  url: "/"

Índice de objetos

Enlaza al catálogo de objetos:

- title_en: "Objects"
  titulo_es: "Objetos"
  url: "/objects/"

Ejemplo completo

Aquí hay una configuración de navegación completa para un proyecto de investigación:

menu:
  # Página de inicio de historias
  - title_en: "Stories"
    titulo_es: "Historias"
    url: "/"

  # Catálogo de objetos
  - title_en: "Objects"
    titulo_es: "Objetos"
    url: "/objects/"

  # Páginas personalizadas
  - title_en: "About"
    titulo_es: "Acerca de"
    url: "/about/"

  - title_en: "Methodology"
    titulo_es: "Metodología"
    url: "/methodology/"

  - title_en: "Team"
    titulo_es: "Equipo"
    url: "/team/"

  - title_en: "Credits"
    titulo_es: "Créditos"
    url: "/credits/"

  # Enlace externo
  - title_en: "Full Archive"
    titulo_es: "Archivo Completo"
    url: "https://archive.example.org"
    external: true

Etiquetas bilingües

Cómo funciona la selección de idioma

Telar muestra las etiquetas del menú según la configuración de idioma de tu sitio (telar_language en _config.yml):

Si telar_language: en → Muestra etiquetas title_en
Si telar_language: es → Muestra etiquetas titulo_es

Cuando falta una etiqueta de idioma

Si a un elemento del menú le falta la etiqueta del idioma del sitio, Telar sigue este orden:

Usa la etiqueta del idioma activo (title_en o titulo_es)
Si falta, usa la del otro idioma
Si faltan las dos, muestra la URL como etiqueta

Orden del menú

Los elementos del menú aparecen en el orden en que los listas en navigation.yml:

menu:
  - title_en: "Stories"      # Aparece primero
    ...
  - title_en: "Objects"      # Aparece segundo
    ...
  - title_en: "About"        # Aparece tercero
    ...

Actualizar el menú

Agregar una nueva página

Cuando creas una nueva página personalizada:

Crea el archivo Markdown (telar-content/texts/pages/contact.md)
Agrégalo a navigation.yml:

- title_en: "Contact"
  titulo_es: "Contacto"
  url: "/contact/"

Reconstruye tu sitio

El menú se actualiza automáticamente.

Eliminar una página

Para eliminar una página del menú:

Elimina o comenta la entrada en navigation.yml:

# - title_en: "Old Page"
#   titulo_es: "Página Antigua"
#   url: "/old-page/"

Reconstruye tu sitio

El archivo de la página puede permanecer en telar-content/texts/pages/ pero no aparecerá en la navegación.

Reordenar elementos

Cambia el orden en navigation.yml:

menu:
  # Mueve "About" al principio
  - title_en: "About"
    titulo_es: "Acerca de"
    url: "/about/"

  - title_en: "Stories"
    titulo_es: "Historias"
    url: "/"

  # Resto del menú...

Cuando no hay archivo de navegación

Si _data/navigation.yml no existe, Telar muestra un menú básico incluido en el código:

Stories (página de inicio)
Objects (catálogo)
About (si existe about.md)

Así tu sitio siempre tiene una navegación básica, incluso sin configuración.

Solución de problemas

El menú no se actualiza

Si tus cambios de menú no aparecen:

Verifica sintaxis YAML: Usa un validador YAML para verificar que navigation.yml sea válido
Reconstruye el sitio: Ejecuta bundle exec jekyll build para regenerar
Limpia caché del navegador: Usa Ctrl+Shift+R (Cmd+Shift+R en Mac) para actualizar forzadamente
Verifica ubicación del archivo: El archivo debe estar en _data/navigation.yml (no data/ o _data/nav.yml)

Se muestra el idioma incorrecto

Si las etiquetas del menú aparecen en el idioma incorrecto:

Verifica telar_language en _config.yml
Verifica que estés usando nombres de campo correctos (title_en y titulo_es, no title o label)
Asegúrate de que ambas etiquetas de idioma estén presentes

El enlace externo no se abre en nueva pestaña

Agrega el campo external: true:

- title_en: "External Resource"
  titulo_es: "Recurso Externo"
  url: "https://example.com"
  external: true    # Requerido para nueva pestaña

Mejores prácticas

Etiquetas claras y descriptivas

Usa etiquetas que describan claramente el destino:

✓ Bien:

- title_en: "Research Methodology"
  titulo_es: "Metodología de Investigación"

✗ Evita:

- title_en: "Info"
  titulo_es: "Info"

Ordenamiento consistente

Mantén elementos relacionados juntos:

# Páginas del proyecto
- title_en: "About"
- title_en: "Team"
- title_en: "Methodology"

# Páginas de contenido
- title_en: "Stories"
- title_en: "Objects"

# Recursos externos
- title_en: "Archive"

Limita la longitud del menú

Mantén menús enfocados (5-7 elementos es ideal). Para sitios más grandes, considera agrupar contenido de manera diferente o usar enlaces de pie de página para páginas secundarias.

Véase también

Páginas Personalizadas - Crear páginas para enlazar en la navegación
Referencia de Configuración - Opciones completas de _config.yml incluyendo telar_language
Resumen de Personalización - Otras opciones de personalización

Nuevo en v0.6.0: Navegación personalizable con etiquetas bilingües y soporte para enlaces externos.