Shortcodes personalitzats

Shortcodes d’imatge

Nota: tots els shortcodes d’imatge tenen dos paràmetres opcionals: full_width, que té com a valor predeterminat false (vegeu a sota), i lazy_loading, que té com a valor predeterminat true.

Nota 2: a partir del PR #222 (commit 7796162), tots els shortcodes d’imatges suporten rutes relatives pel paràmetre src.

Nota 3: a partir del PR #280, tots els shortcodes d’imatges admeten imatges remotes pel paràmetre src.

Imatges per a temes duals

Útil si vols utilitzar una imatge diferent pels temes clar i fosc:

Ús

{{ dual_theme_image(light_src="img/paris_day.webp", dark_src="img/paris_night.webp" alt="La Torre Eiffel") }}

Imatge invertible

Ú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.

Ús

{{ invertible_image(src="img/graph.webp", alt="Gràfic invertible") }}

Imatge regulable

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.

Ús

{{ dimmable_image(src="img/desert_by_oskerwyld.webp", alt="Fotografia d'un desert, cel celestial") }}

Canvi d’imatge en passar el cursor

La imatge mostrada canvia quan l’usuari passa el cursor per sobre. Útil per a comparacions d’abans i després, per exemple.

Ús

{{ image_hover(default_src="img/before.webp", hovered_src="img/after.webp", default_alt="Foto editada", hovered_alt="Foto original") }}

Canvi d’imatge via clic

Mostra una imatge i canvia a una diferent en fer clic. Ideal per destacar diferències o cridar l’atenció sobre detalls.

Ús

{{ image_toggler(default_src="img/mojave_day.webp", toggled_src="img/mojave_night.webp", default_alt="Mojave de dia", toggled_alt="Mojave de nit") }}

Imatge d’amplada completa

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).

Tots els altres shortcodes d’imatges poden utilizar l’amplada completa assignant true al paràmetre opcional full_width.

Ús

{{ full_width_image(src="img/amsterdam_by_oskerwyld.webp", alt="Fotografia d'un canal a Àmsterdam") }}

Shortcodes de codi

Mostrar ruta o URL

Mostra una ruta o URL al següent bloc de codi trobat. Si comença amb “http”, es convertirà en un enllaç. Particularment útil quan s’utilitza en conjunció amb el shortcode de text remot.

__pycache__/
*coverage*
.vscode/
dist/

Ús

{{ add_src_to_code_block(src="https://github.com/welpo/doteki/blob/main/.gitignore") }}

```.gitignore
__pycache__/
*coverage*
.vscode/
dist/
```

Shortcodes de text

Text remot

Afegeix text des d’una URL remota o un arxiu local.

Important:

• Arxius remots VS arxius locals: Si src comença amb “http”, es tractarà com un arxiu remot. D’altra banda, s’assumeix que és una ruta d’arxiu local.
• Accés a arxius: Atès que utilitza la funció load_data de Zola, els arxius locals han d’estar dins del directori de Zola —vegeu la lògica de cerca d’arxius.
• Formateig de blocs de codi: 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.

Ús

Afegeix un script de Python remot dins d’un bloc de codi amb ressaltat sintàctic:

```python
{{ remote_text(src="https://example.com/script.py") }}
```

Mostra el text d’un arxiu local:

{{ remote_text(src="ruta/a/arxiu.txt") }}

Advertències

Destaca informació amb aquests shortcodes. Hi ha cinc tipus (type): note, tip, info, warning, i danger.

Pots personalitzar el títol amb el paràmetre title:

Ús

{{ admonition(type="info", title="Títol opcional", text="Quelcom.") }}

Cites multillenguatge

Aquest shortcode permet mostrar una cita traduïda i en el llenguatge original:

Ús

{{ 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") }}

Referències amb sagnat invertit

Aquest shortcode formata una secció de referència amb un sagnat invertit de la següent manera:

Ús

{% references() %}

Les teves referències van aquí.

Cada una en una nova línia. Es renderitzarà el Markdown (enllaços, cursiva…).

{% end %}

Spoiler

Aquest shortcode amaga el text fins que l’usuari fa clic per revelar-lo. Per exemple: A l’antiga Roma, el vomitorium era 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í, de debó.

Com veus, el Markdown es renderitza.

Aquest shortcode té l’opció fixed_blur per difuminar el text “SPOILER”, en lloc de difuminar el contingut real. Per exemple: és innecessari esperar 24 hores abans de denunciar la desaparició d’una persona.

Ús

{{ spoiler(text="text a amagar", fixed_blur=false) }}

Contenidors

Contenidor ample

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.

Ús

{% wide_container() %}

Posa el teu bloc de codi, paràgraf, taula… aquí.

El Markdown, per suposat, serà interpretat.

{% end %}