tabi/ca/blog/javascript/index.html
2025-11-04 13:26:57 +00:00

2 lines
No EOL
14 KiB
HTML
Raw Blame History

This file contains invisible Unicode characters

This file contains invisible Unicode characters that are indistinguishable to humans but may be processed differently by a computer. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<!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 • Sense JavaScript obligatori</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="JavaScript només s'utilitza quan HTML i CSS no són suficients." name=description><meta content="JavaScript només s'utilitza quan HTML i CSS no són suficients." property=og:description><meta content="Sense JavaScript obligatori" property=og:title><meta content=article property=og:type><meta content="https://welpo.github.io/tabi/blog/javascript/social_cards/ca_blog_javascript.jpg?h=8105982ab5f4e8a8ef8b" 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/javascript/social_cards/ca_blog_javascript.jpg?h=8105982ab5f4e8a8ef8b" 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/javascript/ hreflang=es rel=alternate><meta content=en_GB property=og:locale:alternate><link href=https://welpo.github.io/tabi/blog/javascript/ hreflang=en rel=alternate><meta content=ca_ES property=og:locale:alternate><link href=https://welpo.github.io/tabi/ca/blog/javascript/ hreflang=ca rel=alternate><meta content=https://welpo.github.io/tabi/ca/blog/javascript/ 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/javascript/ lang=en role=menuitem>English</a><a aria-label=العربية href=https://welpo.github.io/tabi/ar/blog/javascript/ lang=ar role=menuitem>العربية</a><a aria-label=Español href=https://welpo.github.io/tabi/es/blog/javascript/ lang=es role=menuitem>Español</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">Sense JavaScript obligatori</h1><a class="u-url u-uid" href=https://welpo.github.io/tabi/ca/blog/javascript/></a><ul class=meta><li><time class=dt-published datetime=2023-01-06>6 de gen. 2023</time><li title="413 paraules"><span aria-hidden=true class=separator></span>3 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/tutorial/>tutorial</a></ul><ul class="meta last-updated"><li><time class=dt-updated datetime=2025-02-21>Actualitzat el 21 de febr. 2025</time><li><span aria-hidden=true class=separator></span><a class=external href=https://github.com/welpo/tabi/commits/main/content/blog/javascript/index.ca.md>Veure canvis</a></ul><p class=p-summary hidden>JavaScript només s'utilitza quan HTML i CSS no són suficients.<section class="e-content body"><p>Aquest tema no requereix JavaScript obligatori. Opcionalment, pot carregar una quantitat mínima per afegir algunes característiques que són impossibles daconseguir amb HTML i CSS.<h2 id=opcions-habilitades-globalment><a aria-label="Anchor link for: opcions-habilitades-globalment" class="header-anchor no-hover-padding" href=#opcions-habilitades-globalment><span aria-hidden=true class=link-icon></span></a> Opcions habilitades globalment</h2><ul><li><p><a href=https://welpo.github.io/tabi/ca/blog/mastering-tabi-settings/#cerca><strong>Cerca</strong></a>. Activada establint un idioma per defecte i <code>build_search_index = true</code> a la secció principal de <code>config.toml</code>. (~23KB de JavaScript)</p><li><p>L<strong>interruptor de mode clar/fosc</strong> es pot habilitar configurant <code>theme_switcher = true</code> a la secció <code>[extra]</code> del teu <code>config.toml</code> (~1KB de JavaScript).</p><li><p><strong>Decodificació de correu electrònic</strong> (~400 bytes). Per protegir contra robots de correu brossa, pots configurar <code>encode_plaintext_email = true</code>. Si el teu lloc web està en un repositori públic, considera utilitzar el teu <code>email</code> com una cadena codificada en base64<sup class=footnote-reference id=fr-1-1><a href=#fn-1>1</a></sup>.</p></ul><h2 id=opcions-que-es-poden-sobreescriure-de-forma-jerarquica><a aria-label="Anchor link for: opcions-que-es-poden-sobreescriure-de-forma-jerarquica" class="header-anchor no-hover-padding" href=#opcions-que-es-poden-sobreescriure-de-forma-jerarquica><span aria-hidden=true class=link-icon></span></a> Opcions que es poden sobreescriure de forma jeràrquica</h2><p>Les següents opcions es poden especificar per a publicacions, seccions i globalment, seguint la jerarquia de <code>pàgina > secció > config.toml</code>:<ul><li><a href=https://welpo.github.io/tabi/ca/blog/markdown/#katex><strong>Suport de KaTeX</strong></a>. Habilitat configurant <code>katex = true</code> (274 KB). Per renderitzar fórmules sense JS, prova <a class=external href=https://developer.mozilla.org/docs/Web/MathML/>MathML</a>.<li><a href=https://welpo.github.io/tabi/ca/blog/shortcodes/#diagrames-de-mermaid><strong>Diagrames de Mermaid</strong></a>. Habilitat configurant <code>mermaid = true</code> (~2.5 MB).<li><a href=https://welpo.github.io/tabi/ca/blog/markdown/#bloc-de-codi><strong>Còpia de blocs de codi amb un sol clic</strong></a>. Habilitada configurant <code>copy_button = true</code>. (~700 bytes)<li><a href=https://welpo.github.io/tabi/ca/blog/shortcodes/#mostrar-ruta-o-url><strong>Noms de blocs de codi clicables</strong></a>. Sactiva configurant <code>code_block_name_links = true</code>. (~400 bytes)<li><a href=https://welpo.github.io/tabi/ca/blog/mastering-tabi-settings/#filtrar-projectes><strong>Filtratge per etiquetes</strong> per a graelles de targetes</a> (p. ex. <a href=https://welpo.github.io/tabi/ca/projects/>projectes</a>) (~2KB). Shabilita configurant <code>enable_cards_tag_filtering = true</code>.</ul><p>Per especificar aquestes opcions:<ul><li><strong>Globalment</strong>: Afegeix-les sota la secció <code>[extra]</code> al teu <code>config.toml</code>.<li><strong>Per a una secció</strong>: Afegeix-les sota la secció <code>[extra]</code> al front matter de l<code>_index.md</code> de la secció.<li><strong>Per a una publicació individual</strong>: Configura les variables corresponents a la secció <code>[extra]</code> del front matter de la publicació.</ul><h2 id=opcions-que-es-poden-habilitar-globalment-o-per-a-publicacions-individuals><a aria-label="Anchor link for: opcions-que-es-poden-habilitar-globalment-o-per-a-publicacions-individuals" class="header-anchor no-hover-padding" href=#opcions-que-es-poden-habilitar-globalment-o-per-a-publicacions-individuals><span aria-hidden=true class=link-icon></span></a> Opcions que es poden habilitar globalment o per a publicacions individuals</h2><ul><li><a href=https://welpo.github.io/tabi/ca/blog/comments/><strong>Comentaris</strong></a>. giscus (2 KB), utterances (1 KB), Hyvor Talk (~800 bytes) o Isso (1KB) es poden habilitar globalment configurant <code>enabled_for_all_posts = true</code> a la secció apropiada del teu <code>config.toml</code> (<code>[extra.giscus]</code>, <code>[extra.utterances]</code>, <code>[extra.hyvortalk]</code> o <code>[extra.isso]</code>). Per habilitar comentaris en publicacions individuals, configura el nom del sistema <code>= true</code> (per exemple, <code>hyvortalk = true</code>) al front matter del post.</ul><p>A part daixò, és un tema ràpid amb HTML i CSS que funciona sense JavaScript. Just com hauria de ser (la majoria de) la web :-)<hr><section class=footnotes><ol class=footnotes-list><li id=fn-1><p>Per codificar el teu correu en base64 pots utilitzar <a class=external href=https://www.base64encode.org/>eines en línia</a> o, al terminal, executa: <code>printf 'mail@example.com' | base64</code>. <a href=#fr-1-1></a></p></ol></section></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/javascript/><button aria-label="M'agrada aquesta publicació" title="M'agrada aquesta publicació" class=iine-button data-icon=thumbs_up data-slug=/blog/javascript/>👍</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/markdown/><span class=arrow></span> Següent</a><p aria-hidden=true id=left_title>Exemples de Markdown</div><div><a aria-describedby=right_title aria-label=Anterior href=https://welpo.github.io/tabi/ca/blog/toc/>Anterior <span class=arrow></span></a><p aria-hidden=true id=right_title>Taula de contingut</div></nav></article></main><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>