mirror of
https://github.com/welpo/tabi.git
synced 2025-11-05 18:40:24 +01:00
26 lines
No EOL
38 KiB
HTML
26 lines
No EOL
38 KiB
HTML
<!doctype html><html lang=ca><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 • Taula de contingut</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ó que mostra la taula de contingut opcional i la seva configuració." name=description><meta content="Una publicació que mostra la taula de contingut opcional i la seva configuració." property=og:description><meta content="Taula de contingut" property=og:title><meta content=article property=og:type><meta content="https://welpo.github.io/tabi/blog/toc/social_cards/ca_blog_toc.jpg?h=4fd87afeb0da8ce2505e" 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/ca_blog_toc.jpg?h=4fd87afeb0da8ce2505e" name=twitter:image><meta content=summary_large_image name=twitter:card><meta content=es_ES property=og:locale:alternate><link href=https://welpo.github.io/tabi/es/blog/toc/ hreflang=es 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=en_GB property=og:locale:alternate><link href=https://welpo.github.io/tabi/blog/toc/ hreflang=en rel=alternate><meta content=https://welpo.github.io/tabi/ca/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><body><a href=#main-content id=skip-link>Saltar al contingut</a><header><nav class=navbar><div class=nav-title><a class=home-title href=https://welpo.github.io/tabi/ca/>~/tabi</a></div><div class=nav-navs><ul><li><a class="nav-links no-hover-padding" href=https://welpo.github.io/tabi/ca/blog/>blog </a><li><a class="nav-links no-hover-padding" href=https://welpo.github.io/tabi/ca/archive/>arxiu </a><li><a class="nav-links no-hover-padding" href=https://welpo.github.io/tabi/ca/tags/>etiquetes </a><li><a class="nav-links no-hover-padding" href=https://welpo.github.io/tabi/ca/projects/>projectes </a><li class=menu-icons-container><ul class=menu-icons-group><li class=language-switcher><details class=dropdown><summary aria-label="Selecció d'idioma" title="Selecció d'idioma" aria-haspopup=true role=button><div class=language-switcher-icon></div></summary> <div class=dropdown-content role=menu>Català<a aria-label=English href=https://welpo.github.io/tabi/blog/toc/ lang=en role=menuitem>English</a><a aria-label=Español href=https://welpo.github.io/tabi/es/blog/toc/ lang=es role=menuitem>Español</a><a aria-label=العربية href=https://welpo.github.io/tabi/ar/blog/toc/ lang=ar role=menuitem>العربية</a></div></details><li class="theme-switcher-wrapper js"><div aria-label="Canvia el mode obscur" title="Canvia el mode obscur/clar" aria-pressed=false class=theme-switcher role=button tabindex=0></div><div aria-label="Restableix el mode al valor predeterminat" class="theme-resetter arrow" title="Restableix el mode al valor predeterminat" 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">Taula de contingut</h1><a class="u-url u-uid" href=https://welpo.github.io/tabi/ca/blog/toc/></a><ul class=meta><li><time class=dt-published datetime=2022-11-01>1 de nov. 2022</time><li title="1998 paraules"><span aria-hidden=true class=separator>•</span>10 mins de lectura<li class=tag><span aria-hidden=true class=separator>•</span>Etiquetes: <li class=tag><a class=p-category href=https://welpo.github.io/tabi/ca/tags/funcionalitat/>funcionalitat</a>, <li class=tag><a class=p-category href=https://welpo.github.io/tabi/ca/tags/markdown/>markdown</a>, <li class=tag><a class=p-category href=https://welpo.github.io/tabi/ca/tags/tutorial/>tutorial</a></ul><ul class="meta last-updated"><li><time class=dt-updated datetime=2024-02-16>Actualitzat el 16 de febr. 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.ca.md>Veure canvis</a></ul><div class=toc-container><h3>Taula de contingut</h3><ul><li><a href=https://welpo.github.io/tabi/ca/blog/toc/#documentacio>Documentació</a> <ul><li><a href=https://welpo.github.io/tabi/ca/blog/toc/#habilitant-i-posicionant-la-taula-de-contingut>Habilitant (i posicionant) la Taula de Contingut</a><li><a href=https://welpo.github.io/tabi/ca/blog/toc/#establint-la-profunditat-maxima>Establint la profunditat màxima</a><li><a href=https://welpo.github.io/tabi/ca/blog/toc/#ocultant-capcaleres-de-la-tdc>Ocultant capçaleres de la TdC</a></ul><li><a href=https://welpo.github.io/tabi/ca/blog/toc/#capcalera-1>Capçalera 1</a> <ul><li><a href=https://welpo.github.io/tabi/ca/blog/toc/#capcalera-2>Capçalera 2</a> <ul><li><a href=https://welpo.github.io/tabi/ca/blog/toc/#capcalera-3-1>Capçalera 3.1</a><li><a href=https://welpo.github.io/tabi/ca/blog/toc/#capcalera-3-2>Capçalera 3.2</a></ul><li><a href=https://welpo.github.io/tabi/ca/blog/toc/#capcalera-2-1>Capçalera 2</a> <ul><li><a href=https://welpo.github.io/tabi/ca/blog/toc/#capcalera-3-1-1>Capçalera 3.1</a><li><a href=https://welpo.github.io/tabi/ca/blog/toc/#capcalera-3-2-1>Capçalera 3.2</a></ul></ul></ul></div><p class=p-summary hidden>Una publicació que mostra la taula de contingut opcional i la seva configuració.<section class="e-content body"><h2 id=documentacio><a aria-label="Anchor link for: documentacio" class="header-anchor no-hover-padding" href=#documentacio><span aria-hidden=true class=link-icon></span></a> Documentació</h2><h3 id=habilitant-i-posicionant-la-taula-de-contingut><a aria-label="Anchor link for: habilitant-i-posicionant-la-taula-de-contingut" class="header-anchor no-hover-padding" href=#habilitant-i-posicionant-la-taula-de-contingut><span aria-hidden=true class=link-icon></span></a> Habilitant (i posicionant) la Taula de Contingut</h3><p>Hi ha dues formes d’habilitar la Taula de Contingut (TdC). Si vols que estigui just a sota del capçalera (com en aquesta pàgina), configura aquesta variable en el front matter del teu 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 prefereixes col·locar la TdC a un altre lloc (per exemple, després d’una introducció), pots fer-ho afegint una línia amb aquest contingut allà on vulguis que aparegui 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"><!--</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>També pots utilitzar el shortcode <code>{{ toc() }}</code>, que simplement inserirà aquest text per tu (<a class=external href=https://github.com/getzola/zola/issues/584#issuecomment-1546086781>idea de Michael Clayton</a>).<p>Aquest mètode renderitzarà la TdC sense el capçalera “Taula de Contingut”. Això et permet utilitzar un capçalera diferent (o cap) per la TdC, o fins i tot ocultar-la de forma predeterminada:<details><summary>TdC oculta</summary> <div class=toc-container><ul><li><a href=https://welpo.github.io/tabi/ca/blog/toc/#documentacio>Documentació</a> <ul><li><a href=https://welpo.github.io/tabi/ca/blog/toc/#habilitant-i-posicionant-la-taula-de-contingut>Habilitant (i posicionant) la Taula de Contingut</a><li><a href=https://welpo.github.io/tabi/ca/blog/toc/#establint-la-profunditat-maxima>Establint la profunditat màxima</a><li><a href=https://welpo.github.io/tabi/ca/blog/toc/#ocultant-capcaleres-de-la-tdc>Ocultant capçaleres de la TdC</a></ul><li><a href=https://welpo.github.io/tabi/ca/blog/toc/#capcalera-1>Capçalera 1</a> <ul><li><a href=https://welpo.github.io/tabi/ca/blog/toc/#capcalera-2>Capçalera 2</a> <ul><li><a href=https://welpo.github.io/tabi/ca/blog/toc/#capcalera-3-1>Capçalera 3.1</a><li><a href=https://welpo.github.io/tabi/ca/blog/toc/#capcalera-3-2>Capçalera 3.2</a></ul><li><a href=https://welpo.github.io/tabi/ca/blog/toc/#capcalera-2-1>Capçalera 2</a> <ul><li><a href=https://welpo.github.io/tabi/ca/blog/toc/#capcalera-3-1-1>Capçalera 3.1</a><li><a href=https://welpo.github.io/tabi/ca/blog/toc/#capcalera-3-2-1>Capçalera 3.2</a></ul></ul></ul></div></details><p>El codi per aconseguir-ho:<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"><</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"><</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"></</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"><!--</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"></</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 actives la TdC amb <code>toc = true</code> i també afegeixes <code><!-- toc --></code> en algun lloc del teu text, obtindràs múltiples TdCs.<p>Si col·loques la TdC en un lloc diferent del predeterminat i li afegeixes un capçalera, segurament voldràs ocultar aquest capçalera de la TdC (consulta la <a href=https://welpo.github.io/tabi/ca/blog/toc/#ocultant-capcaleres-de-la-tdc>secció per ocultar capçaleres</a>). Pots fer-ho així:<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ítol del teu 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 = "^(Taula de contingut)"
|
||
</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 algun text introductori.
|
||
</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">Taula de contingut</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"><!--</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 encapçalament de contingut</span><span class="z-meta z-whitespace z-newline z-markdown">
|
||
</span></span></span></span></code></pre><h3 id=establint-la-profunditat-maxima><a aria-label="Anchor link for: establint-la-profunditat-maxima" class="header-anchor no-hover-padding" href=#establint-la-profunditat-maxima><span aria-hidden=true class=link-icon></span></a> Establint la profunditat màxima</h3><p>Pots establir la profunditat màxima per la TdC especificant la variable <code>toc_levels</code>, que accepta un número enter entre 1 i 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 aquest exemple, només els dos primers nivells d’encapçalaments s’inclourien a la TdC, independentment de les seves etiquetes HTML reals (<code>h1</code>, <code>h2</code>, <code>h3</code>, etc.). Si vols incloure només el nivell principal d’encapçalaments, estableix <code>toc_levels = 1</code>. El valor per defecte de <code>toc_levels</code> és <code>3</code>.<p>Tingues en compte als teus lectors quan establertis <code>toc_levels</code>. Encara que pot ser temptador incloure molts nivells imbricats per a una navegació detallada, una TdC més curta i senzilla sovint és més amigable i menys aclaparadora.<h3 id=ocultant-capcaleres-de-la-tdc><a aria-label="Anchor link for: ocultant-capcaleres-de-la-tdc" class="header-anchor no-hover-padding" href=#ocultant-capcaleres-de-la-tdc><span aria-hidden=true class=link-icon></span></a> Ocultant capçaleres de la TdC</h3><p>És possible que vulguis amagar certes capçaleres. Per exemple, si el teu article té moltes Figures o Taules, aquestes podrien saturar la TdC. Pots ocultar capçaleres específiques a la TdC configurant la variable <code>toc_ignore_pattern</code> en la secció <code>[extra]</code> del front matter del teu post.<p>Aquesta variable espera una expressió regular (regex), ja que utilitza el test <a class=external href=https://keats.github.io/tera/docs/#matching>matching</a> de Tera. El <code>toc_ignore_pattern</code> es prova contra el text del capçalera. Per exemple, per a la capçalera <code>### Lectura addicional</code>, només el text <code>Lectura addicional</code> s’utilitzaria per comprovar si coincideix amb el patró.<p>Aquí tens alguns valors d’exemple per a <code>toc_ignore_pattern</code> juntament amb les capçaleres que amagarien:<table><thead><tr><th><code>toc_ignore_pattern</code><th>Exclou capçaleres que…<tbody><tr><td><code>Taula</code><td>continguin “Taula”<tr><td><code>^Figura</code><td>comencin amb “Figura”<tr><td><code>(?i)(taula|figura)</code><td>comencin amb “Taula” o “Figura” (insensible a majúscules/minúscules)<tr><td><code>\[Esborrany\]$</code><td>acabin amb “[Esborrany]”.</table><p>Pots provar la teva expressió regular en plataformes com <a class=external href=https://regex101.com/r/2dI7U2/1>regex101</a> per assegurar-te que funciona com esperes.<p><em>Nota</em>: Les capacitats de “look-around”, incloent look-ahead i look-behind, no estan suportades.<h1 id=capcalera-1><a aria-label="Anchor link for: capcalera-1" class="header-anchor no-hover-padding" href=#capcalera-1><span aria-hidden=true class=link-icon></span></a> Capçalera 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=capcalera-2><a aria-label="Anchor link for: capcalera-2" class="header-anchor no-hover-padding" href=#capcalera-2><span aria-hidden=true class=link-icon></span></a> Capçalera 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=capcalera-3-1><a aria-label="Anchor link for: capcalera-3-1" class="header-anchor no-hover-padding" href=#capcalera-3-1><span aria-hidden=true class=link-icon></span></a> Capçalera 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=capcalera-4-1><a aria-label="Anchor link for: capcalera-4-1" class="header-anchor no-hover-padding" href=#capcalera-4-1><span aria-hidden=true class=link-icon></span></a> Capçalera 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=capcalera-4-2><a aria-label="Anchor link for: capcalera-4-2" class="header-anchor no-hover-padding" href=#capcalera-4-2><span aria-hidden=true class=link-icon></span></a> Capçalera 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=capcalera-3-2><a aria-label="Anchor link for: capcalera-3-2" class="header-anchor no-hover-padding" href=#capcalera-3-2><span aria-hidden=true class=link-icon></span></a> Capçalera 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=capcalera-4><a aria-label="Anchor link for: capcalera-4" class="header-anchor no-hover-padding" href=#capcalera-4><span aria-hidden=true class=link-icon></span></a> Capçalera 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=capcalera-4-3><a aria-label="Anchor link for: capcalera-4-3" class="header-anchor no-hover-padding" href=#capcalera-4-3><span aria-hidden=true class=link-icon></span></a> Capçalera 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=capcalera-2-1><a aria-label="Anchor link for: capcalera-2-1" class="header-anchor no-hover-padding" href=#capcalera-2-1><span aria-hidden=true class=link-icon></span></a> Capçalera 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=capcalera-3-1-1><a aria-label="Anchor link for: capcalera-3-1-1" class="header-anchor no-hover-padding" href=#capcalera-3-1-1><span aria-hidden=true class=link-icon></span></a> Capçalera 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=capcalera-4-1-1><a aria-label="Anchor link for: capcalera-4-1-1" class="header-anchor no-hover-padding" href=#capcalera-4-1-1><span aria-hidden=true class=link-icon></span></a> Capçalera 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=capcalera-4-2-1><a aria-label="Anchor link for: capcalera-4-2-1" class="header-anchor no-hover-padding" href=#capcalera-4-2-1><span aria-hidden=true class=link-icon></span></a> Capçalera 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=capcalera-3-2-1><a aria-label="Anchor link for: capcalera-3-2-1" class="header-anchor no-hover-padding" href=#capcalera-3-2-1><span aria-hidden=true class=link-icon></span></a> Capçalera 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=capcalera-4-1-2><a aria-label="Anchor link for: capcalera-4-1-2" class="header-anchor no-hover-padding" href=#capcalera-4-1-2><span aria-hidden=true class=link-icon></span></a> Capçalera 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=capcalera-4-1-3><a aria-label="Anchor link for: capcalera-4-1-3" class="header-anchor no-hover-padding" href=#capcalera-4-1-3><span aria-hidden=true class=link-icon></span></a> Capçalera 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="M'agrada aquesta publicació" title="M'agrada aquesta publicació" 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=Següent href=https://welpo.github.io/tabi/ca/blog/javascript/><span class=arrow>←</span> Següent</a><p aria-hidden=true id=left_title>Sense JavaScript obligatori</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 taula de continguts" 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/ca/blog/toc/#documentacio>Documentació</a> <ul><li><a href=https://welpo.github.io/tabi/ca/blog/toc/#habilitant-i-posicionant-la-taula-de-contingut>Habilitant (i posicionant) la Taula de Contingut</a><li><a href=https://welpo.github.io/tabi/ca/blog/toc/#establint-la-profunditat-maxima>Establint la profunditat màxima</a><li><a href=https://welpo.github.io/tabi/ca/blog/toc/#ocultant-capcaleres-de-la-tdc>Ocultant capçaleres de la TdC</a></ul><li><a href=https://welpo.github.io/tabi/ca/blog/toc/#capcalera-1>Capçalera 1</a> <ul><li><a href=https://welpo.github.io/tabi/ca/blog/toc/#capcalera-2>Capçalera 2</a> <ul><li><a href=https://welpo.github.io/tabi/ca/blog/toc/#capcalera-3-1>Capçalera 3.1</a><li><a href=https://welpo.github.io/tabi/ca/blog/toc/#capcalera-3-2>Capçalera 3.2</a></ul><li><a href=https://welpo.github.io/tabi/ca/blog/toc/#capcalera-2-1>Capçalera 2</a> <ul><li><a href=https://welpo.github.io/tabi/ca/blog/toc/#capcalera-3-1-1>Capçalera 3.1</a><li><a href=https://welpo.github.io/tabi/ca/blog/toc/#capcalera-3-2-1>Capçalera 3.2</a></ul></ul></ul></div></div></div><a title="Vés a l'inici 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> Copiat! </span><span class=hidden id=copy-init> Copia el codi al porta-retalls </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/ca/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/ca/about/> sobre mi </a><li><a class="nav-links no-hover-padding" href=https://welpo.github.io/tabi/ca/privacy/> política de privadesa </a><li><a class="nav-links no-hover-padding" href=https://tabi-stats.osc.garden/> estadístiques del lloc </a><li><a class="nav-links no-hover-padding" href=https://welpo.github.io/tabi/sitemap.xml> mapa del lloc </a></ul> </small></nav><div class=credits><small> Propulsat per <a href=https://www.getzola.org>Zola</a> i <a href=https://github.com/welpo/tabi>tabi</a> • <a href=https://github.com/welpo/tabi> Codi del lloc </a></small></div></section><script async src=https://welpo.github.io/tabi/js/decodeMail.min.js></script></footer> |