Hudocs genera un árbol documental jerárquico en la barra lateral de forma automática a partir de la estructura de carpetas en content/docs/<version>/. Las secciones y páginas se estructuran solas sin necesidad de declararlas en hugo.toml.

Estructura jerárquica #

La navegación se genera a partir de la estructura de carpetas del contenido. Un directorio que contiene un archivo _index.md actúa como una sección del menú:

content/docs/latest/
├── _index.md
└── guides/                     # Sección principal (Nivel 0)
    ├── _index.md
    ├── navigation.md           # Página final (Nivel 1)
    └── advanced/               # Sub-sección (Nivel 1)
        ├── _index.md
        └── deep-dive.md        # Página final (Nivel 2)

Hudocs no establece un límite de niveles de anidación. Para mantener una navegación legible, se recomienda utilizar una jerarquía de 2 o 3 niveles.

Orden de páginas y secciones #

Los elementos se ordenan de forma ascendente según el parámetro weight de su front matter:

---
title: Configuración Avanzada
weight: 2
---

Las páginas con un valor menor de weight aparecen primero. Cuando se omite weight, Hugo aplica su propio orden de clasificación.

Estado activo #

Cuando un lector visita una página:

  • El enlace de la página activa recibe la clase .is-active.
  • Las secciones ascendentes reciben la clase .is-current.
  • Los selectores de las secciones activas se abren automáticamente al cargar la página.

Redirecciones de sección #

Una sección puede redirigir directamente a una de sus páginas mediante el layout redirect:

---
title: Guías
icon: book-open
layout: redirect
redirect: "/navigation"
weight: 2
---

El parámetro redirect recibe la ruta relativa de destino. Hugo genera el enlace con el prefijo de idioma correspondiente y la redirección mediante una cabecera meta.

Íconos en la navegación #

Puedes asignar un ícono del catálogo Meteor Icons a una página o sección:

---
title: Árbol Documental
icon: align-left
---

Los íconos se renderizan como SVG en línea mediante el componente interno del tema.

Insignias de estado #

Para mostrar una insignia en el menú, añade badge: true:

---
title: Webhooks
icon: zap
badge: true
badge_text: "Nuevo"
---
  • Si no defines badge_text, se utiliza site.Params.docs_badge_text (o site.Params.badge_text) o el valor traducido por defecto.
  • La insignia también se muestra junto al título <h1> de la página.

Ocultar páginas de la navegación #

Para publicar una página sin mostrarla en el árbol documental lateral, utiliza hidden: true en el front matter:

---
title: Guía no listada
hidden: true
---

Este parámetro oculta la página del árbol documental automático. Ten en cuenta que hidden solo afecta a páginas de contenido del árbol; para configurar enlaces globales de la barra lateral como GitHub o accesos directos, consulta la guía de Menús Globales.