Numeración automática de encabezados y índices en las páginas de Hugo

En este tutorial, aprenderemos cómo generar numeración automática para encabezados, subtítulos y tabla de contenido en Hugo Pages.

Índice
  1. Visión de conjunto
  2. Numeración automática de páginas
    1. Agregue la propiedad "número automático" en prefacio
    2. Agregar una clase CSS a soltero.html
    3. Agregar estilos CSS a estilo.css

Visión de conjunto

Cuando crea un sitio web utilizando Hugo Static Site Builder, no proporciona soporte de numeración automática listo para usar para encabezados, subtítulos y tabla de contenido en las páginas de Hugo.

Este sitio web de blog también se genera con Hugo y, con algunas modificaciones, podemos agregar soporte de numeración automática a nuestras páginas de Hugo.

Si aún no sabe qué es la numeración automática, mire los números de incremento automático antes de los títulos, subtítulos y la tabla de contenido en este artículo, es decir, 1, 2, 2.1, 2.2, 2.3, etc.

1. Overview
2. Auto-numbering Pages
    2.1. Add “autonumbering” property in front-matter
    2.2. Add CSS Class to single.html
    2.3. Add CSS Styles to style.css

Veamos cómo habilitar esta característica.

Numeración automática de páginas

Siga estos tres pasos para habilitar la función de marcación automática en su sitio de Hugo:

Agregue la propiedad "número automático" en prefacio

Vamos a agregar una propiedad personalizada autonumbering en la portada de nuestras páginas de Hugo.

Podemos habilitar o deshabilitar la numeración automática para una página específica usando esta propiedad. sí autonumbering: truesignifica que está habilitado, de lo contrario, está deshabilitado.

página-blog.md
---

...

autonumbering: true
---

Agregar una clase CSS a soltero.html

Necesitas agregar autonumbering La clase CSS en el elemento del artículo basada en la propiedad de numeración automática está habilitada o deshabilitada.

soltero.html
{{ define "main" }}
<main>
  <article class="post" {{- if .Param "autonumbering" }} autonumbering {{- end }}>
    <header>
     ...
    </header>	
     ...
    <footer>
     ...
    </footer>
  </article>
</main>
{{ end }}

Si la marcación automática está habilitada en cualquier mensaje. Se verá así:

<main>
  <article class = "post autonumbering" ></article>
</main>

Si la marcación automática está deshabilitada en cualquier mensaje. Se verá así:

<main>
  <article class = "post" ></article>
</main>

Agregar estilos CSS a estilo.css

Al final, agregue el siguiente fragmento de Estilos CSS a los archivos CSS que usaría en su proyecto:

estilos.css
/* Auto Numbering */
body {counter-reset: h2}
h2 {counter-reset: h3}
h3 {counter-reset: h4}
h4 {counter-reset: h5}

article[autonumbering] h2:before {counter-increment: h2; content: counter(h2) ". "}
article[autonumbering] h3:before {counter-increment: h3; content: counter(h2) "." counter(h3) ". "}
article[autonumbering] h4:before {counter-increment: h4; content: counter(h2) "." counter(h3) "." counter(h4) ". "}

article[autonumbering] .toc__menu ul { counter-reset: item }
article[autonumbering] .toc__menu li a:before { content: counters(item, ".") ". "; counter-increment: item }

Eso es. Ahora debería poder usar la función de numeración automática en sus páginas hugo.

Si quieres conocer otros artículos parecidos a Numeración automática de encabezados y índices en las páginas de Hugo puedes visitar la categoría Tutoriales.

Deja un comentario

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

Subir

Esta página web utiliza cookies para analizar de forma anónima y estadística el uso que haces de la web, mejorar los contenidos y tu experiencia de navegación. Para más información accede a la Política de Cookies . Ver mas