tabi/es/blog/toc/index.html

<!doctype html><html lang=es><head><meta charset=UTF-8><meta content="default-src 'self';font-src 'self' data:;img-src 'self' https://* data:;media-src 'self' https://cdn.jsdelivr.net/;style-src 'self';frame-src player.vimeo.com https://www.youtube-nocookie.com;connect-src 'self' https://tabi-stats.osc.garden vhiweeypifbwacashxjz.supabase.co;script-src 'self' https://tabi-stats.osc.garden  cdn.jsdelivr.net 'self'" http-equiv=Content-Security-Policy><meta content="width=device-width,initial-scale=1.0" name=viewport><meta content=https://welpo.github.io/tabi name=base><title>
~/tabi • Tabla de contenido</title><link href=https://welpo.github.io/tabi/img/seedling.png rel=icon type=image/png><link href='data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><text y="50%" x="50%" dominant-baseline="central" text-anchor="middle" font-size="88">🌱</text></svg>' rel=icon><link title="~/tabi - Atom Feed" href=https://welpo.github.io/tabi/atom.xml rel=alternate type=application/atom+xml><link href="https://welpo.github.io/tabi/custom_subset.css?h=0b9535a28bc3d5bf2321" rel=stylesheet><link href="https://welpo.github.io/tabi/main.css?h=3716ab3457d2dd050b3c" rel=stylesheet><meta content="light dark" name=color-scheme><meta content=#087e96 name=theme-color><meta content="Una publicación que muestra la tabla de contenido opcional así como su configuración." name=description><meta content="Una publicación que muestra la tabla de contenido opcional así como su configuración." property=og:description><meta content="Tabla de contenido" property=og:title><meta content=article property=og:type><meta content="https://welpo.github.io/tabi/blog/toc/social_cards/es_blog_toc.jpg?h=4490e006c7c0270280ce" property=og:image><meta content=1400 property=og:image:width><meta content=800 property=og:image:height><meta content="https://welpo.github.io/tabi/blog/toc/social_cards/es_blog_toc.jpg?h=4490e006c7c0270280ce" name=twitter:image><meta content=summary_large_image name=twitter:card><meta content=en_GB property=og:locale:alternate><link href=https://welpo.github.io/tabi/blog/toc/ hreflang=en rel=alternate><meta content=ca_ES property=og:locale:alternate><link href=https://welpo.github.io/tabi/ca/blog/toc/ hreflang=ca rel=alternate><meta content=es_ES property=og:locale:alternate><link href=https://welpo.github.io/tabi/es/blog/toc/ hreflang=es rel=alternate><meta content=https://welpo.github.io/tabi/es/blog/toc/ property=og:url><meta content=~/tabi property=og:site_name><noscript><link href=https://welpo.github.io/tabi/no_js.css rel=stylesheet></noscript><script src=https://welpo.github.io/tabi/js/initializeTheme.min.js></script><script defer src=https://welpo.github.io/tabi/js/themeSwitcher.min.js></script><script async data-goatcounter=https://tabi-stats.osc.garden/count src=https://tabi-stats.osc.garden/count.js></script><script src="https://welpo.github.io/tabi/js/searchElasticlunr.min.js?h=3626c0ef99daa745b31e" defer></script><script defer src=https://welpo.github.io/tabi/js/lunr/lunrStemmerSupport.min.js></script><script defer src=https://welpo.github.io/tabi/js/lunr/lunr.es.min.js></script><body><a href=#main-content id=skip-link>Saltar al contenido</a><header><nav class=navbar><div class=nav-title><a class=home-title href=https://welpo.github.io/tabi/es/>~/tabi</a></div><div class=nav-navs><ul><li><a class="nav-links no-hover-padding" href=https://welpo.github.io/tabi/es/blog/>blog </a><li><a class="nav-links no-hover-padding" href=https://welpo.github.io/tabi/es/archive/>archivo </a><li><a class="nav-links no-hover-padding" href=https://welpo.github.io/tabi/es/tags/>etiquetas </a><li><a class="nav-links no-hover-padding" href=https://welpo.github.io/tabi/es/projects/>proyectos </a><li class=menu-icons-container><ul class=menu-icons-group><li class="js menu-icon"><div aria-label="Haz clic o usa $SHORTCUT para abrir la búsqueda" class="search-icon interactive-icon" title="Haz clic o usa $SHORTCUT para abrir la búsqueda" id=search-button role=button tabindex=0><svg viewbox="0 -960 960 960" xmlns=http://www.w3.org/2000/svg><path d="M784-120 532-372q-30 24-69 38t-83 14q-109 0-184.5-75.5T120-580q0-109 75.5-184.5T380-840q109 0 184.5 75.5T640-580q0 44-14 83t-38 69l252 252-56 56ZM380-400q75 0 127.5-52.5T560-580q0-75-52.5-127.5T380-760q-75 0-127.5 52.5T200-580q0 75 52.5 127.5T380-400Z"/></svg></div><li class=language-switcher><details class=dropdown><summary aria-label="Selección de idioma" title="Selección de idioma" aria-haspopup=true role=button><div class=language-switcher-icon></div></summary> <div class=dropdown-content role=menu>Español<a aria-label=English href=https://welpo.github.io/tabi/blog/toc/ lang=en role=menuitem>English</a><a aria-label=العربية href=https://welpo.github.io/tabi/ar/blog/toc/ lang=ar role=menuitem>العربية</a><a aria-label=Català href=https://welpo.github.io/tabi/ca/blog/toc/ lang=ca role=menuitem>Català</a></div></details><li class="theme-switcher-wrapper js"><div aria-label="Cambiar a modo oscuro" title="Cambiar a modo oscuro/claro" aria-pressed=false class=theme-switcher role=button tabindex=0></div><div aria-label="Restablecer modo a configuración predeterminada" class="theme-resetter arrow" title="Restablecer modo a configuración predeterminada" aria-hidden=true role=button tabindex=0></div></ul></ul></div></nav></header><div class=content id=main-content><main><article class=h-entry><h1 class="p-name article-title">Tabla de contenido</h1><a class="u-url u-uid" href=https://welpo.github.io/tabi/es/blog/toc/></a><ul class=meta><li><time class=dt-published datetime=2022-11-01>1 nov 2022</time><li title="1994 palabras"><span aria-hidden=true class=separator>•</span>10 mins de lectura<li class=tag><span aria-hidden=true class=separator>•</span>Etiquetas: <li class=tag><a class=p-category href=https://welpo.github.io/tabi/es/tags/funcionalidad/>funcionalidad</a>, <li class=tag><a class=p-category href=https://welpo.github.io/tabi/es/tags/markdown/>markdown</a>, <li class=tag><a class=p-category href=https://welpo.github.io/tabi/es/tags/tutorial/>tutorial</a></ul><ul class="meta last-updated"><li><time class=dt-updated datetime=2024-02-16>Actualizado el 16 feb 2024</time><li><span aria-hidden=true class=separator>•</span><a class=external href=https://github.com/welpo/tabi/commits/main/content/blog/toc/index.es.md>Ver cambios</a></ul><div class=toc-container><h3>Tabla de contenido</h3><ul><li><a href=https://welpo.github.io/tabi/es/blog/toc/#documentacion>Documentación</a> <ul><li><a href=https://welpo.github.io/tabi/es/blog/toc/#habilitando-y-posicionando-la-tabla-de-contenido>Habilitando (y posicionando) la Tabla de Contenido</a><li><a href=https://welpo.github.io/tabi/es/blog/toc/#estableciendo-la-profundidad-maxima>Estableciendo la profundidad máxima</a><li><a href=https://welpo.github.io/tabi/es/blog/toc/#ocultando-encabezados-de-la-tdc>Ocultando encabezados de la TdC</a></ul><li><a href=https://welpo.github.io/tabi/es/blog/toc/#encabezado-1>Encabezado 1</a> <ul><li><a href=https://welpo.github.io/tabi/es/blog/toc/#encabezado-2>Encabezado 2</a> <ul><li><a href=https://welpo.github.io/tabi/es/blog/toc/#encabezado-3-1>Encabezado 3.1</a><li><a href=https://welpo.github.io/tabi/es/blog/toc/#encabezado-3-2>Encabezado 3.2</a></ul><li><a href=https://welpo.github.io/tabi/es/blog/toc/#encabezado-2-1>Encabezado 2</a> <ul><li><a href=https://welpo.github.io/tabi/es/blog/toc/#encabezado-3-1-1>Encabezado 3.1</a><li><a href=https://welpo.github.io/tabi/es/blog/toc/#encabezado-3-2-1>Encabezado 3.2</a></ul></ul></ul></div><p class=p-summary hidden>Una publicación que muestra la tabla de contenido opcional así como su configuración.<section class="e-content body"><h2 id=documentacion><a aria-label="Anchor link for: documentacion" class="header-anchor no-hover-padding" href=#documentacion><span aria-hidden=true class=link-icon></span></a> Documentación</h2><h3 id=habilitando-y-posicionando-la-tabla-de-contenido><a aria-label="Anchor link for: habilitando-y-posicionando-la-tabla-de-contenido" class="header-anchor no-hover-padding" href=#habilitando-y-posicionando-la-tabla-de-contenido><span aria-hidden=true class=link-icon></span></a> Habilitando (y posicionando) la Tabla de Contenido</h3><p>Hay dos formas de habilitar la Tabla de Contenido (TdC). Si quieres que esté justo debajo del encabezado (como en esta página), configura esta variable en el front matter de tu post:<pre class="language-toml z-code" data-lang=toml><code class=language-toml data-lang=toml><span class="z-source z-toml"><span class="z-punctuation z-definition z-table z-begin z-toml">[</span><span class="z-meta z-tag z-table z-toml"><span class="z-entity z-name z-table z-toml">extra</span></span><span class="z-punctuation z-definition z-table z-end z-toml">]</span>
</span><span class="z-source z-toml"><span class="z-meta z-tag z-key z-toml"><span class="z-entity z-name z-tag z-toml">toc</span></span> <span class="z-punctuation z-definition z-key-value z-toml">=</span> <span class="z-constant z-language z-toml">true</span>
</span></code></pre><p>Si prefieres situar la TdC en otro lugar de tu post (por ejemplo, después de una introducción), puedes hacerlo añadiendo una línea con este contenido ahí donde quieras que aparezca la TdC:<pre class="language-markdown z-code" data-lang=markdown><code class=language-markdown data-lang=markdown><span class="z-text z-html z-markdown"><span class="z-meta z-disable-markdown"><span class="z-comment z-block z-html"><span class="z-punctuation z-definition z-comment z-begin z-html">&lt;!--</span> toc <span class="z-punctuation z-definition z-comment z-end z-html">--></span></span></span><span class="z-meta z-disable-markdown">
</span></span></code></pre><p>También puedes usar el shortcode <code>{{ toc() }}</code>, que simplemente insertará ese texto por ti (<a class=external href=https://github.com/getzola/zola/issues/584#issuecomment-1546086781>idea de Michael Clayton</a>).<p>Este método renderizará la TdC sin el encabezado “Tabla de contenido”. Esto te permite usar un encabezado diferente (o ninguno) para la TdC, o incluso ocultarla de forma predeterminada:<details><summary>TdC oculta</summary> <div class=toc-container><ul><li><a href=https://welpo.github.io/tabi/es/blog/toc/#documentacion>Documentación</a> <ul><li><a href=https://welpo.github.io/tabi/es/blog/toc/#habilitando-y-posicionando-la-tabla-de-contenido>Habilitando (y posicionando) la Tabla de Contenido</a><li><a href=https://welpo.github.io/tabi/es/blog/toc/#estableciendo-la-profundidad-maxima>Estableciendo la profundidad máxima</a><li><a href=https://welpo.github.io/tabi/es/blog/toc/#ocultando-encabezados-de-la-tdc>Ocultando encabezados de la TdC</a></ul><li><a href=https://welpo.github.io/tabi/es/blog/toc/#encabezado-1>Encabezado 1</a> <ul><li><a href=https://welpo.github.io/tabi/es/blog/toc/#encabezado-2>Encabezado 2</a> <ul><li><a href=https://welpo.github.io/tabi/es/blog/toc/#encabezado-3-1>Encabezado 3.1</a><li><a href=https://welpo.github.io/tabi/es/blog/toc/#encabezado-3-2>Encabezado 3.2</a></ul><li><a href=https://welpo.github.io/tabi/es/blog/toc/#encabezado-2-1>Encabezado 2</a> <ul><li><a href=https://welpo.github.io/tabi/es/blog/toc/#encabezado-3-1-1>Encabezado 3.1</a><li><a href=https://welpo.github.io/tabi/es/blog/toc/#encabezado-3-2-1>Encabezado 3.2</a></ul></ul></ul></div></details><p>El código para lograr esto:<pre class="language-markdown z-code" data-lang=markdown><code class=language-markdown data-lang=markdown><span class="z-text z-html z-markdown"><span class="z-meta z-disable-markdown"><span class="z-meta z-tag z-inline z-any z-html"><span class="z-punctuation z-definition z-tag z-begin z-html">&lt;</span><span class="z-entity z-name z-tag z-inline z-any z-html">details</span><span class="z-punctuation z-definition z-tag z-end z-html">></span></span>
</span></span><span class="z-text z-html z-markdown"><span class="z-meta z-disable-markdown">    <span class="z-meta z-tag z-inline z-any z-html"><span class="z-punctuation z-definition z-tag z-begin z-html">&lt;</span><span class="z-entity z-name z-tag z-inline z-any z-html">summary</span><span class="z-punctuation z-definition z-tag z-end z-html">></span></span>TdC oculta<span class="z-meta z-tag z-inline z-any z-html"><span class="z-punctuation z-definition z-tag z-begin z-html">&lt;/</span><span class="z-entity z-name z-tag z-inline z-any z-html">summary</span><span class="z-punctuation z-definition z-tag z-end z-html">></span></span>
</span></span><span class="z-text z-html z-markdown"><span class="z-meta z-disable-markdown">    <span class="z-comment z-block z-html"><span class="z-punctuation z-definition z-comment z-begin z-html">&lt;!--</span> toc <span class="z-punctuation z-definition z-comment z-end z-html">--></span></span>
</span></span><span class="z-text z-html z-markdown"><span class="z-meta z-disable-markdown"><span class="z-meta z-tag z-inline z-any z-html"><span class="z-punctuation z-definition z-tag z-begin z-html">&lt;/</span><span class="z-entity z-name z-tag z-inline z-any z-html">details</span><span class="z-punctuation z-definition z-tag z-end z-html">></span></span>
</span></span></code></pre><p><em>Nota</em>: Si activas la TdC a través de <code>toc = true</code> y además añades <code>&lt;!-- toc --></code> en algún lugar de tu texto, obtendrás múltiples TdCs.<p>Si colocas la TdC en algún lugar distinto al predeterminado y le añades un encabezado, seguramente quieras ocultar dicho encabezado de la TdC (consulta la <a href=https://welpo.github.io/tabi/es/blog/toc/#ocultando-encabezados-de-la-tdc>sección para ocultar encabezados</a>). Puedes lograrlo así:<pre class="language-markdown z-code" data-lang=markdown><code class=language-markdown data-lang=markdown><span class="z-text z-html z-markdown"><span class="z-meta z-paragraph z-markdown">+++
</span></span><span class="z-text z-html z-markdown"><span class="z-meta z-paragraph z-markdown">title = "El título de tu post"
</span></span><span class="z-text z-html z-markdown"><span class="z-meta z-paragraph z-markdown">date = 2034-01-11
</span></span><span class="z-text z-html z-markdown"><span class="z-meta z-paragraph z-markdown">
</span></span><span class="z-text z-html z-markdown"><span class="z-meta z-paragraph z-markdown">[extra]
</span></span><mark><span class="z-text z-html z-markdown"><span class="z-meta z-paragraph z-markdown">toc_ignore_pattern = "^(Tabla de contenido)"
</span></span></mark><span class="z-text z-html z-markdown"><span class="z-meta z-paragraph z-markdown">+++
</span></span><span class="z-text z-html z-markdown"><span class="z-meta z-paragraph z-markdown">
</span></span><span class="z-text z-html z-markdown"><span class="z-meta z-paragraph z-markdown">Aquí va algún texto introductorio.
</span></span><span class="z-text z-html z-markdown"><span class="z-meta z-paragraph z-markdown">
</span></span><mark><span class="z-text z-html z-markdown"><span class="z-meta z-block-level z-markdown"><span class="z-markup z-heading z-markdown"><span class="z-punctuation z-definition z-heading z-begin z-markdown">###</span> </span><span class="z-markup z-heading z-markdown"><span class="z-entity z-name z-section z-markdown">Tabla de contenido</span><span class="z-meta z-whitespace z-newline z-markdown">
</span></span></span></span></mark><mark><span class="z-text z-html z-markdown">
</span></mark><mark><span class="z-text z-html z-markdown"><span class="z-meta z-disable-markdown"><span class="z-comment z-block z-html"><span class="z-punctuation z-definition z-comment z-begin z-html">&lt;!--</span> toc <span class="z-punctuation z-definition z-comment z-end z-html">--></span></span></span><span class="z-meta z-disable-markdown">
</span></span></mark><span class="z-text z-html z-markdown">
</span><span class="z-text z-html z-markdown"><span class="z-meta z-block-level z-markdown"><span class="z-markup z-heading z-2 z-markdown"><span class="z-punctuation z-definition z-heading z-begin z-markdown">##</span> </span><span class="z-markup z-heading z-2 z-markdown"><span class="z-entity z-name z-section z-markdown">Primer encabezado de contenido</span><span class="z-meta z-whitespace z-newline z-markdown">
</span></span></span></span></code></pre><h3 id=estableciendo-la-profundidad-maxima><a aria-label="Anchor link for: estableciendo-la-profundidad-maxima" class="header-anchor no-hover-padding" href=#estableciendo-la-profundidad-maxima><span aria-hidden=true class=link-icon></span></a> Estableciendo la profundidad máxima</h3><p>Puedes establecer la profundidad máxima para la TdC especificando la variable <code>toc_levels</code>, que acepta un número entero entre 1 y 4:<pre class="language-toml z-code" data-lang=toml><code class=language-toml data-lang=toml><span class="z-source z-toml"><span class="z-punctuation z-definition z-table z-begin z-toml">[</span><span class="z-meta z-tag z-table z-toml"><span class="z-entity z-name z-table z-toml">extra</span></span><span class="z-punctuation z-definition z-table z-end z-toml">]</span>
</span><span class="z-source z-toml"><span class="z-meta z-tag z-key z-toml"><span class="z-entity z-name z-tag z-toml">toc_levels</span></span> <span class="z-punctuation z-definition z-key-value z-toml">=</span> <span class="z-constant z-numeric z-integer z-toml">2</span>
</span></code></pre><p>En este ejemplo, sólo los dos primeros niveles de encabezados se incluirían en la TdC, independientemente de sus etiquetas HTML reales (<code>h1</code>, <code>h2</code>, <code>h3</code>, etc.). Si quieres incluir sólo el nivel principal de encabezados, establece <code>toc_levels = 1</code>. El valor predeterminado de <code>toc_levels</code> es <code>3</code>.<p>Ten en cuenta a tus lectores al establecer <code>toc_levels</code>. Aunque puede ser tentador incluir muchos niveles anidados para una navegación detallada, una TdC más corta y sencilla suele ser más amigable y menos abrumadora.<h3 id=ocultando-encabezados-de-la-tdc><a aria-label="Anchor link for: ocultando-encabezados-de-la-tdc" class="header-anchor no-hover-padding" href=#ocultando-encabezados-de-la-tdc><span aria-hidden=true class=link-icon></span></a> Ocultando encabezados de la TdC</h3><p>Es posible que quieras ocultar ciertos encabezados. Por ejemplo, si tu artículo tiene muchas Figuras o Tablas, éstas podrían saturar la TdC. Puedes ocultar encabezados específicos en la TdC configurando la variable <code>toc_ignore_pattern</code> en la sección <code>[extra]</code> del front matter de tu post.<p>Esta variable espera una expresión regular (regex), ya que utiliza el test <a class=external href=https://keats.github.io/tera/docs/#matching>matching</a> de Tera. El <code>toc_ignore_pattern</code> se prueba contra el texto del encabezado. Por ejemplo, para el encabezado <code>### Lectura adicional</code>, sólo el texto <code>Lectura adicional</code> se usaría para comprobar si concuerda con el patrón.<p>Aquí tienes algunos valores de ejemplo para <code>toc_ignore_pattern</code> junto con los encabezados que ocultarían:<table><thead><tr><th><code>toc_ignore_pattern</code><th>Excluye encabezados que…<tbody><tr><td><code>Tabla</code><td>contengan “Tabla”<tr><td><code>^Figura</code><td>empiecen por “Figura”<tr><td><code>(?i)(tabla|figura)</code><td>empiecen por “Tabla” o “Figura” (insensible a mayúsculas/minúsculas)<tr><td><code>\[Borrador\]$</code><td>terminen con “[Borrador]”.</table><p>Puedes probar tu expresión regular en plataformas como <a class=external href=https://regex101.com/r/2dI7U2/1>regex101</a> para asegurarte de que funciona como esperas.<p><em>Nota</em>: Las capacidades de “look-around”, incluyendo look-ahead y look-behind, no están soportadas.<h1 id=encabezado-1><a aria-label="Anchor link for: encabezado-1" class="header-anchor no-hover-padding" href=#encabezado-1><span aria-hidden=true class=link-icon></span></a> Encabezado 1</h1><p>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.<h2 id=encabezado-2><a aria-label="Anchor link for: encabezado-2" class="header-anchor no-hover-padding" href=#encabezado-2><span aria-hidden=true class=link-icon></span></a> Encabezado 2</h2><p>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.<h3 id=encabezado-3-1><a aria-label="Anchor link for: encabezado-3-1" class="header-anchor no-hover-padding" href=#encabezado-3-1><span aria-hidden=true class=link-icon></span></a> Encabezado 3.1</h3><p>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.<h4 id=encabezado-4-1><a aria-label="Anchor link for: encabezado-4-1" class="header-anchor no-hover-padding" href=#encabezado-4-1><span aria-hidden=true class=link-icon></span></a> Encabezado 4.1</h4><p>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.<h4 id=encabezado-4-2><a aria-label="Anchor link for: encabezado-4-2" class="header-anchor no-hover-padding" href=#encabezado-4-2><span aria-hidden=true class=link-icon></span></a> Encabezado 4.2</h4><p>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.<h3 id=encabezado-3-2><a aria-label="Anchor link for: encabezado-3-2" class="header-anchor no-hover-padding" href=#encabezado-3-2><span aria-hidden=true class=link-icon></span></a> Encabezado 3.2</h3><p>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.<h4 id=encabezado-4><a aria-label="Anchor link for: encabezado-4" class="header-anchor no-hover-padding" href=#encabezado-4><span aria-hidden=true class=link-icon></span></a> Encabezado 4</h4><p>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.<h4 id=encabezado-4-3><a aria-label="Anchor link for: encabezado-4-3" class="header-anchor no-hover-padding" href=#encabezado-4-3><span aria-hidden=true class=link-icon></span></a> Encabezado 4</h4><p>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.<h2 id=encabezado-2-1><a aria-label="Anchor link for: encabezado-2-1" class="header-anchor no-hover-padding" href=#encabezado-2-1><span aria-hidden=true class=link-icon></span></a> Encabezado 2</h2><p>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.<h3 id=encabezado-3-1-1><a aria-label="Anchor link for: encabezado-3-1-1" class="header-anchor no-hover-padding" href=#encabezado-3-1-1><span aria-hidden=true class=link-icon></span></a> Encabezado 3.1</h3><p>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.<h4 id=encabezado-4-1-1><a aria-label="Anchor link for: encabezado-4-1-1" class="header-anchor no-hover-padding" href=#encabezado-4-1-1><span aria-hidden=true class=link-icon></span></a> Encabezado 4.1</h4><p>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.<h4 id=encabezado-4-2-1><a aria-label="Anchor link for: encabezado-4-2-1" class="header-anchor no-hover-padding" href=#encabezado-4-2-1><span aria-hidden=true class=link-icon></span></a> Encabezado 4.2</h4><p>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.<h3 id=encabezado-3-2-1><a aria-label="Anchor link for: encabezado-3-2-1" class="header-anchor no-hover-padding" href=#encabezado-3-2-1><span aria-hidden=true class=link-icon></span></a> Encabezado 3.2</h3><p>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.<h4 id=encabezado-4-1-2><a aria-label="Anchor link for: encabezado-4-1-2" class="header-anchor no-hover-padding" href=#encabezado-4-1-2><span aria-hidden=true class=link-icon></span></a> Encabezado 4.1</h4><p>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.<h4 id=encabezado-4-1-3><a aria-label="Anchor link for: encabezado-4-1-3" class="header-anchor no-hover-padding" href=#encabezado-4-1-3><span aria-hidden=true class=link-icon></span></a> Encabezado 4.1</h4><p>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.</section><form action="https://vhiweeypifbwacashxjz.supabase.co/rest/v1/rpc/increment_hits?apikey=sb_publishable_EoB7MFJhCmb6PiAk-GPJ4w_PGhQ44Ru" class=iine-form method=post><input name=page_slug type=hidden value=/blog/toc/><button aria-label="Me gusta esta publicación" title="Me gusta esta publicación" class=iine-button data-icon=thumbs_up data-slug=/blog/toc/>👍</button></form><nav class="full-width article-navigation"><div><a aria-describedby=left_title aria-label=Siguiente href=https://welpo.github.io/tabi/es/blog/javascript/><span class=arrow>←</span> Siguiente</a><p aria-hidden=true id=left_title>Sin JavaScript obligatorio</div><div></div></nav></article></main><div id=button-container><div id=toc-floating-container><input class=toggle id=toc-toggle type=checkbox><label class=overlay for=toc-toggle></label><label title="Mostrar/ocultar la tabla de contenidos" class=button for=toc-toggle id=toc-button><svg viewbox="0 -960 960 960" xmlns=http://www.w3.org/2000/svg><path d="M414.82-193.094q-18.044 0-30.497-12.32-12.453-12.319-12.453-30.036t12.453-30.086q12.453-12.37 30.497-12.37h392.767q17.237 0 29.927 12.487 12.69 12.486 12.69 30.203 0 17.716-12.69 29.919t-29.927 12.203H414.82Zm0-244.833q-18.044 0-30.497-12.487Q371.87-462.9 371.87-480.45t12.453-29.92q12.453-12.369 30.497-12.369h392.767q17.237 0 29.927 12.511 12.69 12.512 12.69 29.845 0 17.716-12.69 30.086-12.69 12.37-29.927 12.37H414.82Zm0-245.167q-18.044 0-30.497-12.32t-12.453-30.037q0-17.716 12.453-30.086 12.453-12.369 30.497-12.369h392.767q17.237 0 29.927 12.486 12.69 12.487 12.69 30.203 0 17.717-12.69 29.92-12.69 12.203-29.927 12.203H414.82ZM189.379-156.681q-32.652 0-55.878-22.829t-23.226-55.731q0-32.549 23.15-55.647 23.151-23.097 55.95-23.097 32.799 0 55.313 23.484 22.515 23.484 22.515 56.246 0 32.212-22.861 54.893-22.861 22.681-54.963 22.681Zm0-245.167q-32.652 0-55.878-23.134-23.226-23.135-23.226-55.623 0-32.487 23.467-55.517t56.12-23.03q32.102 0 54.721 23.288 22.62 23.288 22.62 55.775 0 32.488-22.861 55.364-22.861 22.877-54.963 22.877Zm-.82-244.833q-32.224 0-55.254-23.288-23.03-23.289-23.03-55.623 0-32.333 23.271-55.364 23.272-23.03 55.495-23.03 32.224 0 55.193 23.288 22.969 23.289 22.969 55.622 0 32.334-23.21 55.364-23.21 23.031-55.434 23.031Z"/></svg></label><div class=toc-content><div class=toc-container><ul><li><a href=https://welpo.github.io/tabi/es/blog/toc/#documentacion>Documentación</a> <ul><li><a href=https://welpo.github.io/tabi/es/blog/toc/#habilitando-y-posicionando-la-tabla-de-contenido>Habilitando (y posicionando) la Tabla de Contenido</a><li><a href=https://welpo.github.io/tabi/es/blog/toc/#estableciendo-la-profundidad-maxima>Estableciendo la profundidad máxima</a><li><a href=https://welpo.github.io/tabi/es/blog/toc/#ocultando-encabezados-de-la-tdc>Ocultando encabezados de la TdC</a></ul><li><a href=https://welpo.github.io/tabi/es/blog/toc/#encabezado-1>Encabezado 1</a> <ul><li><a href=https://welpo.github.io/tabi/es/blog/toc/#encabezado-2>Encabezado 2</a> <ul><li><a href=https://welpo.github.io/tabi/es/blog/toc/#encabezado-3-1>Encabezado 3.1</a><li><a href=https://welpo.github.io/tabi/es/blog/toc/#encabezado-3-2>Encabezado 3.2</a></ul><li><a href=https://welpo.github.io/tabi/es/blog/toc/#encabezado-2-1>Encabezado 2</a> <ul><li><a href=https://welpo.github.io/tabi/es/blog/toc/#encabezado-3-1-1>Encabezado 3.1</a><li><a href=https://welpo.github.io/tabi/es/blog/toc/#encabezado-3-2-1>Encabezado 3.2</a></ul></ul></ul></div></div></div><a title="Ir al inicio de la página" class=no-hover-padding href=# id=top-button> <svg viewbox="0 0 20 20" fill=currentColor><path d="M3.293 9.707a1 1 0 010-1.414l6-6a1 1 0 011.414 0l6 6a1 1 0 01-1.414 1.414L11 5.414V17a1 1 0 11-2 0V5.414L4.707 9.707a1 1 0 01-1.414 0z"/></svg> </a></div><span class=hidden id=copy-success> Copiado! </span><span class=hidden id=copy-init> Copiar código al portapapeles </span><script defer src=https://welpo.github.io/tabi/js/copyCodeToClipboard.min.js></script><script defer src=https://cdn.jsdelivr.net/gh/welpo/iine@main/iine.mini.js></script></div><footer><section><nav class="socials nav-navs"><ul><li><a class="nav-links no-hover-padding social" href=https://welpo.github.io/tabi/es/atom.xml> <img alt=feed loading=lazy src=https://welpo.github.io/tabi/social_icons/rss.svg title=feed> </a><li class=js><a class="nav-links no-hover-padding social" data-encoded-email=dGFiaUBvc2MuZ2FyZGVu href=#><img alt=email loading=lazy src=https://welpo.github.io/tabi/social_icons/email.svg title=email> </a><li><a class="nav-links no-hover-padding social" rel=" me" href=https://github.com/welpo/> <img alt=github loading=lazy src=https://welpo.github.io/tabi/social_icons/github.svg title=github> </a><li><a class="nav-links no-hover-padding social" rel=" me" href=https://soundcloud.com/oskerwyld> <img alt=soundcloud loading=lazy src=https://welpo.github.io/tabi/social_icons/soundcloud.svg title=soundcloud> </a><li><a class="nav-links no-hover-padding social" rel=" me" href=https://instagram.com/oskerwyld> <img alt=instagram loading=lazy src=https://welpo.github.io/tabi/social_icons/instagram.svg title=instagram> </a><li><a class="nav-links no-hover-padding social" rel=" me" href=https://youtube.com/@oskerwyld> <img alt=youtube loading=lazy src=https://welpo.github.io/tabi/social_icons/youtube.svg title=youtube> </a><li><a class="nav-links no-hover-padding social" rel=" me" href=https://open.spotify.com/artist/5Hv2bYBhMp1lUHFri06xkE> <img alt=spotify loading=lazy src=https://welpo.github.io/tabi/social_icons/spotify.svg title=spotify> </a></ul></nav><nav class=nav-navs><small> <ul><li><a class="nav-links no-hover-padding" href=https://welpo.github.io/tabi/es/about/> sobre mí </a><li><a class="nav-links no-hover-padding" href=https://welpo.github.io/tabi/es/privacy/> política de privacidad </a><li><a class="nav-links no-hover-padding" href=https://tabi-stats.osc.garden/> estadísticas del sitio </a><li><a class="nav-links no-hover-padding" href=https://welpo.github.io/tabi/sitemap.xml> mapa del sitio </a></ul> </small></nav><div class=credits><small> Impulsado por <a href=https://www.getzola.org>Zola</a> y <a href=https://github.com/welpo/tabi>tabi</a> • <a href=https://github.com/welpo/tabi> Código del sitio </a></small></div></section><script async src=https://welpo.github.io/tabi/js/decodeMail.min.js></script><div class="search-modal js" aria-labelledby=modalTitle id=searchModal role=dialog><h1 class=visually-hidden id=modalTitle>Buscar</h1><div id=modal-content><div id=searchBar><div aria-hidden=true class=search-icon><svg viewbox="0 -960 960 960" xmlns=http://www.w3.org/2000/svg><path d="M784-120 532-372q-30 24-69 38t-83 14q-109 0-184.5-75.5T120-580q0-109 75.5-184.5T380-840q109 0 184.5 75.5T640-580q0 44-14 83t-38 69l252 252-56 56ZM380-400q75 0 127.5-52.5T560-580q0-75-52.5-127.5T380-760q-75 0-127.5 52.5T200-580q0 75 52.5 127.5T380-400Z"/></svg></div><input aria-controls=results-container aria-expanded=false autocomplete=off id=searchInput placeholder=Buscar… role=combobox spellcheck=false><div class="close-icon interactive-icon" title="Borrar búsqueda" id=clear-search role=button tabindex=0><svg viewbox="0 -960 960 960" xmlns=http://www.w3.org/2000/svg><path d="m256-200-56-56 224-224-224-224 56-56 224 224 224-224 56 56-224 224 224 224-56 56-224-224-224 224Z"/></svg></div></div><div id=results-container><div id=results-info><span id=zero_results> No hay resultados</span><span id=one_results> $NUMBER resultado</span><span id=many_results> $NUMBER resultados</span><span id=two_results> $NUMBER resultados</span><span id=few_results> $NUMBER resultados</span></div><div id=results role=listbox></div></div></div></div></footer>