deepStateMirrors/tabi
1
0
Fork 1
mirror of https://github.com/welpo/tabi.git synced 2025-11-23 02:00:25 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions 2
tabi/ca/blog/shortcodes/index.html
GitHub Actions f1040b2aa6 Deploy welpo/tabi to welpo/tabi:gh-pages
2025-11-22 16:30:18 +00:00

133 lines
No EOL
55 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: 'self';img-src 'self' https://* data:;media-src 'self' https://cdn.jsdelivr.net/;style-src 'self' 'unsafe-inline';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 • Shortcodes personalitzats</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="Aquest tema inclou alguns shortcodes personalitzats útils que pots utilitzar per millorar les teves publicacions. Ja sigui per mostrar imatges que s'adapten als temes clar i fosc, o per donar format a una secció de referències amb un aspecte professional, aquests shortcodes personalitzats t'ajudaran." name=description><meta content="Aquest tema inclou alguns shortcodes personalitzats útils que pots utilitzar per millorar les teves publicacions. Ja sigui per mostrar imatges que s'adapten als temes clar i fosc, o per donar format a una secció de referències amb un aspecte professional, aquests shortcodes personalitzats t'ajudaran." property=og:description><meta content="Shortcodes personalitzats" property=og:title><meta content=article property=og:type><meta content="https://welpo.github.io/tabi/blog/shortcodes/social_cards/ca_blog_shortcodes.jpg?h=58473dcc7e00a5c6e3a5" 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/shortcodes/social_cards/ca_blog_shortcodes.jpg?h=58473dcc7e00a5c6e3a5" name=twitter:image><meta content=summary_large_image name=twitter:card><meta content=ca_ES property=og:locale:alternate><link href=https://welpo.github.io/tabi/ca/blog/shortcodes/ hreflang=ca rel=alternate><meta content=es_ES property=og:locale:alternate><link href=https://welpo.github.io/tabi/es/blog/shortcodes/ hreflang=es rel=alternate><meta content=en_GB property=og:locale:alternate><link href=https://welpo.github.io/tabi/blog/shortcodes/ hreflang=en rel=alternate><meta content=https://welpo.github.io/tabi/ca/blog/shortcodes/ 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/shortcodes/ lang=en role=menuitem>English</a><a aria-label=العربية href=https://welpo.github.io/tabi/ar/blog/shortcodes/ lang=ar role=menuitem>العربية</a><a aria-label=Español href=https://welpo.github.io/tabi/es/blog/shortcodes/ 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">Shortcodes personalitzats</h1><a class="u-url u-uid" href=https://welpo.github.io/tabi/ca/blog/shortcodes/></a><ul class=meta><li><time class=dt-published datetime=2023-02-19>19 de febr. 2023</time><li title="956 paraules"><span aria-hidden=true class=separator>•</span>5 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/shortcodes/>shortcodes</a></ul><ul class="meta last-updated"><li><time class=dt-updated datetime=2025-10-21>Actualitzat el 21 d’oct. 2025</time><li><span aria-hidden=true class=separator>•</span><a class=external href=https://github.com/welpo/tabi/commits/main/content/blog/shortcodes/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/shortcodes/#shortcodes-de-diagrames>Shortcodes de diagrames</a> <ul><li><a href=https://welpo.github.io/tabi/ca/blog/shortcodes/#diagrames-de-mermaid>Diagrames de Mermaid</a></ul><li><a href=https://welpo.github.io/tabi/ca/blog/shortcodes/#shortcodes-d-imatge>Shortcodes d’imatge</a> <ul><li><a href=https://welpo.github.io/tabi/ca/blog/shortcodes/#imatges-per-a-temes-duals>Imatges per a temes duals</a><li><a href=https://welpo.github.io/tabi/ca/blog/shortcodes/#imatge-invertible>Imatge invertible</a><li><a href=https://welpo.github.io/tabi/ca/blog/shortcodes/#imatge-regulable>Imatge regulable</a><li><a href=https://welpo.github.io/tabi/ca/blog/shortcodes/#canvi-d-imatge-en-passar-el-cursor>Canvi d’imatge en passar el cursor</a><li><a href=https://welpo.github.io/tabi/ca/blog/shortcodes/#canvi-d-imatge-via-clic>Canvi d’imatge via clic</a><li><a href=https://welpo.github.io/tabi/ca/blog/shortcodes/#imatge-d-amplada-completa>Imatge d’amplada completa</a></ul><li><a href=https://welpo.github.io/tabi/ca/blog/shortcodes/#shortcodes-socials>Shortcodes socials</a> <ul><li><a href=https://welpo.github.io/tabi/ca/blog/shortcodes/#iine>iine</a></ul><li><a href=https://welpo.github.io/tabi/ca/blog/shortcodes/#shortcodes-de-codi>Shortcodes de codi</a> <ul><li><a href=https://welpo.github.io/tabi/ca/blog/shortcodes/#mostrar-ruta-o-url>Mostrar ruta o URL</a><li><a href=https://welpo.github.io/tabi/ca/blog/shortcodes/#suport-de-shortcode-heretat>Suport de shortcode heretat</a></ul><li><a href=https://welpo.github.io/tabi/ca/blog/shortcodes/#shortcodes-de-text>Shortcodes de text</a> <ul><li><a href=https://welpo.github.io/tabi/ca/blog/shortcodes/#aside-nota-al-marge>Aside (nota al marge)</a><li><a href=https://welpo.github.io/tabi/ca/blog/shortcodes/#text-remot>Text remot</a><li><a href=https://welpo.github.io/tabi/ca/blog/shortcodes/#advertencies>Advertències</a><li><a href=https://welpo.github.io/tabi/ca/blog/shortcodes/#cites-multillenguatge>Cites multillenguatge</a><li><a href=https://welpo.github.io/tabi/ca/blog/shortcodes/#referencies-amb-sagnat-invertit>Referències amb sagnat invertit</a><li><a href=https://welpo.github.io/tabi/ca/blog/shortcodes/#spoiler>Spoiler</a></ul><li><a href=https://welpo.github.io/tabi/ca/blog/shortcodes/#contenidors>Contenidors</a> <ul><li><a href=https://welpo.github.io/tabi/ca/blog/shortcodes/#contenidor-ample>Contenidor ample</a><li><a href=https://welpo.github.io/tabi/ca/blog/shortcodes/#forcar-direccio-del-text>Forçar direcció del text</a></ul></ul></div><p class=p-summary hidden>Aquest tema inclou alguns shortcodes personalitzats útils que pots utilitzar per millorar les teves publicacions. Ja sigui per mostrar imatges que s'adapten als temes clar i fosc, o per donar format a una secció de referències amb un aspecte professional, aquests shortcodes personalitzats t'ajudaran.<section class="e-content body"><h2 id=shortcodes-de-diagrames><a aria-label="Anchor link for: shortcodes-de-diagrames" class="header-anchor no-hover-padding" href=#shortcodes-de-diagrames><span aria-hidden=true class=link-icon></span></a> Shortcodes de diagrames</h2><h3 id=diagrames-de-mermaid><a aria-label="Anchor link for: diagrames-de-mermaid" class="header-anchor no-hover-padding" href=#diagrames-de-mermaid><span aria-hidden=true class=link-icon></span></a> Diagrames de Mermaid</h3><p><a class=external href=https://github.com/mermaid-js/mermaid>Mermaid</a> és una eina de diagramació i gràfics que utilitza text i codi per generar diagrames. Admet diagrames de flux, diagrames de seqüència, gràfics de Gantt i més.<p>Per incloure un diagrama Mermaid a la teva publicació, cal fer dues coses:<ol><li><p>Estableix <code>mermaid = true</code> a la secció <code>[extra]</code> del front matter de la teva pàgina, secció o <code>config.toml</code>. Això carregarà el JavaScript necessari per renderitzar els diagrames.</p><li><p>Utilitza el shortcode <code>mermaid()</code> per definir el teu diagrama. Per exemple:</p></ol><pre class="language-txt z-code" data-lang=txt><code class=language-txt data-lang=txt><span class="z-text z-plain">{% mermaid() %}
</span><span class="z-text z-plain">classDiagram
</span><span class="z-text z-plain"> class DistorsionsCognitives {
</span><span class="z-text z-plain"> +PensamentTotORes()
</span><span class="z-text z-plain"> +Sobregeneralitzacio()
</span><span class="z-text z-plain"> +FiltreMental()
</span><span class="z-text z-plain"> +TreureConclusionsPrecipitades()
</span><span class="z-text z-plain"> }
</span><span class="z-text z-plain"> class PensamentTotORes {
</span><span class="z-text z-plain"> +VeureEnExtrems()
</span><span class="z-text z-plain"> }
</span><span class="z-text z-plain"> class Sobregeneralitzacio {
</span><span class="z-text z-plain"> +GeneralitzarDUnic()
</span><span class="z-text z-plain"> }
</span><span class="z-text z-plain"> class FiltreMental {
</span><span class="z-text z-plain"> +EnfocarseEnNegatiu()
</span><span class="z-text z-plain"> }
</span><span class="z-text z-plain"> class TreureConclusionsPrecipitades {
</span><span class="z-text z-plain"> +FerSuposicions()
</span><span class="z-text z-plain"> }
</span><span class="z-text z-plain"> DistorsionsCognitives *-- PensamentTotORes
</span><span class="z-text z-plain"> DistorsionsCognitives *-- Sobregeneralitzacio
</span><span class="z-text z-plain"> DistorsionsCognitives *-- FiltreMental
</span><span class="z-text z-plain"> DistorsionsCognitives *-- TreureConclusionsPrecipitades
</span><span class="z-text z-plain">{% end %}
</span></code></pre><p>El diagrama es renderitzarà així:</p><noscript><strong>⚠️ JavaScript is required to render the diagram.</strong></noscript><pre class="mermaid invertible-image">
classDiagram
class DistorsionsCognitives {
+PensamentTotORes()
+Sobregeneralitzacio()
+FiltreMental()
+TreureConclusionsPrecipitades()
}
class PensamentTotORes {
+VeureEnExtrems()
}
class Sobregeneralitzacio {
+GeneralitzarDUnic()
}
class FiltreMental {
+EnfocarseEnNegatiu()
}
class TreureConclusionsPrecipitades {
+FerSuposicions()
}
DistorsionsCognitives *-- PensamentTotORes
DistorsionsCognitives *-- Sobregeneralitzacio
DistorsionsCognitives *-- FiltreMental
DistorsionsCognitives *-- TreureConclusionsPrecipitades
</pre><p>El shortcode de Mermaid admet dos paràmetres:<ul><li><code>invertible</code>: Si s’estableix a <code>true</code> (per defecte), el diagrama invertirà els seus colors en mode fosc, igual que les <a href=https://welpo.github.io/tabi/ca/blog/shortcodes/#imatge-invertible>imatges invertibles</a>.<li><code>full_width</code>: Permet que el diagrama ocupi l’amplada de la capçalera. Mira <a href=https://welpo.github.io/tabi/ca/blog/shortcodes/#imatge-d-amplada-completa>imatge d’amplada completa</a>.</ul><div class="admonition tip"><div class="admonition-icon admonition-icon-tip"></div><div class=admonition-content><strong class=admonition-title>CONSELL</strong><p>Empra l’<a class=external href=https://mermaid.live/>editor de Mermaid</a> per crear i previsualitzar els teus diagrames.</div></div><h4 id=us><a aria-label="Anchor link for: us" class="header-anchor no-hover-padding" href=#us><span aria-hidden=true class=link-icon></span></a> Ús</h4><pre class=z-code><code><span class="z-text z-plain">{% mermaid(invertible=true, full_width=false) %}
</span><span class="z-text z-plain">
</span><span class="z-text z-plain">El teu codi Mermaid va aquí.
</span><span class="z-text z-plain">
</span><span class="z-text z-plain">`invertible` or `full_width` poden ometre's per emprar els valors per defecte.
</span><span class="z-text z-plain">
</span><span class="z-text z-plain">{% end %}
</span></code></pre><h2 id=shortcodes-d-imatge><a aria-label="Anchor link for: shortcodes-d-imatge" class="header-anchor no-hover-padding" href=#shortcodes-d-imatge><span aria-hidden=true class=link-icon></span></a> Shortcodes d’imatge</h2><p>Tots els shortcodes d’imatge admeten rutes absolutes, rutes relatives, i fonts remotes en el paràmetre <code>src</code>.<p>Tots els shortcodes d’imatge tenen els següents paràmetres opcionals:<ul><li><code>raw_path</code>. Per defecte és <code>false</code>. Si es configura a <code>true</code>, el paràmetre <code>src</code> s’utilitzarà tal qual. Útil per a actius ubicats a la mateixa carpeta que tenen un slug personalitzat (vegeu <a class=external href=https://github.com/getzola/zola/issues/2598>Zola issue #2598</a>).<li><code>inline</code>. Valor predeterminat: <code>false</code>. Si s’estableix a <code>true</code>, la imatge es mostrarà en línia amb el text.<li><code>full_width</code>. Valor predeterminat: <code>false</code> (vegeu <a href=https://welpo.github.io/tabi/ca/blog/shortcodes/#imatge-d-amplada-completa>a sota</a>).<li><code>lazy_loading</code>. Valor predeterminat: <code>true</code>.</ul><h3 id=imatges-per-a-temes-duals><a aria-label="Anchor link for: imatges-per-a-temes-duals" class="header-anchor no-hover-padding" href=#imatges-per-a-temes-duals><span aria-hidden=true class=link-icon></span></a> Imatges per a temes duals</h3><p>Útil si vols utilitzar una imatge diferent pels temes clar i fosc:</p><img alt="La Torre Eiffel" src="https://welpo.github.io/tabi/blog/shortcodes/img/paris_day.webp?h=5a1805468bf7951aa057" class=img-light height=724 loading=lazy width=1000><img alt="La Torre Eiffel" src="https://welpo.github.io/tabi/blog/shortcodes/img/paris_night.webp?h=b70b1f53a9c93453498d" class=img-dark height=724 loading=lazy width=1000><h4 id=us-1><a aria-label="Anchor link for: us-1" class="header-anchor no-hover-padding" href=#us-1><span aria-hidden=true class=link-icon></span></a> Ús</h4><pre class=z-code><code><span class="z-text z-plain">{{ dual_theme_image(light_src="img/paris_day.webp", dark_src="img/paris_night.webp" alt="La Torre Eiffel") }}
</span></code></pre><h3 id=imatge-invertible><a aria-label="Anchor link for: imatge-invertible" class="header-anchor no-hover-padding" href=#imatge-invertible><span aria-hidden=true class=link-icon></span></a> Imatge invertible</h3><p>Útil per a gràfics, dibuixos de línies, diagrames… Inverteix els colors de la imatge. La imatge original s’utilitzarà per al tema clar.</p><img alt="Gràfic invertible" src="https://welpo.github.io/tabi/blog/shortcodes/img/graph.webp?h=fe7eeb562206f4e5f344" class=invertible-image height=421 loading=lazy width=523><h4 id=us-2><a aria-label="Anchor link for: us-2" class="header-anchor no-hover-padding" href=#us-2><span aria-hidden=true class=link-icon></span></a> Ús</h4><pre class=z-code><code><span class="z-text z-plain">{{ invertible_image(src="img/graph.webp", alt="Gràfic invertible") }}
</span></code></pre><h3 id=imatge-regulable><a aria-label="Anchor link for: imatge-regulable" class="header-anchor no-hover-padding" href=#imatge-regulable><span aria-hidden=true class=link-icon></span></a> Imatge regulable</h3><p>Les imatges amb massa brillantor o contrast poden ser molestes en un fons fosc. Aquí tens un exemple d’una fotografia que s’atenua quan s’activa el tema fosc.</p><img alt="Fotografia d'un desert, cel celestial" src="https://welpo.github.io/tabi/blog/shortcodes/img/desert_by_oskerwyld.webp?h=03c60e3dc47acb9b0cb3" class=dimmable-image height=667 loading=lazy width=1000><h4 id=us-3><a aria-label="Anchor link for: us-3" class="header-anchor no-hover-padding" href=#us-3><span aria-hidden=true class=link-icon></span></a> Ús</h4><pre class=z-code><code><span class="z-text z-plain">{{ dimmable_image(src="img/desert_by_oskerwyld.webp", alt="Fotografia d'un desert, cel celestial") }}
</span></code></pre><h3 id=canvi-d-imatge-en-passar-el-cursor><a aria-label="Anchor link for: canvi-d-imatge-en-passar-el-cursor" class="header-anchor no-hover-padding" href=#canvi-d-imatge-en-passar-el-cursor><span aria-hidden=true class=link-icon></span></a> Canvi d’imatge en passar el cursor</h3><p>La imatge mostrada canvia quan l’usuari passa el cursor per sobre. Útil per a comparacions d’abans i després, per exemple.<div class=image-hover-container><div class=image-default><img alt="Foto editada" src="https://welpo.github.io/tabi/blog/shortcodes/img/edited.webp?h=5d3c68c93810a66e623b" height=733 loading=lazy width=1100></div><div class=image-hovered><img alt="Foto original" src="https://welpo.github.io/tabi/blog/shortcodes/img/raw.webp?h=682107305171d5e456e8" height=733 loading=lazy width=1100></div></div><h4 id=us-4><a aria-label="Anchor link for: us-4" class="header-anchor no-hover-padding" href=#us-4><span aria-hidden=true class=link-icon></span></a> Ús</h4><pre class=z-code><code><span class="z-text z-plain">{{ image_hover(default_src="img/before.webp", hovered_src="img/after.webp", default_alt="Foto editada", hovered_alt="Foto original") }}
</span></code></pre><h3 id=canvi-d-imatge-via-clic><a aria-label="Anchor link for: canvi-d-imatge-via-clic" class="header-anchor no-hover-padding" href=#canvi-d-imatge-via-clic><span aria-hidden=true class=link-icon></span></a> Canvi d’imatge via clic</h3><p>Mostra una imatge i canvia a una diferent en fer clic. Ideal per destacar diferències o cridar l’atenció sobre detalls.<div class=image-toggler-container><input class=image-toggler-toggle id=toggle-img-15770 type=checkbox><label class=image-label for=toggle-img-15770><div class=image-default><img alt="Mojave de dia" src="https://welpo.github.io/tabi/blog/shortcodes/img/mojave_day.webp?h=5d715fd2fa70503e1c06" height=675 loading=lazy width=1200></div> <div class=image-toggled><img alt="Mojave de nit" src="https://welpo.github.io/tabi/blog/shortcodes/img/mojave_night.webp?h=e9280e1080048e8be9e7" height=675 loading=lazy width=1200></div></label></div><h4 id=us-5><a aria-label="Anchor link for: us-5" class="header-anchor no-hover-padding" href=#us-5><span aria-hidden=true class=link-icon></span></a> Ús</h4><pre class=z-code><code><span class="z-text z-plain">{{ image_toggler(default_src="img/mojave_day.webp", toggled_src="img/mojave_night.webp", default_alt="Mojave de dia", toggled_alt="Mojave de nit") }}
</span></code></pre><h3 id=imatge-d-amplada-completa><a aria-label="Anchor link for: imatge-d-amplada-completa" class="header-anchor no-hover-padding" href=#imatge-d-amplada-completa><span aria-hidden=true class=link-icon></span></a> Imatge d’amplada completa</h3><p>La imatge s’expandirà per coincidir amb l’amplada de la capçalera, que normalment és més ampla que el text de l’article (excepte en mòbil/finestres petites).<p>Tots els altres shortcodes d’imatges poden utilizar l’amplada completa assignant <code>true</code> al paràmetre opcional <code>full_width</code>.<div class=full-width><img alt="Fotografia d'un canal a Àmsterdam" src="https://welpo.github.io/tabi/blog/shortcodes/img/amsterdam_by_oskerwyld.webp?h=064fe48dc92ff858bc05" height=795 loading=lazy width=1500></div><h4 id=us-6><a aria-label="Anchor link for: us-6" class="header-anchor no-hover-padding" href=#us-6><span aria-hidden=true class=link-icon></span></a> Ús</h4><pre class=z-code><code><span class="z-text z-plain">{{ full_width_image(src="img/amsterdam_by_oskerwyld.webp", alt="Fotografia d'un canal a Àmsterdam") }}
</span></code></pre><h2 id=shortcodes-socials><a aria-label="Anchor link for: shortcodes-socials" class="header-anchor no-hover-padding" href=#shortcodes-socials><span aria-hidden=true class=link-icon></span></a> Shortcodes socials</h2><h3 id=iine><a aria-label="Anchor link for: iine" class="header-anchor no-hover-padding" href=#iine><span aria-hidden=true class=link-icon></span></a> iine</h3><aside><p>Per afegir-lo a totes les publicacions, estableix <code>iine = true</code> a la secció <code>[extra]</code> del teu <code>config.toml</code>.</aside><p>Aquest shortcode et permet afegir botons addicionals d’<a class=external href=https://iine.to>iine.to</a> a les teves publicacions, com aquest:<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/shortcodes/demo-button><button aria-label="Like this post" title="Like this post" class=iine-button data-icon=heart data-slug=/blog/shortcodes/demo-button>♥️</button></form><h4 id=us-7><a aria-label="Anchor link for: us-7" class="header-anchor no-hover-padding" href=#us-7><span aria-hidden=true class=link-icon></span></a> Ús</h4><pre class=z-code><code><span class="z-text z-plain">{{ iine(icon="heart", slug="/post/el-meu-slug-de-post/like", label="M'agrada aquesta publicació") }}
</span></code></pre><p>El shortcode accepta els següents paràmetres opcionals:<ul><li><code>icon</code>: La icona a mostrar. Pot ser <code>heart</code>, <code>thumbs_up</code>, <code>upvote</code>, o qualsevol emoji.<li><code>slug</code>: Un identificador únic. Per defecte és la ruta de la pàgina actual. Útil si vols més d’un botó a la mateixa pàgina.<li><code>label</code>: L’etiqueta d’accessibilitat per al botó. Per defecte és “M’agrada aquesta publicació”.</ul><h2 id=shortcodes-de-codi><a aria-label="Anchor link for: shortcodes-de-codi" class="header-anchor no-hover-padding" href=#shortcodes-de-codi><span aria-hidden=true class=link-icon></span></a> Shortcodes de codi</h2><h3 id=mostrar-ruta-o-url><a aria-label="Anchor link for: mostrar-ruta-o-url" class="header-anchor no-hover-padding" href=#mostrar-ruta-o-url><span aria-hidden=true class=link-icon></span></a> Mostrar ruta o URL</h3><p>Pots mostrar una ruta o URL per a un bloc de codi utilitzant la sintaxi nativa de Zola:<aside><p>Requereix Zola 0.20.0 o superior.</aside><pre class=z-code><code><span class="z-text z-plain">```rust,name=src/main.rs
</span><span class="z-text z-plain">fn main() {
</span><span class="z-text z-plain"> println!("Hola, món!");
</span><span class="z-text z-plain">}
</span><span class="z-text z-plain">```
</span></code></pre><p>Això renderitza:<pre class="language-rust z-code" data-lang=rust data-name=src/main.rs><code class=language-rust data-lang=rust data-name=src/main.rs><span class="z-source z-rust"><span class="z-meta z-function z-rust"><span class="z-meta z-function z-rust"><span class="z-storage z-type z-function z-rust">fn</span> </span><span class="z-entity z-name z-function z-rust">main</span></span><span class="z-meta z-function z-rust"><span class="z-meta z-function z-parameters z-rust"><span class="z-punctuation z-section z-parameters z-begin z-rust">(</span></span><span class="z-meta z-function z-rust"><span class="z-meta z-function z-parameters z-rust"><span class="z-punctuation z-section z-parameters z-end z-rust">)</span></span></span></span><span class="z-meta z-function z-rust"> </span><span class="z-meta z-function z-rust"><span class="z-meta z-block z-rust"><span class="z-punctuation z-section z-block z-begin z-rust">{</span>
</span></span></span><span class="z-source z-rust"><span class="z-meta z-function z-rust"><span class="z-meta z-block z-rust"> <span class="z-support z-macro z-rust">println!</span><span class="z-meta z-group z-rust"><span class="z-punctuation z-section z-group z-begin z-rust">(</span></span><span class="z-meta z-group z-rust"><span class="z-string z-quoted z-double z-rust"><span class="z-punctuation z-definition z-string z-begin z-rust">"</span>Hola, món!<span class="z-punctuation z-definition z-string z-end z-rust">"</span></span></span><span class="z-meta z-group z-rust"><span class="z-punctuation z-section z-group z-end z-rust">)</span></span><span class="z-punctuation z-terminator z-rust">;</span>
</span></span></span><span class="z-source z-rust"><span class="z-meta z-function z-rust"><span class="z-meta z-block z-rust"></span><span class="z-meta z-block z-rust"><span class="z-punctuation z-section z-block z-end z-rust">}</span></span></span>
</span></code></pre><p>Si estableixes el <code>name</code> com una URL (és a dir, comença amb <code>http</code> o <code>https</code>), pots convertir-lo en un enllaç clicable. Això és particularment útil quan s’utilitza juntament amb el <a href=https://welpo.github.io/tabi/ca/blog/shortcodes/#text-remot>shortcode de text remot</a>.<div class="admonition warning"><div class="admonition-icon admonition-icon-warning"></div><div class=admonition-content><strong class=admonition-title>JavaScript necessari</strong><p>La funció d’URLs clicables requereix JavaScript. Per habilitar-la, configura <code>code_block_name_links = true</code> a la secció <code>[extra]</code> de la teva pàgina, secció, o <code>config.toml</code>.</div></div><pre class="language-.gitignore z-code" data-lang=.gitignore data-name=https://github.com/welpo/doteki/blob/main/.gitignore><code class=language-.gitignore data-lang=.gitignore data-name=https://github.com/welpo/doteki/blob/main/.gitignore><span class="z-source z-genconfig"><span class="z-meta z-param z-genconfig"><span class="z-variable z-parameter z-genconfig">__pycache__</span></span><span class="z-keyword z-operator z-genconfig">/</span>
</span><span class="z-source z-genconfig"><span class="z-keyword z-operator z-genconfig">*</span>coverage<span class="z-keyword z-operator z-genconfig">*</span>
</span><span class="z-source z-genconfig"><span class="z-keyword z-operator z-genconfig">.</span>vscode<span class="z-keyword z-operator z-genconfig">/</span>
</span><span class="z-source z-genconfig"><span class="z-meta z-param z-genconfig"><span class="z-variable z-parameter z-genconfig">dist</span></span><span class="z-keyword z-operator z-genconfig">/</span>
</span></code></pre><h3 id=suport-de-shortcode-heretat><a aria-label="Anchor link for: suport-de-shortcode-heretat" class="header-anchor no-hover-padding" href=#suport-de-shortcode-heretat><span aria-hidden=true class=link-icon></span></a> Suport de shortcode heretat</h3><p>El shortcode <code>add_src_to_code_block</code> segueix funcionant per retrocompatibilitat però serà descontinuat en una versió futura. Si us plau, utilitza la sintaxi nativa de Zola:<pre class=z-code><code><span class="z-text z-plain"># Forma antiga (descontinuada):
</span><span class="z-text z-plain">{{ add_src_to_code_block(src="ruta/al/fitxer.rs") }}
</span><span class="z-text z-plain">
</span><span class="z-text z-plain"># Forma nova (recomanada):
</span><span class="z-text z-plain">```rust,name=ruta/al/fitxer.rs
</span></code></pre><h4 id=us-8><a aria-label="Anchor link for: us-8" class="header-anchor no-hover-padding" href=#us-8><span aria-hidden=true class=link-icon></span></a> Ús</h4><pre class=z-code><code><span class="z-text z-plain">{{ add_src_to_code_block(src="https://github.com/welpo/doteki/blob/main/.gitignore") }}
</span><span class="z-text z-plain">```.gitignore
</span><span class="z-text z-plain">**pycache**/
</span><span class="z-text z-plain">*coverage*
</span><span class="z-text z-plain">.vscode/
</span><span class="z-text z-plain">dist/
</span><span class="z-text z-plain">```
</span></code></pre><h2 id=shortcodes-de-text><a aria-label="Anchor link for: shortcodes-de-text" class="header-anchor no-hover-padding" href=#shortcodes-de-text><span aria-hidden=true class=link-icon></span></a> Shortcodes de text</h2><h3 id=aside-nota-al-marge><a aria-label="Anchor link for: aside-nota-al-marge" class="header-anchor no-hover-padding" href=#aside-nota-al-marge><span aria-hidden=true class=link-icon></span></a> Aside (nota al marge)</h3><p>Afegeix contingut complementari als marges en pantalles amples, o com a blocs distintius en mòbil.<aside><p><em>Nota al marge</em> ve de <em>nota</em> (del llatí, ‘marca’ o ‘senyal’) i <em>marge</em> (del llatí <em>margo</em>, ‘vora’ o ‘límit’).</aside><p>El shortcode accepta dos paràmetres:<ul><li><code>position</code>: Establir com a <code>"right"</code> per col·locar al marge dret (per defecte, esquerre)<li>El contingut es pot proporcionar mitjançant el paràmetre <code>text</code> o entre les etiquetes del shortcode</ul><h4 id=us-9><a aria-label="Anchor link for: us-9" class="header-anchor no-hover-padding" href=#us-9><span aria-hidden=true class=link-icon></span></a> Ús</h4><div class="admonition warning"><div class="admonition-icon admonition-icon-warning"></div><div class=admonition-content><strong class=admonition-title>WARNING</strong><p>Separa la definició de la nota del shortcode amb dues línies en blanc per evitar errors de renderització.</div></div><p>Fent servir el paràmetre <code>text</code>:<pre class=z-code><code><span class="z-text z-plain">{{ aside(text="*Nota al marge* ve de *nota* (del llatí, 'marca' o 'senyal') i *marge* (del llatí *margo*, 'vora' o 'límit').") }}
</span></code></pre><p>Fent servir el cos del contingut i indicant la posició a la dreta:<pre class=z-code><code><span class="z-text z-plain">{% aside(position="right") %}
</span><span class="z-text z-plain">Una nota més llarga que
</span><span class="z-text z-plain">pot ocupar diverses línies.
</span><span class="z-text z-plain">
</span><span class="z-text z-plain">S'admet *Markdown*.
</span><span class="z-text z-plain">{% end %}
</span></code></pre><h3 id=text-remot><a aria-label="Anchor link for: text-remot" class="header-anchor no-hover-padding" href=#text-remot><span aria-hidden=true class=link-icon></span></a> Text remot</h3><p>Afegeix text des d’una URL remota o un arxiu local.<p>El shortcode accepta tres paràmetres:<ul><li><code>src</code>: L’URL d’origen o ruta del fitxer (obligatori)<li><code>start</code>: Primera línia a mostrar (opcional, comença a 1)<li><code>end</code>: Número de l’última línia (opcional, per defecte és 0, l’última línia)</ul><div class="admonition info"><div class="admonition-icon admonition-icon-info"></div><div class=admonition-content><strong class=admonition-title>INFO</strong><p><code>start</code> i <code>end</code> són inclusius. <code>start=3, end=3</code> mostrarà només la tercera línia.</div></div><p><strong>Important</strong>:<ul><li><strong>Arxius remots VS arxius locals</strong>: Si <code>src</code> comença amb “http”, es tractarà com un arxiu remot. D’altra banda, s’assumeix que és una ruta d’arxiu local.<li><strong>Accés a arxius</strong>: Atès que utilitza la funció <a class=external href=https://www.getzola.org/documentation/templates/overview/#load-data><code>load_data</code></a> de Zola, els arxius locals han d’estar dins del directori de Zola —vegeu la <a class=external href=https://www.getzola.org/documentation/templates/overview/#file-searching-logic>lògica de cerca d’arxius</a>. Desde <a class=external href=https://github.com/welpo/tabi/releases/tag/v2.16.0>tabi 2.16.0</a>, el shortcode admet també rutes relatives.<li><strong>Formateig de blocs de codi</strong>: Per mostrar el text com un bloc de codi, has d’afegir manualment les tanques de codi Markdown (cometes inverses) i, opcionalment, especificar el llenguatge de programació per al ressaltat sintàctic.</ul><h4 id=us-10><a aria-label="Anchor link for: us-10" class="header-anchor no-hover-padding" href=#us-10><span aria-hidden=true class=link-icon></span></a> Ús</h4><p>Afegeix un script de Python remot dins d’un bloc de codi amb ressaltat sintàctic:<pre class=z-code><code><span class="z-text z-plain">```python
</span><span class="z-text z-plain">{{ remote_text(src="https://example.com/script.py") }}
</span><span class="z-text z-plain">```
</span></code></pre><p>Mostra el text d’un arxiu local:<pre class=z-code><code><span class="z-text z-plain">{{ remote_text(src="ruta/a/arxiu.txt") }}
</span></code></pre><p>Mostreu només les línies 3 a 5 d’un arxiu local:<pre class=z-code><code><span class="z-text z-plain">{{ remote_text(src="ruta/a/arxiu.txt", start=3, end=5) }}
</span></code></pre><h3 id=advertencies><a aria-label="Anchor link for: advertencies" class="header-anchor no-hover-padding" href=#advertencies><span aria-hidden=true class=link-icon></span></a> Advertències</h3><p>Destaca informació amb aquests shortcodes d’advertència/alerta. Hi ha cinc tipus (<code>type</code>): <code>note</code>, <code>tip</code>, <code>info</code>, <code>warning</code>, i <code>danger</code>.<div class="admonition note"><div class="admonition-icon admonition-icon-note"></div><div class=admonition-content><strong class=admonition-title>NOTE</strong><p>Contingut amb <strong>sintaxi</strong> <em>Markdown</em>. Consulta <a href=#>aquesta <code>api</code></a>.</div></div><div class="admonition tip"><div class="admonition-icon admonition-icon-tip"></div><div class=admonition-content><strong class=admonition-title>TIP</strong><p>Contingut amb <strong>sintaxi</strong> <em>Markdown</em>. Consulta <a href=#>aquesta <code>api</code></a>.</div></div><div class="admonition info"><div class="admonition-icon admonition-icon-info"></div><div class=admonition-content><strong class=admonition-title>INFO</strong><p>Contingut amb <strong>sintaxi</strong> <em>Markdown</em>. Consulta <a href=#>aquesta <code>api</code></a>.</div></div><div class="admonition warning"><div class="admonition-icon admonition-icon-warning"></div><div class=admonition-content><strong class=admonition-title>WARNING</strong><p>Contingut amb <strong>sintaxi</strong> <em>Markdown</em>. Consulta <a href=#>aquesta <code>api</code></a>.</div></div><div class="admonition danger"><div class="admonition-icon admonition-icon-danger"></div><div class=admonition-content><strong class=admonition-title>DANGER</strong><p>Contingut amb <strong>sintaxi</strong> <em>Markdown</em>. Consulta <a href=#>aquesta <code>api</code></a>.</div></div><p>Pots canviar el <code>title</code> i la <code>icon</code> de l’advertència. Ambdós paràmetres accepten text i per defecte coincideixen amb el tipus d’advertència. <code>icon</code> pot ser qualsevol dels tipus d’advertència disponibles.<div class="admonition note"><div class="admonition-icon admonition-icon-tip"></div><div class=admonition-content><strong class=admonition-title>Títol i icona personalitzats</strong><p>Contingut amb <strong>sintaxi</strong> <em>Markdown</em>. Consulta <a href=#>aquesta <code>api</code></a>.</div></div><h4 id=us-11><a aria-label="Anchor link for: us-11" class="header-anchor no-hover-padding" href=#us-11><span aria-hidden=true class=link-icon></span></a> Ús</h4><p>Pots utilitzar les advertències de dues maneres:<ol><li>En línia amb paràmetres:</ol><pre class="language-md z-code" data-lang=md><code class=language-md data-lang=md><span class="z-text z-html z-markdown"><span class="z-meta z-paragraph z-markdown">{{ admonition(type="danger", icon="tip", title="Un consell important", text="Mantingues-te hidratat") }}
</span></span></code></pre><ol start=2><li>Amb contingut al cos:</ol><pre class="language-md z-code" data-lang=md><code class=language-md data-lang=md><span class="z-text z-html z-markdown"><span class="z-meta z-paragraph z-markdown">{% admonition(type="danger", icon="tip", title="Un consell important") %}
</span></span><span class="z-text z-html z-markdown"><span class="z-meta z-paragraph z-markdown">Mantingues-te hidratat
</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">Aquest mètode és especialment útil per a contingut llarg o múltiples paràgrafs.
</span></span><span class="z-text z-html z-markdown"><span class="z-meta z-paragraph z-markdown">{% end %}
</span></span></code></pre><p>Ambdós mètodes admeten els mateixos paràmetres (<code>type</code>, <code>icon</code>, i <code>title</code>).<h3 id=cites-multillenguatge><a aria-label="Anchor link for: cites-multillenguatge" class="header-anchor no-hover-padding" href=#cites-multillenguatge><span aria-hidden=true class=link-icon></span></a> Cites multillenguatge</h3><p>Aquest shortcode permet mostrar una cita traduïda i en el llenguatge original:<div class=quote-container><input class=quote-toggle id=toggle-81240 type=checkbox><div class=quote><div class=translated><blockquote><p>«La lògica, encara que inquebrantable, no resisteix a un home que vol viure.»<p>— Franz Kafka <label class="quote-label quote-label-original" for=toggle-81240>(Mostra la cita original)</label></blockquote></div><div class=original><blockquote><p>«Die Logik ist zwar unerschütterlich, aber einem Menschen, der leben will, widersteht sie nicht.»<p>— Franz Kafka <label class="quote-label quote-label-translate" for=toggle-81240>(Mostra la traducció)</label></blockquote></div></div></div><h4 id=us-12><a aria-label="Anchor link for: us-12" class="header-anchor no-hover-padding" href=#us-12><span aria-hidden=true class=link-icon></span></a> Ús</h4><pre class=z-code><code><span class="z-text z-plain">{{ multilingual_quote(original="Die Logik ist zwar unerschütterlich, aber einem Menschen, der leben will, widersteht sie nicht.", translated="La lògica, encara que inquebrantable, no resisteix a un home que vol viure.", author="Franz Kafka") }}
</span></code></pre><h3 id=referencies-amb-sagnat-invertit><a aria-label="Anchor link for: referencies-amb-sagnat-invertit" class="header-anchor no-hover-padding" href=#referencies-amb-sagnat-invertit><span aria-hidden=true class=link-icon></span></a> Referències amb sagnat invertit</h3><p>Aquest shortcode formata una secció de referència amb un sagnat invertit de la següent manera:<div class=references><p>Alderson, E. (2015). Ciberseguretat i justícia social: Una crítica a la hegemonia corporativa en un món digital. <em>New York Journal of Technology, 11</em>(2), 24-39. <a class=external href=https://doi.org/10.1007/s10198-022-01497-6>https://doi.org/10.1007/s10198-022-01497-6</a>.<p>Funkhouser, M. (2012). Les normes socials d’indecència: Un anàlisi del comportament desviat a la societat contemporània. <em>Los Angeles Journal of Sociology, 16</em>(3), 41-58. <a class=external href=https://doi.org/10.1093/jmp/jhx037>https://doi.org/10.1093/jmp/jhx037</a>.<p>Schrute, D. (2005). La revolució de l’agricultura de remolatxa: Un anàlisi de la innovació agrícola. <em>Scranton Agricultural Quarterly, 38</em>(3), 67-81.<p>Steinbrenner, G. (1997). L’anàlisi cost-benefici de George Costanza: Un anàlisi del comportament de presa de riscos en el lloc de treball. <em>New York Journal of Business, 12</em>(4), 112-125.<p>Winger, J. A. (2010). L’art del debat: Un examen de la retòrica en el model de les Nacions Unides del Greendale Community College. <em>Colorado Journal of Communication Studies, 19</em>(2), 73-86. <a class=external href=https://doi.org/10.1093/6seaons/1movie>https://doi.org/10.1093/6seaons/1movie</a>.</div><h4 id=us-13><a aria-label="Anchor link for: us-13" class="header-anchor no-hover-padding" href=#us-13><span aria-hidden=true class=link-icon></span></a> Ús</h4><pre class=z-code><code><span class="z-text z-plain">{% references() %}
</span><span class="z-text z-plain">
</span><span class="z-text z-plain">Les teves referències van aquí.
</span><span class="z-text z-plain">
</span><span class="z-text z-plain">Cada una en una nova línia. Es renderitzarà el Markdown (enllaços, cursiva…).
</span><span class="z-text z-plain">
</span><span class="z-text z-plain">{% end %}
</span></code></pre><h3 id=spoiler><a aria-label="Anchor link for: spoiler" class="header-anchor no-hover-padding" href=#spoiler><span aria-hidden=true class=link-icon></span></a> Spoiler</h3><p>Aquest shortcode amaga el text fins que l’usuari fa clic per revelar-lo. Per exemple: A l’antiga Roma, el <em>vomitorium</em> era <label class=spoiler-container><input aria-pressed=false class=spoiler-toggle id=spoiler-46986 role=button type=checkbox> <span title="reveal spoiler" class=spoiler-content tabindex=0> <span class=spoiler-hidden>l’entrada a través de la qual les multituds entraven i sortien d’un estadi, no un espai especial utilitzat per a vomitar durant els àpats. Sí, <a class=external href=https://ca.wikipedia.org/wiki/Vomitori>de debó</a>. </span> </span></label><p>Com veus, el Markdown es renderitza.<p>Aquest shortcode té l’opció <code>fixed_blur</code> per difuminar el text “SPOILER”, en lloc de difuminar el contingut real. Per exemple: és <label class="spoiler-container fixed-blur"><input aria-pressed=false class=spoiler-toggle id=spoiler-74245 role=button type=checkbox> <span title="reveal spoiler" class=spoiler-content tabindex=0> <span class=spoiler-hidden>innecessari </span> </span></label> esperar 24 hores abans de denunciar la desaparició d’una persona.<h4 id=us-14><a aria-label="Anchor link for: us-14" class="header-anchor no-hover-padding" href=#us-14><span aria-hidden=true class=link-icon></span></a> Ús</h4><pre class=z-code><code><span class="z-text z-plain">{{ spoiler(text="text a amagar", fixed_blur=false) }}
</span></code></pre><h2 id=contenidors><a aria-label="Anchor link for: contenidors" class="header-anchor no-hover-padding" href=#contenidors><span aria-hidden=true class=link-icon></span></a> Contenidors</h2><h3 id=contenidor-ample><a aria-label="Anchor link for: contenidor-ample" class="header-anchor no-hover-padding" href=#contenidor-ample><span aria-hidden=true class=link-icon></span></a> Contenidor ample</h3><p>Utilitza aquest codi curt si vols tenir una taula, paràgraf, bloc de codi… més ample. A l’escriptori, ocuparà l’amplada de la capçalera. A mòbils no tindrà efecte, excepte per les taules, que guanyaran scroll horitzontal.<div class=full-width><table><thead><tr><th>Títol<th>Any<th>Director<th>Director de fotografia<th>Gènere<th>IMDb<th>Durada<tbody><tr><td>Beoning<td>2018<td>Lee Chang-dong<td>Hong Kyung-pyo<td>Drama/Misteri<td>7.5<td>148 min<tr><td>The Master<td>2012<td>Paul Thomas Anderson<td>Mihai Mălaimare Jr.<td>Drama/Història<td>7.1<td>137 min<tr><td>The Tree of Life<td>2011<td>Terrence Malick<td>Emmanuel Lubezki<td>Drama<td>6.8<td>139 min</table></div><h4 id=us-15><a aria-label="Anchor link for: us-15" class="header-anchor no-hover-padding" href=#us-15><span aria-hidden=true class=link-icon></span></a> Ús</h4><pre class=z-code><code><span class="z-text z-plain">{% wide_container() %}
</span><span class="z-text z-plain">
</span><span class="z-text z-plain">Posa el teu bloc de codi, paràgraf, taula… aquí.
</span><span class="z-text z-plain">
</span><span class="z-text z-plain">El Markdown, per suposat, serà interpretat.
</span><span class="z-text z-plain">
</span><span class="z-text z-plain">{% end %}
</span></code></pre><h3 id=forcar-direccio-del-text><a aria-label="Anchor link for: forcar-direccio-del-text" class="header-anchor no-hover-padding" href=#forcar-direccio-del-text><span aria-hidden=true class=link-icon></span></a> Forçar direcció del text</h3><p>Força la direcció del text d’un bloc de contingut. Substitueix tant la configuració global <code>force_codeblock_ltr</code> com la direcció general del document.<p>Accepta el paràmetre <code>direction</code>: la direcció de text desitjada. Pot ser “ltr” (d’esquerra a dreta) o “rtl” (de dreta a esquerra). Per defecte és “ltr”.<div data-force-text-direction=rtl><pre class="language-python z-code" data-lang=python><code class=language-python data-lang=python><span class="z-source z-python"><span class="z-meta z-function z-python"><span class="z-storage z-type z-function z-python"><span class="z-keyword z-declaration z-function z-python">def</span></span> <span class="z-entity z-name z-function z-python"><span class="z-meta z-generic-name z-python">مرحبا_بالعالم</span></span></span><span class="z-meta z-function z-parameters z-python"><span class="z-punctuation z-section z-parameters z-begin z-python">(</span></span><span class="z-meta z-function z-parameters z-python"><span class="z-punctuation z-section z-parameters z-end z-python">)</span></span><span class="z-meta z-function z-python"><span class="z-punctuation z-section z-function z-begin z-python">:</span></span>
</span><span class="z-source z-python"> <span class="z-meta z-function-call z-python"><span class="z-meta z-qualified-name z-python"><span class="z-variable z-function z-python"><span class="z-support z-function z-builtin z-python">print</span></span></span></span><span class="z-meta z-function-call z-arguments z-python"><span class="z-punctuation z-section z-arguments z-begin z-python">(</span><span class="z-meta z-string z-python"><span class="z-string z-quoted z-double z-python"><span class="z-punctuation z-definition z-string z-begin z-python">"</span></span></span><span class="z-meta z-string z-python"><span class="z-string z-quoted z-double z-python">مرحبا بالعالم!<span class="z-punctuation z-definition z-string z-end z-python">"</span></span></span><span class="z-punctuation z-section z-arguments z-end z-python">)</span></span>
</span></code></pre></div><h4 id=us-16><a aria-label="Anchor link for: us-16" class="header-anchor no-hover-padding" href=#us-16><span aria-hidden=true class=link-icon></span></a> Ús</h4><p>En una pàgina LTR podem forçar que un bloc de codi sigui RTL (com es mostra a dalt) de la següent manera:<pre class=z-code><code><span class="z-text z-plain">{% force_text_direction(direction="rtl") %}
</span><span class="z-text z-plain">
</span><span class="z-text z-plain">```python
</span><span class="z-text z-plain">def مرحبا_بالعالم():
</span><span class="z-text z-plain"> print("مرحبا بالعالم!")
</span><span class="z-text z-plain">```
</span><span class="z-text z-plain">
</span><span class="z-text z-plain">{% end %}
</span></code></pre></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/shortcodes/><button aria-label="M'agrada aquesta publicació" title="M'agrada aquesta publicació" class=iine-button data-icon=thumbs_up data-slug=/blog/shortcodes/>👍</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/security/><span class=arrow>←</span> Següent</a><p aria-hidden=true id=left_title>Seguretat per defecte</div><div><a aria-describedby=right_title aria-label=Anterior href=https://welpo.github.io/tabi/ca/blog/markdown/>Anterior <span class=arrow>→</span></a><p aria-hidden=true id=right_title>Exemples de Markdown</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/shortcodes/#shortcodes-de-diagrames>Shortcodes de diagrames</a> <ul><li><a href=https://welpo.github.io/tabi/ca/blog/shortcodes/#diagrames-de-mermaid>Diagrames de Mermaid</a></ul><li><a href=https://welpo.github.io/tabi/ca/blog/shortcodes/#shortcodes-d-imatge>Shortcodes d’imatge</a> <ul><li><a href=https://welpo.github.io/tabi/ca/blog/shortcodes/#imatges-per-a-temes-duals>Imatges per a temes duals</a><li><a href=https://welpo.github.io/tabi/ca/blog/shortcodes/#imatge-invertible>Imatge invertible</a><li><a href=https://welpo.github.io/tabi/ca/blog/shortcodes/#imatge-regulable>Imatge regulable</a><li><a href=https://welpo.github.io/tabi/ca/blog/shortcodes/#canvi-d-imatge-en-passar-el-cursor>Canvi d’imatge en passar el cursor</a><li><a href=https://welpo.github.io/tabi/ca/blog/shortcodes/#canvi-d-imatge-via-clic>Canvi d’imatge via clic</a><li><a href=https://welpo.github.io/tabi/ca/blog/shortcodes/#imatge-d-amplada-completa>Imatge d’amplada completa</a></ul><li><a href=https://welpo.github.io/tabi/ca/blog/shortcodes/#shortcodes-socials>Shortcodes socials</a> <ul><li><a href=https://welpo.github.io/tabi/ca/blog/shortcodes/#iine>iine</a></ul><li><a href=https://welpo.github.io/tabi/ca/blog/shortcodes/#shortcodes-de-codi>Shortcodes de codi</a> <ul><li><a href=https://welpo.github.io/tabi/ca/blog/shortcodes/#mostrar-ruta-o-url>Mostrar ruta o URL</a><li><a href=https://welpo.github.io/tabi/ca/blog/shortcodes/#suport-de-shortcode-heretat>Suport de shortcode heretat</a></ul><li><a href=https://welpo.github.io/tabi/ca/blog/shortcodes/#shortcodes-de-text>Shortcodes de text</a> <ul><li><a href=https://welpo.github.io/tabi/ca/blog/shortcodes/#aside-nota-al-marge>Aside (nota al marge)</a><li><a href=https://welpo.github.io/tabi/ca/blog/shortcodes/#text-remot>Text remot</a><li><a href=https://welpo.github.io/tabi/ca/blog/shortcodes/#advertencies>Advertències</a><li><a href=https://welpo.github.io/tabi/ca/blog/shortcodes/#cites-multillenguatge>Cites multillenguatge</a><li><a href=https://welpo.github.io/tabi/ca/blog/shortcodes/#referencies-amb-sagnat-invertit>Referències amb sagnat invertit</a><li><a href=https://welpo.github.io/tabi/ca/blog/shortcodes/#spoiler>Spoiler</a></ul><li><a href=https://welpo.github.io/tabi/ca/blog/shortcodes/#contenidors>Contenidors</a> <ul><li><a href=https://welpo.github.io/tabi/ca/blog/shortcodes/#contenidor-ample>Contenidor ample</a><li><a href=https://welpo.github.io/tabi/ca/blog/shortcodes/#forcar-direccio-del-text>Forçar direcció del text</a></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><script defer src=https://welpo.github.io/tabi/js/mermaid.min.js></script><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://welpo.github.io/tabi/js/codeBlockNameLinks.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>
Reference in a new issue View git blame Copy permalink