feat: add `toc_levels` to control ToC depth

main
welpo 2 years ago
parent bc90d04c02
commit 965af4b3dd
No known key found for this signature in database
GPG Key ID: A2F978CF4EC1F5A6

@ -1,15 +1,35 @@
+++
title = "Taula de contingut"
date = 2022-11-01
updated = 2023-08-12
description = "Una publicació que mostra la taula de contingut opcional."
[taxonomies]
tags = ["funcionalitat", "markdown"]
tags = ["funcionalitat", "markdown", "tutorial"]
[extra]
toc = true
+++
Per habilitar la taula de continguts, estableix aquesta variable a la metainformació de l'article:
```toml
[extra]
toc = true
```
També pots establir la profunditat màxima de la taula de continguts especificant la variable `toc_levels`:
```toml, hl_lines=03
[extra]
toc = true
toc_levels = 2
```
En aquest exemple, només s'inclourien els primers dos nivells de capçaleres a la taula de continguts, independentment de les seves etiquetes HTML reals (`h1`, `h2`, `h3`, etc.). Si només vols incloure el nivell principal de capçaleres, estableix `toc_max_depth = 1`. Per defecte, si no s'especifica `toc_max_depth`, la taula de continguts inclourà tres nivells de capçaleres.
Tingues en compte als teus lectors quan configures `toc_levels`. Encara que pot ser temptador incloure molts nivells per a una navegació detallada, una taula de continguts més curta i senzilla sovint és més amigable per al lector. Ajusta la profunditat segons la complexitat i longitud del teu contingut per a la millor experiència del lector.
# Capçalera 1
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris sed mollis augue, vel efficitur lacus. Pellentesque eu egestas mi. Etiam ultrices lectus sit amet aliquet ullamcorper. Praesent in erat quis est sagittis finibus. Etiam nec sapien in nulla interdum faucibus. Integer iaculis lorem quis arcu lobortis, non malesuada neque vehicula. Aenean nec tellus eu metus bibendum tempus. Sed rutrum urna ut commodo tempor. Vestibulum aliquet elit posuere turpis maximus condimentum. Sed urna libero, ornare eu tellus vitae, laoreet condimentum risus. Aenean elit lectus, mattis quis nibh nec, faucibus rutrum sapien. Sed iaculis consectetur mi, eget posuere turpis finibus et.
@ -29,8 +49,6 @@ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris sed mollis augue
#### Capçalera 4
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris sed mollis augue, vel efficitur lacus. Pellentesque eu egestas mi. Etiam ultrices lectus sit amet aliquet ullamcorper. Praesent in erat quis est sagittis finibus. Etiam nec sapien in nulla interdum faucibus. Integer iaculis lorem quis arcu lobortis, non malesuada neque vehicula. Aenean nec tellus eu metus bibendum tempus. Sed rutrum urna ut commodo tempor. Vestibulum aliquet elit posuere turpis maximus condimentum. Sed urna libero, ornare eu tellus vitae, laoreet condimentum risus. Aenean elit lectus, mattis quis nibh nec, faucibus rutrum sapien. Sed iaculis consectetur mi, eget posuere turpis finibus et.
---
## Capçalera 2
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris sed mollis augue, vel efficitur lacus. Pellentesque eu egestas mi. Etiam ultrices lectus sit amet aliquet ullamcorper. Praesent in erat quis est sagittis finibus. Etiam nec sapien in nulla interdum faucibus. Integer iaculis lorem quis arcu lobortis, non malesuada neque vehicula. Aenean nec tellus eu metus bibendum tempus. Sed rutrum urna ut commodo tempor. Vestibulum aliquet elit posuere turpis maximus condimentum. Sed urna libero, ornare eu tellus vitae, laoreet condimentum risus. Aenean elit lectus, mattis quis nibh nec, faucibus rutrum sapien. Sed iaculis consectetur mi, eget posuere turpis finibus et.
### Capçalera 3.1

