Cómo Hacer Una Página

Hacer una Web Profesional con Wordpress

  • Suscribirse (10€/mes)
  • Mi Cuenta
  • Contacto
Estás aquí: Inicio / Hugo / Añadir Tabla de contenidos en Hugo

Añadir Tabla de contenidos en Hugo

agosto 15, 2019 Por Óscar Dejar un comentario

Los que venimos de WordPress estamos mal acostumbrados.

¿Queremos una nueva funcionalidad? Plugin que te crió 😉

En Hugo no es así, nos toca hacer las cosas un poco más manualmente.

Esto no significa que mucho más difícil pero sí conociendo mejor la herramienta que nos traemos entre manos.

La de veces que he visto que instalamos un plugin en WordPress para hacer algo que ya hace de serie el propio WordPress, simplemente por no conocer bien la herramienta.

Hugo nos obliga a conocerla un poco si queremos usarla.

Recuerda que tienes un curso completo de Hugo en la Zona Premium

Hugo soporta de serie las tablas de contenido pero no vienen activadas de serie en las plantilla. Bastará con añadir un shortcode en nuestra plantilla para que aparezca la tabla de contenidos.

Tutorial en Vídeo

Suscríbete a mi canal:  

Añadiendo la Tabla de Contenidos en la plantilla en Hugo

Para añadir la tabla de contenidos tendremos que modificar el fichero layouts » _default » single.html

Si no tienes ese archivo lo tienes que añadir en esa ruta, lo podrás encontrar dentro del directorio de tu plantilla en layouts » _default » single.html

En el fichero single.html tienes que añadir el shortcode {{ .TableOfContents }} en el lugar que quieras que aparezca, en mi caso en el siguiente lugar:

Una vez añadido ya aparecerá la tabla de contenidos:

Y como por arte de magia aparecerá la tabla de contenidos 😉

Añadir la Tabla de contenidos con un shortcode dentro del artículo

Hemos visto como añadir la tabla de contenidos en la plantilla para todos los artículos pero al hacerlo de esta forma no podemos elegir el lugar exacto donde lo queremos añadir.

Yo prefiero hacerlo por shortcode, para hacer por shortcode tenemos que hacer lo siguiente.

Crear el Shortcode

Lo primero que tenemos que hacer es crear la carpeta shortcodes dentro de la carpeta layouts y añadir dentro el fichero con el nombre del shortcode seguido de .html

En mi caso, voy a llamar al shortcode tabla-contenidos por lo que llamo al fichero tabla-contenidos.html

Ahora voy a añadir dentro del fichero el siguiente código:

   {{ .Page.TableOfContents }} 

Ahora tan sólo tenemos que añadir el shortcode {{< tabla-contenidos >}} donde queramos que aparezca la tabla de contenidos 😉

Diseño de la Tabla de contenidos

Cómo has podido comprobar aparece la tabla de contenidos pero el diseño no es el mejor.

Ahora tendremos que aplicar CSS para que el índice o tabla de contenidos se vea como nosotros queremos.

En mi caso le he añadido este css al fichero custom.css que tengo en static » css » custom.css

nav#TableOfContents {
    border: 1px solid #ddd;
    background: #ddd;
    margin-bottom: 20px;
}

nav#TableOfContents ul{
	background: white;
	padding-inline-start: 0px !important;
}

nav#TableOfContents:before {
    content: "Tabla de Contenidos";
    width: 100%;
    background: #ddd;
    display: block;
    padding: 20px;
}

nav#TableOfContents ul li {
    list-style: none;
    padding: 10px;
    border-bottom: 1px solid #ddd;
}

Y para que ese fichero se lea añado en el fichero layouts » partials » head_custom.html lo siguiente:

<link href="{{ .Site.BaseURL }}/css/custom.css" rel="stylesheet">

Y el resultado final sería el siguiente:

resultado final tabla de contenidos

Espero que te haya gustado 😉

Archivado en:Hugo

Deja una respuesta Cancelar la respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Carrito

Categorías

Contenido Premium

¿Quieres Aprender WordPress y Ganar dinero? Cópiame

¿Necesitas Ayuda?

  • Contacto
  • Blog

Más Información

  • Condiciones de Uso
  • Condiciones generales de venta
  • Aviso Legal
  • Pólitica de Privacidad
  • Política de cookies

Buscador

Funciono con el Theme Genesis · Iniciar sesión

Este sitio web instalará en tu navegador cookies analíticas y publicitarias propias y de terceros si continúas navegando.
Encontrará más información en nuestra Política de Cookies...Configuración de CookiesAceptar
Privacy & Cookies Policy

Privacy Overview

This website uses cookies to improve your experience while you navigate through the website. Out of these, the cookies that are categorized as necessary are stored on your browser as they are essential for the working of basic functionalities of the website. We also use third-party cookies that help us analyze and understand how you use this website. These cookies will be stored in your browser only with your consent. You also have the option to opt-out of these cookies. But opting out of some of these cookies may affect your browsing experience.
Necessary
Siempre activado

Las cookies estrictamente necesarias tiene que activarse siempre para que podamos guardar tus preferencias de ajustes de cookies.
Básicamente el blog no funcionará bien si no están activas.
Estas cookies son:
- Comprobación de inicio de sesión.
- Cookies de seguridad imprescindibles.
- Saber si ya has aprobado/rechazado las cookies.

Non-necessary

Esta web utiliza las siguientes cookies adicionales:
- Mautic: Recordar si ya estás suscrito al boletín de noticias.
- Google Analytics: un servicio de analítica web desarrollada por Google, que permite la medición y análisis de la navegación en las páginas web.

GUARDAR Y ACEPTAR