From 965af4b3dd35d1c5f24b4aa0ba847804e0d3c3da Mon Sep 17 00:00:00 2001 From: welpo Date: Sat, 12 Aug 2023 00:06:24 +0200 Subject: [PATCH] =?UTF-8?q?=E2=9C=A8=20feat:=20add=20`toc=5Flevels`=20to?= =?UTF-8?q?=20control=20ToC=20depth?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- content/blog/toc.ca.md | 24 +++++++++++++++++++++--- content/blog/toc.es.md | 24 +++++++++++++++++++++--- content/blog/toc.md | 24 +++++++++++++++++++++--- templates/macros/content.html | 5 +++-- 4 files changed, 66 insertions(+), 11 deletions(-) diff --git a/content/blog/toc.ca.md b/content/blog/toc.ca.md index 1df8aec..faefe61 100644 --- a/content/blog/toc.ca.md +++ b/content/blog/toc.ca.md @@ -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 diff --git a/content/blog/toc.es.md b/content/blog/toc.es.md index 6ad4145..31e5036 100644 --- a/content/blog/toc.es.md +++ b/content/blog/toc.es.md @@ -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 diff --git a/content/blog/toc.md b/content/blog/toc.md index 25482c9..934215f 100644 --- a/content/blog/toc.md +++ b/content/blog/toc.md @@ -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 diff --git a/templates/macros/content.html b/templates/macros/content.html index 57ba246..2facfec 100644 --- a/templates/macros/content.html +++ b/templates/macros/content.html @@ -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 %}
@@ -51,12 +52,12 @@ {% for h1 in page.toc %}
  • {{ h1.title }} - {% if h1.children %} + {% if h1.children and toc_levels > 1 %}
      {% for h2 in h1.children %}
    • {{ h2.title }} - {% if h2.children %} + {% if h2.children and toc_levels > 2 %}
        {% for h3 in h2.children %}