@ -1,15 +1,35 @@
+++
title = "Tabla de contenido"
date = 2022-11-01
updated = 2023-08-12
description = "Una publicación que muestra la tabla de contenido opcional."
[taxonomies]
tags = ["funcionalidad", "markdown"]
tags = ["funcionalidad", "markdown", "tutorial"]
[extra]
toc = true
+++
Para habilitar la tabla de contenidos, establece esta variable en la metainformación del post:
```toml
[extra]
toc = true
```
También puedes establecer la profundidad máxima de la tabla de contenidos especificando la variable `toc_levels`:
```toml, hl_lines=03
[extra]
toc = true
toc_levels = 2
```
En este ejemplo, sólo los primeros dos niveles de encabezados se incluirían en la tabla de contenidos, independientemente de sus etiquetas HTML reales (`h1`, `h2`, `h3`, etc.). Si sólo quieres incluir el nivel principal de encabezados, establece `toc_levels = 1`. Por defecto, si no se especifica `toc_levels`, la tabla de contenidos incluirá tres niveles de encabezados.
Ten en cuenta a tus lectores al configurar `toc_levels`. Aunque puede ser tentador incluir muchos niveles anidados para una navegación detallada, una tabla de contenidos más corta y sencilla suele ser más amigable y menos abrumadora para el lector. Ajusta la profundidad según la complejidad y longitud de tu contenido para la mejor experiencia del lector.
# Encabezado 1
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris sed mollis augue, vel efficitur lacus. Pellentesque eu egestas mi. Etiam ultrices lectus sit amet aliquet ullamcorper. Praesent in erat quis est sagittis finibus. Etiam nec sapien in nulla interdum faucibus. Integer iaculis lorem quis arcu lobortis, non malesuada neque vehicula. Aenean nec tellus eu metus bibendum tempus. Sed rutrum urna ut commodo tempor. Vestibulum aliquet elit posuere turpis maximus condimentum. Sed urna libero, ornare eu tellus vitae, laoreet condimentum risus. Aenean elit lectus, mattis quis nibh nec, faucibus rutrum sapien. Sed iaculis consectetur mi, eget posuere turpis finibus et.
@ -29,8 +49,6 @@ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris sed mollis augue
#### Encabezado 4
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris sed mollis augue, vel efficitur lacus. Pellentesque eu egestas mi. Etiam ultrices lectus sit amet aliquet ullamcorper. Praesent in erat quis est sagittis finibus. Etiam nec sapien in nulla interdum faucibus. Integer iaculis lorem quis arcu lobortis, non malesuada neque vehicula. Aenean nec tellus eu metus bibendum tempus. Sed rutrum urna ut commodo tempor. Vestibulum aliquet elit posuere turpis maximus condimentum. Sed urna libero, ornare eu tellus vitae, laoreet condimentum risus. Aenean elit lectus, mattis quis nibh nec, faucibus rutrum sapien. Sed iaculis consectetur mi, eget posuere turpis finibus et.
---
## Encabezado 2
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris sed mollis augue, vel efficitur lacus. Pellentesque eu egestas mi. Etiam ultrices lectus sit amet aliquet ullamcorper. Praesent in erat quis est sagittis finibus. Etiam nec sapien in nulla interdum faucibus. Integer iaculis lorem quis arcu lobortis, non malesuada neque vehicula. Aenean nec tellus eu metus bibendum tempus. Sed rutrum urna ut commodo tempor. Vestibulum aliquet elit posuere turpis maximus condimentum. Sed urna libero, ornare eu tellus vitae, laoreet condimentum risus. Aenean elit lectus, mattis quis nibh nec, faucibus rutrum sapien. Sed iaculis consectetur mi, eget posuere turpis finibus et.
### Encabezado 3.1

