Shortcodes personalitzats

Shortcodes d’imatge

Tots els shortcodes d’imatge admeten rutes absolutes, rutes relatives, i fonts remotes en el paràmetre src.

Tots els shortcodes d’imatge tenen tres paràmetres opcionals:

  • inline. Valor predeterminat: false. Si s’estableix a true, la imatge es mostrarĂ  en lĂ­nia amb el text.
  • full_width. Valor predeterminat: false (vegeu a sota).
  • lazy_loading. Valor predeterminat: true.

Imatges per a temes duals

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

La Torre EiffelLa Torre Eiffel

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

GrĂ fic invertible

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

Fotografia d'un desert, cel celestial

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

Foto editada
Foto original

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

Fotografia d'un canal a Àmsterdam

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

IMPORTANT

Aquesta funcionalitat requereix JavaScript. Per activar-la, configura add_src_to_code_block = true a la secciĂł [extra] de la teva pĂ gina, secciĂł, o config.toml.

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

NOTE

Contingut amb sintaxi Markdown. Consulta aquesta api.

TIP

Contingut amb sintaxi Markdown. Consulta aquesta api.

INFO

Contingut amb sintaxi Markdown. Consulta aquesta api.

WARNING

Contingut amb sintaxi Markdown. Consulta aquesta api.

DANGER

Contingut amb sintaxi Markdown. Consulta aquesta api.

Pots canviar el title i la icon de l’advertència. Ambdós paràmetres accepten text i per defecte coincideixen amb el tipus d’advertència. icon pot ser qualsevol dels tipus d’advertència disponibles.

TĂ­tol i icona personalitzats

Contingut amb sintaxi Markdown. Consulta aquesta api.

Ús

{{ admonition(type="danger", icon="tip", title="Un consell important", text="Mantingues-te hidratat") }}

Cites multillenguatge

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

La lògica, encara que inquebrantable, no resisteix a un home que vol viure.

— Franz Kafka

ÂŤDie Logik ist zwar unerschĂźtterlich, aber einem Menschen, der leben will, widersteht sie nicht.Âť

— Franz Kafka

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

Alderson, E. (2015). Ciberseguretat i justĂ­cia social: Una crĂ­tica a la hegemonia corporativa en un mĂłn digital. New York Journal of Technology, 11(2), 24-39. https://doi.org/10.1007/s10198-022-01497-6.

Funkhouser, M. (2012). Les normes socials d’indecència: Un anàlisi del comportament desviat a la societat contemporània. Los Angeles Journal of Sociology, 16(3), 41-58. https://doi.org/10.1093/jmp/jhx037.

Schrute, D. (2005). La revolució de l’agricultura de remolatxa: Un anàlisi de la innovació agrícola. Scranton Agricultural Quarterly, 38(3), 67-81.

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. New York Journal of Business, 12(4), 112-125.

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. Colorado Journal of Communication Studies, 19(2), 73-86. https://doi.org/10.1093/6seaons/1movie.

Ú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

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

TítolAnyDirectorDirector de fotografiaGènereIMDbDurada
Beoning2018Lee Chang-dongHong Kyung-pyoDrama/Misteri7.5148 min
The Master2012Paul Thomas AndersonMihai Mălaimare Jr.Drama/Història7.1137 min
The Tree of Life2011Terrence MalickEmmanuel LubezkiDrama6.8139 min

Ús

{% wide_container() %}

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

El Markdown, per suposat, serĂ  interpretat.

{% end %}