feat: support Zola's native code block names (#489)

This commit is contained in:
Óscar 2025-02-15 22:31:55 +01:00 committed by GitHub
parent 6837f6f4f1
commit 61793b2e56
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
23 changed files with 228 additions and 195 deletions

View file

@ -132,9 +132,9 @@ show_remote_source = true # Defaults to true.
# Can be set at page or section levels, following the hierarchy: page > section > config. See: https://welpo.github.io/tabi/blog/mastering-tabi-settings/#settings-hierarchy
copy_button = true
# Loads the necessary JavaScript (~400 bytes) to use the "Show source or path" shortcode: https://welpo.github.io/tabi/blog/shortcodes/#show-source-or-path
# Make code block names clickable if they are URLs (loads ~400 bytes of JavaScript).
# Can be set at page or section levels, following the hierarchy: page > section > config. See: https://welpo.github.io/tabi/blog/mastering-tabi-settings/#settings-hierarchy
add_src_to_code_block = false
code_block_name_links = false
# Force left-to-right (LTR) direction for code blocks.
# Set to false to allow code to follow the document's natural direction.

View file

@ -1,7 +1,7 @@
+++
title = "Sense JavaScript obligatori"
date = 2023-01-06
updated = 2024-12-15
updated = 2025-02-15
description = "JavaScript només s'utilitza quan HTML i CSS no són suficients."
[taxonomies]
@ -28,7 +28,7 @@ Les següents opcions es poden especificar per a publicacions, seccions i global
- [**Suport de KaTeX**](@/blog/markdown/index.ca.md#katex). Habilitat configurant `katex = true` (274 KB). Per renderitzar fórmules sense JS, prova [MathML](https://developer.mozilla.org/docs/Web/MathML/).
- [**Diagrames de Mermaid**](@/blog/shortcodes/index.ca.md#diagrames-de-mermaid). Habilitat configurant `mermaid = true` (~2.5 MB).
- [**Còpia de blocs de codi amb un sol clic**](@/blog/markdown/index.ca.md#bloc-de-codi). Habilitada configurant `copy_button = true`. (~700 bytes)
- [**Mostrar ruta/URL a blocs de codi**](@/blog/shortcodes/index.ca.md#mostrar-ruta-o-url). S'activa configurant `add_src_to_code_block = true`. (~400 bytes)
- [**Noms de blocs de codi clicables**](@/blog/shortcodes/index.ca.md#mostrar-ruta-o-url). S'activa configurant `code_block_name_links = true`. (~400 bytes)
- [**Filtratge per etiquetes** per a graelles de targetes](@/blog/mastering-tabi-settings/index.ca.md#filtrar-projectes) (p. ex. [projectes](@/projects/_index.ca.md)) (~2KB). S'habilita configurant `enable_cards_tag_filtering = true`.
Per especificar aquestes opcions:

View file

@ -1,7 +1,7 @@
+++
title = "Sin JavaScript obligatorio"
date = 2023-01-06
updated = 2024-12-15
updated = 2025-02-15
description = "JavaScript solo se utiliza cuando HTML y CSS no son suficientes."
[taxonomies]
@ -28,7 +28,7 @@ Las siguientes opciones pueden especificarse para publicaciones, secciones y a n
- [**Soporte de KaTeX**](@/blog/markdown/index.es.md#katex). Habilitado al configurar `katex = true` (274 KB). Para renderizar fórmulas sin JS, prueba [MathML](https://developer.mozilla.org/docs/Web/MathML/).
- [**Diagramas de Mermaid**](@/blog/shortcodes/index.es.md#diagramas-de-mermaid). Habilitado al configurar `mermaid = true` (~2.5 MB).
- [**Copia de bloques de código con un solo clic**](@/blog/markdown/index.es.md#bloque-de-codigo). Habilitado al configurar `copy_button = true` (~700 bytes).
- [**Mostrar ruta/URL en bloques de código**](@/blog/shortcodes/index.es.md#mostrar-ruta-o-url). Se activa configurando `add_src_to_code_block = true`. (~400 bytes)
- [**Nombres de bloques de código clicables**](@/blog/shortcodes/index.es.md#mostrar-ruta-o-url). Se activa configurando `code_block_name_links = true`. (~400 bytes)
- [**Filtraje por etiquetas** para cuadrículas de tarjetas](@/blog/mastering-tabi-settings/index.es.md#filtrar-proyectos) (p. ej. [proyectos](@/projects/_index.es.md)) (~2KB). Habilitado al configurar `enable_cards_tag_filtering = true`.
Para especificar estas opciones:

View file

@ -1,7 +1,7 @@
+++
title = "No mandatory JavaScript"
date = 2023-01-06
updated = 2024-12-15
updated = 2025-02-15
description = "JavaScript is only used when HTML and CSS aren't enough."
[taxonomies]
@ -28,7 +28,7 @@ The following settings can be specified for posts, sections and globally, follow
- [**KaTeX support**](@/blog/markdown/index.md#katex). Enabled by setting `katex = true` (274 KB). To render math without JS, check out [MathML](https://developer.mozilla.org/docs/Web/MathML/).
- [**Mermaid diagrams**](@/blog/shortcodes/index.md#mermaid-diagrams). Enabled by setting `mermaid = true` (~2.5 MB).
- [**One-click copy of code blocks**](@/blog/markdown/index.md#code-block). Enabled by setting `copy_button = true`. (~700 bytes)
- [**Showing source (path or URL) in code blocks**](@/blog/shortcodes/index.md#show-source-or-path). Enabled by setting `add_src_to_code_block = true`. (~300 bytes)
- [**Clickable code block names**](@/blog/shortcodes/index.md#show-source-or-path). Enabled by setting `code_block_name_links = true`. (~300 bytes)
- [**Tag filtering** for card grids](@/blog/mastering-tabi-settings/index.md#filtering-projects) (e.g. [projects](@/projects/_index.md)) (~2KB). Enabled by setting `enable_cards_tag_filtering = true`.
To specify these settings:

View file

@ -697,13 +697,13 @@ Establir `copy_button = true` afegirà un petit botó de copiar a la part superi
{{ dual_theme_image(light_src="blog/mastering-tabi-settings/img/copy_button_on_code_blocks_light.webp", dark_src="blog/mastering-tabi-settings/img/copy_button_on_code_blocks_dark.webp", alt="Botó de copiar en blocs de codi", full_width=true) }}
### Mostrar ruta/URL en blocs de codi
### Nom del bloc de codi clicable
| Pàgina | Secció | `config.toml` | Segueix la jerarquia | Requereix JavaScript |
|:------:|:-------:|:-------------:|:---------------:|:-------------------:|
| ✅ | ✅ | ✅ | ✅ | ✅ |
Estableix `add_src_to_code_block = true` per habilitar l'ús del [shortcode `add_src_to_code_block`](@/blog/shortcodes/index.ca.md#mostrar-ruta-o-url).
En establir `code_block_name_links = true` s'habiliten els enllaços clicables als noms dels blocs de codi. Consulta la [documentació](@/blog/shortcodes/index.ca.md#mostrar-ruta-o-url) per veure exemples i ús.
### Forçar blocs de codi d'esquerra a dreta

View file

@ -698,13 +698,13 @@ Establecer `copy_button = true` añadirá un pequeño botón de copiar en la par
{{ dual_theme_image(light_src="blog/mastering-tabi-settings/img/copy_button_on_code_blocks_light.webp", dark_src="blog/mastering-tabi-settings/img/copy_button_on_code_blocks_dark.webp", alt="Botón de copiar en bloques de código", full_width=true) }}
### Mostrar ruta/URL en bloques de código
### Nombres de bloques de código clicables
| Página | Sección | `config.toml` | Sigue la jerarquía | Requiere JavaScript |
|:------:|:-------:|:-------------:|:---------------:|:-------------------:|
| ✅ | ✅ | ✅ | ✅ | ✅ |
Establece `add_src_to_code_block = true` para habilitar el uso del [shortcode `add_src_to_code_block`](@/blog/shortcodes/index.es.md#mostrar-ruta-o-url).
Establece `code_block_name_links = true` para habilitan los enlaces clickables en los nombres de bloques de código. Consulta la [documentación](@/blog/shortcodes/index.es.md#mostrar-ruta-o-url) para ver ejemplos y uso.
### Forzar bloques de código de izquierda a derecha

View file

@ -708,13 +708,13 @@ Setting `copy_button = true` will add a small copy button to the top right of co
{{ dual_theme_image(light_src="blog/mastering-tabi-settings/img/copy_button_on_code_blocks_light.webp", dark_src="blog/mastering-tabi-settings/img/copy_button_on_code_blocks_dark.webp" alt="Copy button on code blocks", full_width=true) }}
### Source/Path on Code Blocks
### Clickable Code Block Names
| Page | Section | `config.toml` | Follows Hierarchy | Requires JavaScript |
|:----:|:-------:|:-------------:|:-----------------:|:-------------------:|
| ✅ | ✅ | ✅ | ✅ | ✅ |
Setting `add_src_to_code_block = true` enables the use of the [`add_src_to_code_block` shortcode](@/blog/shortcodes/index.md#show-source-or-path).
Setting `code_block_name_links = true` enables URLs in code block names to become clickable links. Check out the [documentation](@/blog/shortcodes/index.md#show-source-or-path) for examples and usage.
### Force Code Blocks LTR

View file

@ -1,6 +1,7 @@
+++
title = "Guia completa sobre sèries"
date = 2024-11-08
updated = 2025-02-15
description = "Aprèn a organitzar les teves publicacions en sèries seqüencials, perfectes per a tutorials, cursos i històries de diverses parts."
[taxonomies]
@ -48,9 +49,7 @@ flowchart
2. Crea `_index.md` al directori de la sèrie
3. Configura el front matter de `_index.md`:
{{ add_src_to_code_block(src="series/_index.md") }}
```toml
```toml,name=series/_index.md
title = "Aprenent Rust"
template = "series.html"
sort_by = "slug"
@ -154,9 +153,7 @@ Aquesta configuració segueix [la jerarquia](@/blog/mastering-tabi-settings/inde
Els articles d'una sèrie poden tenir seccions automàtiques d'introducció i conclusió. Aquestes es configuren al `_index.md` de la teva sèrie. Un exemple bàsic:
{{ add_src_to_code_block(src="series/_index.md") }}
```toml
```toml,name=series/_index.md
[extra.series_intro_templates]
default = "Aquest article és part de la sèrie $SERIES_HTML_LINK."
@ -177,9 +174,7 @@ El sistema de sèries utilitza diferents plantilles segons la posició de l'arti
El sistema determina automàticament quina plantilla utilitzar segons la posició de l'article. Les plantilles es defineixen a la configuració de la sèrie (`_index.md`), com `extra.series_intro_templates` i `extra.series_outro_templates`:
{{ add_src_to_code_block(src="series/_index.md") }}
```toml
```toml,name=series/_index.md
[extra.series_intro_templates]
next_only = "Benvingut a la part 1! Següent: $NEXT_HTML_LINK"
middle = "Anterior: $PREV_HTML_LINK | Següent: $NEXT_HTML_LINK"
@ -285,9 +280,7 @@ Hi ha tres tipus de variables:
{{ admonition(type="tip", title="Variables HTML vs text", text="Utilitza variables HTML (que acaben en `_HTML_LINK`) quan vulguis enllaços preparats per usar. Utilitza variables de text (que acaben en `_TITLE` o `_PERMALINK`) quan vulguis més control sobre el format.") }}
{{ add_src_to_code_block(src="series/_index.md") }}
```toml
```toml,name=series/_index.md
# Introducció
[extra.series_intro_templates]
next_only = """
@ -351,9 +344,7 @@ Les plantilles de sèries admeten variables personalitzades per incloure informa
1. Primer, defineix els teus **marcadors** a la configuració de la teva sèrie (`_index.md`):
{{ add_src_to_code_block(src="series/_index.md") }}
```toml
```toml,name=series/_index.md
[extra]
series = true
series_template_placeholders = ["$POSITION", "$TOPIC", "$DIFFICULTY"]
@ -361,9 +352,7 @@ series_template_placeholders = ["$POSITION", "$TOPIC", "$DIFFICULTY"]
2. Després, a cada article de la sèrie, proporciona els valors per a aquests marcadors a `series_template_variables`:
{{ add_src_to_code_block(src="series/article.md") }}
```toml
```toml,name=series/article.md
[extra.series_template_variables]
position = "primer"
topic = "Variables i tipus"
@ -374,9 +363,7 @@ difficulty = "Principiant"
Pots usar les teves variables personalitzades a qualsevol plantilla, juntament amb les variables integrades:
{{ add_src_to_code_block(src="series/_index.md") }}
```toml
```toml,name=series/_index.md
[extra.series_intro_templates]
default = """
Aquest és l'article $POSITION a $SERIES_HTML_LINK.
@ -389,9 +376,7 @@ Nivell de dificultat: $DIFFICULTY
### Exemple amb variables personalitzades
{{ add_src_to_code_block(src="series/_index.md") }}
```toml
```toml,name=series/_index.md
# A la configuració de la sèrie.
[extra]
series = true
@ -404,9 +389,7 @@ series_intro_templates.default = """
"""
```
{{ add_src_to_code_block(src="series/02-learning-rust/index.md") }}
```toml
```toml,name=series/02-learning-rust/index.md
# En un article de la sèrie.
[extra.series_template_variables]
learning_time = "30 minuts"

View file

@ -1,6 +1,7 @@
+++
title = "Guía completa sobre series"
date = 2024-11-08
updated = 2025-02-15
description = "Aprende a organizar tus publicaciones en series secuenciales, perfectas para tutoriales, cursos e historias de varias partes."
[taxonomies]
@ -48,9 +49,7 @@ flowchart
2. Crea `_index.md` en el directorio de la serie
3. Configura el front matter de `_index.md`:
{{ add_src_to_code_block(src="series/_index.md") }}
```toml
```toml,name=series/_index.md
title = "Aprendiendo Rust"
template = "series.html"
sort_by = "slug"
@ -154,9 +153,7 @@ Esta configuración sigue [la jerarquía](@/blog/mastering-tabi-settings/index.e
Los artículos de una serie pueden tener secciones automáticas de introducción y conclusión. Estas se configuran en el `_index.md` de tu serie. Un ejemplo básico:
{{ add_src_to_code_block(src="series/_index.md") }}
```toml
```toml,name=series/_index.md
[extra.series_intro_templates]
default = "Este artículo es parte de la serie $SERIES_HTML_LINK."
@ -177,9 +174,7 @@ El sistema de series usa diferentes plantillas según la posición del artículo
El sistema determina automáticamente qué plantilla usar según la posición del artículo. Las plantillas se definen en la configuración de la serie (`_index.md`), como `extra.series_intro_templates` y `extra.series_outro_templates`:
{{ add_src_to_code_block(src="series/_index.md") }}
```toml
```toml,name=series/_index.md
[extra.series_intro_templates]
next_only = "¡Bienvenido a la parte 1! Siguiente: $NEXT_HTML_LINK"
middle = "Anterior: $PREV_HTML_LINK | Siguiente: $NEXT_HTML_LINK"
@ -285,9 +280,7 @@ Hay tres tipos de variables:
{{ admonition(type="tip", title="Variables HTML vs texto", text="Usa variables HTML (que terminan en `_HTML_LINK`) cuando quieras enlaces listos para usar. Usa variables de texto (que terminan en `_TITLE` o `_PERMALINK`) cuando quieras más control sobre el formato.") }}
{{ add_src_to_code_block(src="series/_index.md") }}
```toml
```toml,name=series/_index.md
# Introducción.
[extra.series_intro_templates]
next_only = """
@ -351,9 +344,7 @@ Las plantillas de series admiten variables personalizadas para incluir informaci
1. Primero, define tus **marcadores** en la configuración de tu serie (`_index.md`):
{{ add_src_to_code_block(src="series/_index.md") }}
```toml
```toml,name=series/_index.md
[extra]
series = true
series_template_placeholders = ["$POSITION", "$TOPIC", "$DIFFICULTY"]
@ -361,9 +352,7 @@ series_template_placeholders = ["$POSITION", "$TOPIC", "$DIFFICULTY"]
2. Luego, en cada artículo de la serie, proporciona los valores para estos marcadores en `series_template_variables`:
{{ add_src_to_code_block(src="series/article.md") }}
```toml
```toml,name=series/article.md
[extra.series_template_variables]
position = "primero"
topic = "Variables y tipos"
@ -374,9 +363,7 @@ difficulty = "Principiante"
Puedes usar tus variables personalizadas en cualquier plantilla, junto con las variables integradas:
{{ add_src_to_code_block(src="series/_index.md") }}
```toml
```toml,name=series/_index.md
[extra.series_intro_templates]
default = """
Este es el artículo $POSITION en $SERIES_HTML_LINK.
@ -389,9 +376,7 @@ Nivel de dificultad: $DIFFICULTY
### Ejemplo con variables personalizadas
{{ add_src_to_code_block(src="series/_index.md") }}
```toml
```toml,name=series/_index.md
# En la configuración de la serie.
[extra]
series = true
@ -404,9 +389,7 @@ series_intro_templates.default = """
"""
```
{{ add_src_to_code_block(src="series/02-learning-rust/index.md") }}
```toml
```toml,name=series/02-learning-rust/index.md
# En un artículo de la serie.
[extra.series_template_variables]
learning_time = "30 minutos"

View file

@ -1,6 +1,7 @@
+++
title = "A Complete Guide to Series"
date = 2024-11-08
updated = 2025-02-15
description = "Learn how to organize your posts into sequential series, perfect for tutorials, courses, and multi-part stories."
[taxonomies]
@ -48,9 +49,7 @@ flowchart
2. Create `_index.md` in the series directory.
3. Set up the `_index.md` front matter:
{{ add_src_to_code_block(src="series/_index.md") }}
```toml
```toml,name=series/_index.md
title = "Learning Rust"
template = "series.html"
sort_by = "slug"
@ -154,9 +153,7 @@ This setting follows [the hierarchy](@/blog/mastering-tabi-settings/index.md#set
Series articles can have automatic introduction and conclusion sections. These are configured in your series' `_index.md`. A basic example:
{{ add_src_to_code_block(src="series/_index.md") }}
```toml
```toml,name=series/_index.md
[extra.series_intro_templates]
default = "This article is part of the $SERIES_HTML_LINK series."
@ -177,9 +174,7 @@ The series system uses different templates based on an article's position in the
The system automatically determines which template to use based on the article's position. The templates are defined in the series configuration (`_index.md`), as `extra.series_intro_templates` and `extra.series_outro_templates`.:
{{ add_src_to_code_block(src="series/_index.md") }}
```toml
```toml,name=series/_index.md
[extra.series_intro_templates]
next_only = "Welcome to part 1! Next up: $NEXT_HTML_LINK"
middle = "Previous: $PREV_HTML_LINK | Next: $NEXT_HTML_LINK"
@ -285,9 +280,7 @@ There are three types of variables:
{{ admonition(type="tip", title="HTML vs text variables", text="Use HTML variables (ending in `_HTML_LINK`) when you want ready-made links. Use text variables (ending in `_TITLE` or `_PERMALINK`) when you want more control over the formatting.") }}
{{ add_src_to_code_block(src="series/_index.md") }}
```toml
```toml,name=series/_index.md
# Introduction.
[extra.series_intro_templates]
next_only = """
@ -351,9 +344,7 @@ Series templates support custom variables for additional information you want to
1. First, define your **placeholders** in your series configuration (`_index.md`):
{{ add_src_to_code_block(src="series/_index.md") }}
```toml
```toml,name=series/_index.md
[extra]
series = true
series_template_placeholders = ["$POSITION", "$TOPIC", "$DIFFICULTY"]
@ -361,9 +352,7 @@ series_template_placeholders = ["$POSITION", "$TOPIC", "$DIFFICULTY"]
2. Then, in each series article, provide the values for these placeholders in `series_template_variables`:
{{ add_src_to_code_block(src="series/article.md") }}
```toml
```toml,name=series/article.md
[extra.series_template_variables]
position = "first"
topic = "Variables and Types"
@ -374,9 +363,7 @@ difficulty = "Beginner"
You can use your custom variables in any template, alongside the built-in variables:
{{ add_src_to_code_block(src="series/_index.md") }}
```toml
```toml,name=series/_index.md
[extra.series_intro_templates]
default = """
This is the $POSITION article in $SERIES_HTML_LINK.
@ -389,9 +376,7 @@ Difficulty level: $DIFFICULTY
### Example with Custom Variables
{{ add_src_to_code_block(src="series/_index.md") }}
```toml
```toml,name=series/_index.md
# In the series configuration.
[extra]
series = true
@ -404,9 +389,7 @@ series_intro_templates.default = """
"""
```
{{ add_src_to_code_block(src="series/02-learning-rust/index.md") }}
```toml
```toml,name=series/02-learning-rust/index.md
# In an article of the series.
[extra.series_template_variables]
learning_time = "30 minutes"

View file

@ -1,7 +1,7 @@
+++
title = "Shortcodes personalitzats"
date = 2023-02-19
updated = 2024-12-28
updated = 2025-02-15
description = "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."
[taxonomies]
@ -11,7 +11,7 @@ tags = ["funcionalitat", "shortcodes"]
toc = true
toc_levels = 2
quick_navigation_buttons = true
add_src_to_code_block = true
code_block_name_links = true
mermaid = true
social_media_card = "social_cards/ca_blog_shortcodes.jpg"
+++
@ -191,23 +191,55 @@ Tots els altres shortcodes d'imatges poden utilizar l'amplada completa assignant
### 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](#text-remot).
Pots mostrar una ruta o URL per a un bloc de codi utilitzant la sintaxi nativa de Zola:
{{ admonition(type="warning", title="IMPORTANT", text="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`.") }}
{{ aside(text="Requereix Zola 0.20.0 o superior.") }}
{{ add_src_to_code_block(src="https://github.com/welpo/doteki/blob/main/.gitignore") }}
````
```rust,name=src/main.rs
fn main() {
println!("Hola, món!");
}
```
````
```.gitignore
{{ remote_text(src="https://raw.githubusercontent.com/welpo/doteki/main/.gitignore") }}
Això renderitza:
```rust,name=src/main.rs
fn main() {
println!("Hola, món!");
}
```
Si estableixes el `name` com una URL (és a dir, comença amb `http` o `https`), pots convertir-lo en un enllaç clicable. Això és particularment útil quan s'utilitza juntament amb el [shortcode de text remot](#text-remot).
{{ admonition(type="warning", title="JavaScript necessari", text="La funció d'URLs clicables requereix JavaScript. Per habilitar-la, configura `code_block_name_links = true` a la secció `[extra]` de la teva pàgina, secció, o `config.toml`.") }}
```.gitignore,name=https://github.com/welpo/doteki/blob/main/.gitignore
__pycache__/
*coverage*
.vscode/
dist/
```
### Suport de shortcode heretat
El shortcode `add_src_to_code_block` segueix funcionant per retrocompatibilitat però serà descontinuat en una versió futura. Si us plau, utilitza la sintaxi nativa de Zola:
```
# Forma antiga (descontinuada):
{{/* add_src_to_code_block(src="ruta/al/fitxer.rs") */}}
# Forma nova (recomanada):
```rust,name=ruta/al/fitxer.rs
```
#### Ús
````
{{/* add_src_to_code_block(src="https://github.com/welpo/doteki/blob/main/.gitignore") */}}
```.gitignore
__pycache__/
**pycache**/
*coverage*
.vscode/
dist/

View file

@ -1,7 +1,7 @@
+++
title = "Shortcodes personalizados"
date = 2023-02-19
updated = 2024-12-28
updated = 2025-02-15
description = "Este tema incluye algunos shortcodes personalizados útiles que puedes utilizar para mejorar tus publicaciones. Puedes mostrar imágenes que se adapten a los temas claro y oscuro, dar formato a una sección de referencias con un aspecto profesional, y más."
[taxonomies]
@ -11,7 +11,7 @@ tags = ["funcionalidad", "shortcodes"]
toc = true
toc_levels = 2
quick_navigation_buttons = true
add_src_to_code_block = true
code_block_name_links = true
mermaid = true
social_media_card = "social_cards/es_blog_shortcodes.jpg"
+++
@ -190,28 +190,48 @@ Todos los otros shortcodes de imágenes pueden usar el ancho completo asignando
### 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](#texto-remoto).
Puedes mostrar una ruta o URL para un bloque de código usando la sintaxis nativa de Zola:
{{ add_src_to_code_block(src="https://github.com/welpo/doteki/blob/main/.gitignore") }}
```.gitignore
{{ remote_text(src="https://raw.githubusercontent.com/welpo/doteki/main/.gitignore") }}
```
{{ admonition(type="warning", title="IMPORTANT", text="Esta característica requiere JavaScript. Para habilitarla, configura `add_src_to_code_block = true` en la sección `[extra]` de tu página, sección, o `config.toml`.") }}
#### Uso
{{ aside(text="Requiere Zola 0.20.0 o superior.") }}
````
{{/* add_src_to_code_block(src="https://github.com/welpo/doteki/blob/main/.gitignore") */}}
```rust,name=src/main.rs
fn main() {
println!("¡Hola, mundo!");
}
```
````
```.gitignore
Esto renderiza:
```rust,name=src/main.rs
fn main() {
println!("¡Hola, mundo!");
}
```
Si estableces el `name` como una URL (es decir, comienza con `http` o `https`), puedes convertirlo en un enlace clickable. Esto es particularmente útil cuando se usa junto con el [shortcode de texto remoto](#texto-remoto).
{{ admonition(type="warning", title="JavaScript requerido", text="La función de URLs clickables requiere JavaScript. Para habilitarla, configura `code_block_name_links = true` en la sección `[extra]` de tu página, sección, o `config.toml`.") }}
```.gitignore,name=https://github.com/welpo/doteki/blob/main/.gitignore
__pycache__/
*coverage*
.vscode/
dist/
```
````
### Soporte de shortcode heredado
El shortcode `add_src_to_code_block` sigue funcionando por retrocompatibilidad, pero será descontinuado en una versión futura. Por favor, usa la sintaxis nativa de Zola:
```
# Forma antigua (descontinuada):
{{/* add_src_to_code_block(src="ruta/al/archivo.rs") */}}
# Forma nueva (recomendada):
```rust,name=ruta/al/archivo.rs
```
## Shortcodes de texto

View file

@ -1,7 +1,7 @@
+++
title = "Custom shortcodes"
date = 2023-02-19
updated = 2024-12-28
updated = 2025-02-15
description = "This theme includes some useful custom shortcodes that you can use to enhance your posts. Whether you want to display images that adapt to light and dark themes, or format a professional-looking reference section, these custom shortcodes have got you covered."
[taxonomies]
@ -11,7 +11,7 @@ tags = ["showcase", "shortcodes"]
toc = true
toc_levels = 2
quick_navigation_buttons = true
add_src_to_code_block = true
code_block_name_links = true
mermaid = true
social_media_card = "social_cards/blog_shortcodes.jpg"
+++
@ -191,28 +191,48 @@ All other image shortcodes can be made into full-width by setting the optional p
### Show source or path
Display a path or URL on the next code block found. If it starts with "http", it will become a link. Particularly useful when used in conjunction with the [remote text shortcode](#remote-text).
You can display a path or URL for a code block using Zola's native syntax:
{{ add_src_to_code_block(src="https://github.com/welpo/doteki/blob/main/.gitignore") }}
```.gitignore
{{ remote_text(src="https://raw.githubusercontent.com/welpo/doteki/main/.gitignore") }}
```
{{ admonition(type="warning", title="IMPORTANT", text="This feature requires JavaScript. To enable it, set `add_src_to_code_block = true` on the `[extra]` section of your page, section, or `config.toml`.") }}
#### Usage
{{ aside(text="Requires Zola 0.20.0 or later.") }}
````
{{/* add_src_to_code_block(src="https://github.com/welpo/doteki/blob/main/.gitignore") */}}
```rust,name=src/main.rs
fn main() {
println!("Hello, world!");
}
```
````
```.gitignore
This renders:
```rust,name=src/main.rs
fn main() {
println!("Hello, world!");
}
```
If you set the `name` to a URL (i.e. it starts with `http` or `https`), you can turn it into a clickable link. This is particularly useful when used in conjunction with the [remote text shortcode](#remote-text).
{{ admonition(type="warning", title="JavaScript required", text="The clickable URL feature requires JavaScript. To enable it, set `code_block_name_links = true` on the `[extra]` section of your page, section, or `config.toml`.") }}
```.gitignore,name=https://github.com/welpo/doteki/blob/main/.gitignore
__pycache__/
*coverage*
.vscode/
dist/
```
````
### Legacy shortcode support
The `add_src_to_code_block` shortcode is still supported for backward compatibility but will be deprecated in a future release. Please use Zola's native syntax shown above instead:
```
# Old way (deprecated):
{{/* add_src_to_code_block(src="path/to/file.rs") */}}
# New way (preferred):
```rust,name=path/to/file.rs
```
## Text shortcodes

View file

@ -10,7 +10,6 @@ tags = ["GitHub Actions", "automatització", "Python"]
local_image = "projects/doteki/doteki_logo.webp"
social_media_card = "social_cards/projects_doteki.jpg"
canonical_url = "https://osc.garden/ca/projects/doteki/"
add_src_to_code_block = true
+++
**dōteki** actualitza el teu perfil de GitHub automàticament. Afegeix les teves últimes publicacions del blog, la música que escoltes o qualsevol altre contingut dinàmic mitjançant plugins.
@ -23,16 +22,14 @@ add_src_to_code_block = true
1. Afegeix marcadors al teu README:
{{ add_src_to_code_block(src="README.md") }}
```md
```md,name=README.md
<!-- blog start -->
<!-- blog end -->
```
2. Configura què hi va:
{{ add_src_to_code_block(src="doteki.toml") }}
```toml
```toml,name=doteki.toml
[sections.blog]
plugin = "feed"
url = "https://osc.garden/atom.xml" # Substitueix amb el teu feed.

View file

@ -10,7 +10,6 @@ tags = ["GitHub Actions", "automatización", "Python"]
local_image = "projects/doteki/doteki_logo.webp"
social_media_card = "social_cards/projects_doteki.jpg"
canonical_url = "https://osc.garden/es/projects/doteki/"
add_src_to_code_block = true
+++
**dōteki** actualiza tu perfil de GitHub automáticamente. Añade tus últimas publicaciones del blog, la música que escuchas o cualquier otro contenido dinámico mediante plugins.
@ -23,16 +22,14 @@ add_src_to_code_block = true
1. Añade marcadores a tu README:
{{ add_src_to_code_block(src="README.md") }}
```md
```md,name=README.md
<!-- blog start -->
<!-- blog end -->
```
2. Configura qué va ahí:
{{ add_src_to_code_block(src="doteki.toml") }}
```toml
```toml,name=doteki.toml
[sections.blog]
plugin = "feed"
url = "https://osc.garden/atom.xml" # Reemplaza con tu feed.

View file

@ -10,7 +10,6 @@ tags = ["GitHub Actions", "automation", "Python"]
local_image = "projects/doteki/doteki_logo.webp"
social_media_card = "social_cards/projects_doteki.jpg"
canonical_url = "https://osc.garden/projects/doteki/"
add_src_to_code_block = true
+++
**dōteki** updates your GitHub profile README automatically. Add your latest blog posts, music you're listening to, or any other dynamic content using plugins.
@ -23,18 +22,14 @@ add_src_to_code_block = true
1. Add markers to your README:
{{ add_src_to_code_block(src="README.md") }}
```md
```md,name=README.md
<!-- blog start -->
<!-- blog end -->
```
2. Configure what goes there:
{{ add_src_to_code_block(src="doteki.toml") }}
```toml
```toml,name=doteki.toml
[sections.blog]
plugin = "feed"
url = "https://osc.garden/atom.xml" # Replace with your feed.

View file

@ -63,6 +63,27 @@ pre {
font-size: 0.8rem; // Fits ~77 characters.
}
// Supports both native Zola way of adding src, and old shortcode-based logic.
// See: https://github.com/welpo/tabi/pull/489
&::after,
code .source-path {
display: block;
position: absolute;
top: 0;
inset-inline-end: 1.3rem;
padding-top: 0.3rem;
padding-inline-end: 1.3rem;
max-width: calc(100% - 14em);
height: 0.9rem;
overflow: hidden;
content: attr(data-name);
color: var(--hover-color);
font-size: 0.65rem;
text-align: end;
text-overflow: ellipsis;
white-space: nowrap;
}
code {
display: block;
border: 0rem;
@ -89,23 +110,6 @@ pre {
text-align: start;
text-transform: uppercase;
}
.source-path {
display: block;
position: absolute;
top: 0;
inset-inline-end: 1.3rem;
padding-top: 0.3rem;
padding-inline-end: 1.3rem;
max-width: calc(100% - 14em);
height: 0.9rem;
overflow: hidden;
color: var(--hover-color);
font-size: 0.65rem;
text-align: end;
text-overflow: ellipsis;
white-space: nowrap;
}
}
}

View file

@ -1,20 +0,0 @@
document.addEventListener("DOMContentLoaded", function() {
document.querySelectorAll('.code-source').forEach(function(marker) {
let sourceUrl = marker.getAttribute('data-source');
let nextPre = marker.nextElementSibling;
if (nextPre && nextPre.tagName === 'PRE') {
let codeElement = nextPre.querySelector('code');
if (codeElement) {
// Use a span element for the source path if it's not a link.
let sourceElement = document.createElement(sourceUrl.startsWith('http') ? 'a' : 'span');
sourceElement.textContent = sourceUrl;
sourceElement.className = 'source-path';
if (sourceUrl.startsWith('http')) {
sourceElement.href = sourceUrl;
}
codeElement.prepend(sourceElement);
}
}
});
});

View file

@ -1 +0,0 @@
document.addEventListener("DOMContentLoaded",function(){document.querySelectorAll(".code-source").forEach(function(t){var e,n=t.getAttribute("data-source"),t=t.nextElementSibling;t&&"PRE"===t.tagName&&(t=t.querySelector("code"))&&((e=document.createElement(n.startsWith("http")?"a":"span")).textContent=n,e.className="source-path",n.startsWith("http")&&(e.href=n),t.prepend(e))})});

View file

@ -0,0 +1,36 @@
document.addEventListener("DOMContentLoaded", function() {
// Convert URLs in data-name to links.
document.querySelectorAll('code[data-name]').forEach(function(code) {
const name = code.getAttribute('data-name');
if (name.startsWith('http')) {
const link = document.createElement('a');
link.href = name;
link.className = 'source-path';
link.textContent = name;
code.insertBefore(link, code.firstChild);
// Remove data-name to avoid overlap with Zola's native display.
code.removeAttribute('data-name');
code.parentElement?.removeAttribute('data-name');
}
});
// Legacy support for old shortcode. https://github.com/welpo/tabi/pull/489
document.querySelectorAll('.code-source').forEach(function(marker) {
const sourceUrl = marker.getAttribute('data-source');
const nextPre = marker.nextElementSibling;
if (nextPre?.tagName === 'PRE') {
const code = nextPre.querySelector('code');
if (code) {
if (sourceUrl.startsWith('http')) {
const link = document.createElement('a');
link.href = sourceUrl;
link.className = 'source-path';
link.textContent = sourceUrl;
code.insertBefore(link, code.firstChild);
} else {
code.setAttribute('data-name', sourceUrl);
}
}
}
});
});

1
static/js/codeBlockNameLinks.min.js vendored Normal file
View file

@ -0,0 +1 @@
document.addEventListener("DOMContentLoaded",function(){document.querySelectorAll("code[data-name]").forEach(function(e){var t,a=e.getAttribute("data-name");a.startsWith("http")&&((t=document.createElement("a")).href=a,t.className="source-path",t.textContent=a,e.insertBefore(t,e.firstChild),e.removeAttribute("data-name"),e.parentElement?.removeAttribute("data-name"))}),document.querySelectorAll(".code-source").forEach(function(e){var t,a=e.getAttribute("data-source");"PRE"===(e=e.nextElementSibling)?.tagName&&(e=e.querySelector("code"))&&(a.startsWith("http")?((t=document.createElement("a")).href=a,t.className="source-path",t.textContent=a,e.insertBefore(t,e.firstChild)):e.setAttribute("data-name",a))})});

View file

@ -62,9 +62,12 @@
<script defer src="{{ get_url(path='js/copyCodeToClipboard.min.js', trailing_slash=false) | safe }}"></script>
{%- endif -%}
{# JavaScript to use the "Show source or path" on code blocks shortcode: https://welpo.github.io/tabi/blog/shortcodes/#show-source-or-path #}
{%- if macros_settings::evaluate_setting_priority(setting="add_src_to_code_block", page=page_s, section=section_s, default_global_value=false) == "true" -%}
<script defer src="{{ get_url(path='js/addSrcToCodeBlock.min.js', trailing_slash=false) | safe }}"></script>
{# JavaScript to make code block names clickable when they are URLs: https://welpo.github.io/tabi/blog/shortcodes/#show-source-or-path #}
{# Note: "add_src_to_code_block" is deprecated in favor of "code_block_name_links". It will be removed in a future release. #}
{# See https://github.com/welpo/tabi/pull/489 #}
{%- if macros_settings::evaluate_setting_priority(setting="code_block_name_links", page=page_s, section=section_s, default_global_value=false) == "true"
or macros_settings::evaluate_setting_priority(setting="add_src_to_code_block", page=page_s, section=section_s, default_global_value=false) == "true" -%}
<script defer src="{{ get_url(path='js/codeBlockNameLinks.min.js', trailing_slash=false) | safe }}"></script>
{%- endif -%}
{# Add backlinks to footnotes #}

View file

@ -87,9 +87,9 @@ show_remote_source = true # Defaults to true.
# Can be set at page or section levels, following the hierarchy: page > section > config. See: https://welpo.github.io/tabi/blog/mastering-tabi-settings/#settings-hierarchy
copy_button = true
# Loads the necessary JavaScript (~400 bytes) to use the "Show source or path" shortcode: https://welpo.github.io/tabi/blog/shortcodes/#show-source-or-path
# Make code block names clickable if they are URLs (loads ~400 bytes of JavaScript).
# Can be set at page or section levels, following the hierarchy: page > section > config. See: https://welpo.github.io/tabi/blog/mastering-tabi-settings/#settings-hierarchy
add_src_to_code_block = false
code_block_name_links = false
# Force left-to-right (LTR) direction for code blocks.
# Set to false to allow code to follow the document's natural direction.