@ -1,15 +1,35 @@
+++
title = "Table of Contents"
date = 2022-11-01
updated = 2023-08-12
description = "A post showcasing the optional Table of Contents."
[taxonomies]
tags = ["showcase", "markdown"]
tags = ["showcase", "markdown", "tutorial"]
[extra]
toc = true
+++
To enable the table of contents, set this variable on the post's front matter:
```toml
[extra]
toc = true
```
You can also set the maximum depth for the table of contents by specifying the `toc_levels` variable:
```toml, hl_lines=03
[extra]
toc = true
toc_levels = 2
```
In this example, only the first two levels of headers would be included in the table of contents, regardless of their actual HTML tags (`h1`, `h2`, `h3`, etc.). If you want to include only the main level of headers, set `toc_levels = 1`. By default, if `toc_levels` is not specified, the table of contents will include three levels of headers.
Keep your readers in mind when setting the `toc_levels`. While it can be tempting to include many nested levels for detailed navigation, a shorter and simpler table of contents can often be more reader-friendly and less overwhelming. Adjust the depth according to the complexity and length of your content for the best reader experience.
# Heading 1
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris sed mollis augue, vel efficitur lacus. Pellentesque eu egestas mi. Etiam ultrices lectus sit amet aliquet ullamcorper. Praesent in erat quis est sagittis finibus. Etiam nec sapien in nulla interdum faucibus. Integer iaculis lorem quis arcu lobortis, non malesuada neque vehicula. Aenean nec tellus eu metus bibendum tempus. Sed rutrum urna ut commodo tempor. Vestibulum aliquet elit posuere turpis maximus condimentum. Sed urna libero, ornare eu tellus vitae, laoreet condimentum risus. Aenean elit lectus, mattis quis nibh nec, faucibus rutrum sapien. Sed iaculis consectetur mi, eget posuere turpis finibus et.
@ -29,8 +49,6 @@ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris sed mollis augue
#### Heading 4
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris sed mollis augue, vel efficitur lacus. Pellentesque eu egestas mi. Etiam ultrices lectus sit amet aliquet ullamcorper. Praesent in erat quis est sagittis finibus. Etiam nec sapien in nulla interdum faucibus. Integer iaculis lorem quis arcu lobortis, non malesuada neque vehicula. Aenean nec tellus eu metus bibendum tempus. Sed rutrum urna ut commodo tempor. Vestibulum aliquet elit posuere turpis maximus condimentum. Sed urna libero, ornare eu tellus vitae, laoreet condimentum risus. Aenean elit lectus, mattis quis nibh nec, faucibus rutrum sapien. Sed iaculis consectetur mi, eget posuere turpis finibus et.
---
## Heading 2
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris sed mollis augue, vel efficitur lacus. Pellentesque eu egestas mi. Etiam ultrices lectus sit amet aliquet ullamcorper. Praesent in erat quis est sagittis finibus. Etiam nec sapien in nulla interdum faucibus. Integer iaculis lorem quis arcu lobortis, non malesuada neque vehicula. Aenean nec tellus eu metus bibendum tempus. Sed rutrum urna ut commodo tempor. Vestibulum aliquet elit posuere turpis maximus condimentum. Sed urna libero, ornare eu tellus vitae, laoreet condimentum risus. Aenean elit lectus, mattis quis nibh nec, faucibus rutrum sapien. Sed iaculis consectetur mi, eget posuere turpis finibus et.
### Heading 3.1

@ -43,6 +43,7 @@
{% endif %}
{# Optional table of contents #}
{% set toc_levels = page.extra.toc_levels | default(value=3) %}
{% if page.extra.toc | default(value=false) %}
{% if page.toc %}
<div class="toc-container">
@ -51,12 +52,12 @@
{% for h1 in page.toc %}
<li>
<a href="{{ h1.permalink | safe }}">{{ h1.title }}</a>
{% if h1.children %}
{% if h1.children and toc_levels > 1 %}
<ul>
{% for h2 in h1.children %}
<li>
<a href="{{ h2.permalink | safe }}">{{ h2.title }}</a>
{% if h2.children %}
{% if h2.children and toc_levels > 2 %}
<ul>
{% for h3 in h2.children %}
<li>

Loading…
Cancel
Save