Shortcodes personalizados

Shortcodes de imagen

Nota: todos los shortcodes de imagen tienen dos parámetros opcionales: full_width, que tiene como valor predeterminado false (ver más abajo), y lazy_loading, que tiene como valor predeterminado true.

Nota 2: a partir del PR #222 (commit 7796162), todos los shortcodes de imágenes admiten rutas relativas en el parámetro src.

Nota 3: a partir del PR #280, todos los shortcodes de imágenes admiten imágenes remotas en el parámetro src.

Imágenes de doble tema

Útil si deseas usar una imagen diferente para los temas claro y oscuro:

Uso

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

Imagen invertible

Ideal para gráficos, dibujos lineales, diagramas… Invierte los colores de la imagen. La imagen de origen se utilizará para el tema claro.

Uso

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

Imagen atenuable

Las imágenes con demasiado brillo o contraste pueden ser demasiado discordantes en un fondo oscuro. Aquí tienes un ejemplo de una fotografía que se atenúa cuando el tema oscuro está activo.

Uso

{{ dimmable_image(src="img/desert_by_oskerwyld.webp", alt="Fotografía de un desierto, cielo celestial") }}

Cambio de imagen al pasar el cursor

La imagen mostrada cambia cuando el usuario pasa el cursor por encima. Útil para comparaciones de antes y después, por ejemplo.

Uso

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

Cambio de imagen vía click

Muestra una imagen y cambia a una diferente al hacer clic. Ideal para destacar diferencias o llamar la atención sobre detalles.

Uso

{{ image_toggler(default_src="img/mojave_day.webp", toggled_src="img/mojave_night.webp", default_alt="Mojave durante el día", toggled_alt="Mojave durante la noche") }}

Imagen a ancho completo

La imagen se expandirá para coincidir con el ancho del encabezado, que generalmente es más ancho que el texto del artículo (excepto en móvil/ventanas pequeñas).

Todos los otros shortcodes de imágenes pueden usar el ancho completo asignando el valor true al parámetro opcional full_width.

Uso

{{ full_width_image(src="img/amsterdam_by_oskerwyld.webp", alt="Fotografía de un canal en Ámsterdam") }}

Shortcodes de código

Mostrar ruta o URL

Muestra una ruta o URL en el siguiente bloque de código encontrado. Si comienza con “http”, se convertirá en un enlace. Particularmente útil cuando se usa junto con el shortcode de texto remot.

__pycache__/
*coverage*
.vscode/
dist/

Uso

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

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

Shortcodes de texto

Texto remoto

Añade texto desde una URL remota o un archivo local.

Importante:

• Archivos remotos VS archivos locales: Si src empieza con “http”, se tratará como un archivo remoto. De lo contrario, se asume que es una ruta de archivo local.
• Acceso a archivos: Dado que utiliza la función load_data de Zola, los archivos locales deben estar dentro del directorio de Zola —ver la lógica de búsqueda de archivos.
• Formateo de bloques de código: Para mostrar el texto como un bloque de código, debes añadir manualmente las cercas de código Markdown (comillas invertidas) y, opcionalmente, especificar el lenguaje de programación para el resaltado sintáctico.

Uso

Añade un script de Python remoto dentro de un bloque de código con resaltado sintáctico:

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

Visualización de texto de un archivo local:

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

Advertencias

Destaca información con estos shortcodes. Hay cinco tipos (type): note, tip, info, warning, y danger.

Puedes personalizar el título con el parámetro title:

Uso

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

Citas multilenguaje

Este shortcode permite mostrar una cita traducida y en su lenguaje original:

Uso

{{ multilingual_quote(original="Ce qui est terrible, ce n’est pas de souffrir ni de mourir, mais de mourir en vain.", translated="Lo terrible no es sufrir o morir, sino morir en vano.", author="Jean-Paul Sartre") }}

Referencias con sangría francesa

Este shortcode formatea una sección de referencias con sangría francesa de la siguiente manera:

Uso

{% references() %}

Tus referencias van aquí.

Cada una en una línea nueva. Se renderizará Markdown (enlaces, cursivas…).

{% end %}

Spoilers

Este shortcode permite ocultar texto que se revelará al hacer clic. Por ejemplo: las galletas de la fortuna tiene su origen en Japón. Sí, en serio.

Como ves, el Markdown se renderiza.

Este shortcode tiene la opción fixed_blur para difuminar el texto “SPOILER”, en lugar de difuminar el contenido real. Por ejemplo: es innecesario esperar 24 horas antes de denunciar la desaparición de una persona.

Uso

{{ spoiler(text="texto que ocultar", fixed_blur=false) }}

Contenedores

Contenedor ancho

Utiliza este código corto si deseas tener una tabla, párrafo, bloque de código… más ancho. En escritorio, ocupará el ancho del encabezado. En móviles no tendrá efecto, excepto para las tablas, que ganarán scroll horizontal.

Uso

{% wide_container() %}

Coloca tu bloque de código, párrafo, tabla… aquí.

El Markdown, por supuesto, será interpretado.

{% end %}