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/es/blog/shortcodes/index.html
GitHub Actions f1040b2aa6 Deploy welpo/tabi to welpo/tabi:gh-pages
2025-11-22 16:30:18 +00:00

124 lines
No EOL
56 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=es><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 personalizados</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="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." name=description><meta content="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." property=og:description><meta content="Shortcodes personalizados" property=og:title><meta content=article property=og:type><meta content="https://welpo.github.io/tabi/blog/shortcodes/social_cards/es_blog_shortcodes.jpg?h=cd6629c82b6c84e79f8d" 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/es_blog_shortcodes.jpg?h=cd6629c82b6c84e79f8d" 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/es/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><script src="https://welpo.github.io/tabi/js/searchElasticlunr.min.js?h=3626c0ef99daa745b31e" defer></script><script defer src=https://welpo.github.io/tabi/js/lunr/lunrStemmerSupport.min.js></script><script defer src=https://welpo.github.io/tabi/js/lunr/lunr.es.min.js></script><body><a href=#main-content id=skip-link>Saltar al contenido</a><header><nav class=navbar><div class=nav-title><a class=home-title href=https://welpo.github.io/tabi/es/>~/tabi</a></div><div class=nav-navs><ul><li><a class="nav-links no-hover-padding" href=https://welpo.github.io/tabi/es/blog/>blog </a><li><a class="nav-links no-hover-padding" href=https://welpo.github.io/tabi/es/archive/>archivo </a><li><a class="nav-links no-hover-padding" href=https://welpo.github.io/tabi/es/tags/>etiquetas </a><li><a class="nav-links no-hover-padding" href=https://welpo.github.io/tabi/es/projects/>proyectos </a><li class=menu-icons-container><ul class=menu-icons-group><li class="js menu-icon"><div aria-label="Haz clic o usa $SHORTCUT para abrir la búsqueda" class="search-icon interactive-icon" title="Haz clic o usa $SHORTCUT para abrir la búsqueda" id=search-button role=button tabindex=0><svg viewbox="0 -960 960 960" xmlns=http://www.w3.org/2000/svg><path d="M784-120 532-372q-30 24-69 38t-83 14q-109 0-184.5-75.5T120-580q0-109 75.5-184.5T380-840q109 0 184.5 75.5T640-580q0 44-14 83t-38 69l252 252-56 56ZM380-400q75 0 127.5-52.5T560-580q0-75-52.5-127.5T380-760q-75 0-127.5 52.5T200-580q0 75 52.5 127.5T380-400Z"/></svg></div><li class=language-switcher><details class=dropdown><summary aria-label="Selección de idioma" title="Selección de idioma" aria-haspopup=true role=button><div class=language-switcher-icon></div></summary> <div class=dropdown-content role=menu>Español<a aria-label=العربية href=https://welpo.github.io/tabi/ar/blog/shortcodes/ lang=ar role=menuitem>العربية</a><a aria-label=English href=https://welpo.github.io/tabi/blog/shortcodes/ lang=en role=menuitem>English</a><a aria-label=Català href=https://welpo.github.io/tabi/ca/blog/shortcodes/ lang=ca role=menuitem>Català</a></div></details><li class="theme-switcher-wrapper js"><div aria-label="Cambiar a modo oscuro" title="Cambiar a modo oscuro/claro" aria-pressed=false class=theme-switcher role=button tabindex=0></div><div aria-label="Restablecer modo a configuración predeterminada" class="theme-resetter arrow" title="Restablecer modo a configuración predeterminada" 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 personalizados</h1><a class="u-url u-uid" href=https://welpo.github.io/tabi/es/blog/shortcodes/></a><ul class=meta><li><time class=dt-published datetime=2023-02-19>19 feb 2023</time><li title="960 palabras"><span aria-hidden=true class=separator>•</span>5 mins de lectura<li class=tag><span aria-hidden=true class=separator>•</span>Etiquetas: <li class=tag><a class=p-category href=https://welpo.github.io/tabi/es/tags/funcionalidad/>funcionalidad</a>, <li class=tag><a class=p-category href=https://welpo.github.io/tabi/es/tags/shortcodes/>shortcodes</a></ul><ul class="meta last-updated"><li><time class=dt-updated datetime=2025-10-21>Actualizado el 21 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.es.md>Ver cambios</a></ul><div class=toc-container><h3>Tabla de contenido</h3><ul><li><a href=https://welpo.github.io/tabi/es/blog/shortcodes/#shortcodes-de-diagramas>Shortcodes de diagramas</a> <ul><li><a href=https://welpo.github.io/tabi/es/blog/shortcodes/#diagramas-de-mermaid>Diagramas de Mermaid</a></ul><li><a href=https://welpo.github.io/tabi/es/blog/shortcodes/#shortcodes-de-imagen>Shortcodes de imagen</a> <ul><li><a href=https://welpo.github.io/tabi/es/blog/shortcodes/#imagenes-de-doble-tema>Imágenes de doble tema</a><li><a href=https://welpo.github.io/tabi/es/blog/shortcodes/#imagen-invertible>Imagen invertible</a><li><a href=https://welpo.github.io/tabi/es/blog/shortcodes/#imagen-atenuable>Imagen atenuable</a><li><a href=https://welpo.github.io/tabi/es/blog/shortcodes/#cambio-de-imagen-al-pasar-el-cursor>Cambio de imagen al pasar el cursor</a><li><a href=https://welpo.github.io/tabi/es/blog/shortcodes/#cambio-de-imagen-via-click>Cambio de imagen vía click</a><li><a href=https://welpo.github.io/tabi/es/blog/shortcodes/#imagen-a-ancho-completo>Imagen a ancho completo</a></ul><li><a href=https://welpo.github.io/tabi/es/blog/shortcodes/#shortcodes-sociales>Shortcodes sociales</a> <ul><li><a href=https://welpo.github.io/tabi/es/blog/shortcodes/#iine>iine</a></ul><li><a href=https://welpo.github.io/tabi/es/blog/shortcodes/#shortcodes-de-codigo>Shortcodes de código</a> <ul><li><a href=https://welpo.github.io/tabi/es/blog/shortcodes/#mostrar-ruta-o-url>Mostrar ruta o URL</a><li><a href=https://welpo.github.io/tabi/es/blog/shortcodes/#soporte-de-shortcode-heredado>Soporte de shortcode heredado</a></ul><li><a href=https://welpo.github.io/tabi/es/blog/shortcodes/#shortcodes-de-texto>Shortcodes de texto</a> <ul><li><a href=https://welpo.github.io/tabi/es/blog/shortcodes/#aside-nota-al-margen>Aside (nota al margen)</a><li><a href=https://welpo.github.io/tabi/es/blog/shortcodes/#texto-remoto>Texto remoto</a><li><a href=https://welpo.github.io/tabi/es/blog/shortcodes/#advertencias>Advertencias</a><li><a href=https://welpo.github.io/tabi/es/blog/shortcodes/#citas-multilenguaje>Citas multilenguaje</a><li><a href=https://welpo.github.io/tabi/es/blog/shortcodes/#referencias-con-sangria-francesa>Referencias con sangría francesa</a><li><a href=https://welpo.github.io/tabi/es/blog/shortcodes/#spoilers>Spoilers</a></ul><li><a href=https://welpo.github.io/tabi/es/blog/shortcodes/#contenedores>Contenedores</a> <ul><li><a href=https://welpo.github.io/tabi/es/blog/shortcodes/#contenedor-ancho>Contenedor ancho</a><li><a href=https://welpo.github.io/tabi/es/blog/shortcodes/#forzar-direccion-del-texto>Forzar dirección del texto</a></ul></ul></div><p class=p-summary hidden>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.<section class="e-content body"><h2 id=shortcodes-de-diagramas><a aria-label="Anchor link for: shortcodes-de-diagramas" class="header-anchor no-hover-padding" href=#shortcodes-de-diagramas><span aria-hidden=true class=link-icon></span></a> Shortcodes de diagramas</h2><h3 id=diagramas-de-mermaid><a aria-label="Anchor link for: diagramas-de-mermaid" class="header-anchor no-hover-padding" href=#diagramas-de-mermaid><span aria-hidden=true class=link-icon></span></a> Diagramas de Mermaid</h3><p><a class=external href=https://github.com/mermaid-js/mermaid>Mermaid</a> es una herramienta de diagramación y gráficos que usa texto y código para generar diagramas. Admite diagramas de flujo, diagramas de secuencia, gráficos de Gantt y más.<p>Para incluir un diagrama Mermaid en tu publicación, sigue estos dos pasos:<ol><li><p>Establece <code>mermaid = true</code> en la sección <code>[extra]</code> del front matter de tu página, sección o <code>config.toml</code>. Esto cargará el JavaScript necesario para renderizar los diagramas.</p><li><p>Usa el shortcode <code>mermaid()</code> para definir tu diagrama. Por ejemplo:</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 DistorsionesCognitivas {
</span><span class="z-text z-plain"> +PensamientoTodoONada()
</span><span class="z-text z-plain"> +Sobregeneralizacion()
</span><span class="z-text z-plain"> +FiltroMental()
</span><span class="z-text z-plain"> +SacarConclusionesPrecipitadas()
</span><span class="z-text z-plain"> }
</span><span class="z-text z-plain"> class PensamientoTodoONada {
</span><span class="z-text z-plain"> +VerEnExtremos()
</span><span class="z-text z-plain"> }
</span><span class="z-text z-plain"> class Sobregeneralizacion {
</span><span class="z-text z-plain"> +GeneralizarDeUnicoEjemplo()
</span><span class="z-text z-plain"> }
</span><span class="z-text z-plain"> class FiltroMental {
</span><span class="z-text z-plain"> +EnfocarseEnNegativo()
</span><span class="z-text z-plain"> }
</span><span class="z-text z-plain"> class SacarConclusionesPrecipitadas {
</span><span class="z-text z-plain"> +HacerSuposiciones()
</span><span class="z-text z-plain"> }
</span><span class="z-text z-plain"> DistorsionesCognitivas *-- PensamientoTodoONada
</span><span class="z-text z-plain"> DistorsionesCognitivas *-- Sobregeneralizacion
</span><span class="z-text z-plain"> DistorsionesCognitivas *-- FiltroMental
</span><span class="z-text z-plain"> DistorsionesCognitivas *-- SacarConclusionesPrecipitadas
</span><span class="z-text z-plain">{% end %}
</span></code></pre><p>El diagrama se renderizará así:</p><noscript><strong>⚠️ JavaScript is required to render the diagram.</strong></noscript><pre class="mermaid invertible-image">
classDiagram
class DistorsionesCognitivas {
+PensamientoTodoONada()
+Sobregeneralizacion()
+FiltroMental()
+SacarConclusionesPrecipitadas()
}
class PensamientoTodoONada {
+VerEnExtremos()
}
class Sobregeneralizacion {
+GeneralizarDeUnicoEjemplo()
}
class FiltroMental {
+EnfocarseEnNegativo()
}
class SacarConclusionesPrecipitadas {
+HacerSuposiciones()
}
DistorsionesCognitivas *-- PensamientoTodoONada
DistorsionesCognitivas *-- Sobregeneralizacion
DistorsionesCognitivas *-- FiltroMental
DistorsionesCognitivas *-- SacarConclusionesPrecipitadas
</pre><p>El shortcode de Mermaid admite dos parámetros:<ul><li><code>invertible</code>: Si se establece en <code>true</code> (por defecto), el diagrama se invertirá en modo oscuro, igual que las <a href=https://welpo.github.io/tabi/es/blog/shortcodes/#imagen-invertible>imágenes invertibles</a>.<li><code>full_width</code>: Permite que el diagrama ocupe el ancho del encabezado. Mira <a href=https://welpo.github.io/tabi/es/blog/shortcodes/#imagen-a-ancho-completo>imagen a ancho completo</a>.</ul><div class="admonition tip"><div class="admonition-icon admonition-icon-tip"></div><div class=admonition-content><strong class=admonition-title>CONSEJO</strong><p>Puedes usar el <a class=external href=https://mermaid.live/>editor de Mermaid</a> para crear y previsualizar tus diagramas.</div></div><h4 id=uso><a aria-label="Anchor link for: uso" class="header-anchor no-hover-padding" href=#uso><span aria-hidden=true class=link-icon></span></a> Uso</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">Tu diagrama Mermaid va aquí. Puedes omitir los parámetros para usar los valores predeterminados.
</span><span class="z-text z-plain">
</span><span class="z-text z-plain">{% end %}
</span></code></pre><h2 id=shortcodes-de-imagen><a aria-label="Anchor link for: shortcodes-de-imagen" class="header-anchor no-hover-padding" href=#shortcodes-de-imagen><span aria-hidden=true class=link-icon></span></a> Shortcodes de imagen</h2><p>Todos los shortcodes de imagen admiten rutas absolutas, rutas relativas, y fuentes remotas en el parámetro <code>src</code>.<p>Todos los shortcodes de imagen tienen los siguientes parámetros opcionales:<ul><li><code>raw_path</code>. Por defecto es <code>false</code>. Si se establece en <code>true</code>, el parámetro <code>src</code> se usará tal cual. Útil para activos ubicados en la misma carpeta que tienen un slug personalizado (ver <a class=external href=https://github.com/getzola/zola/issues/2598>Zola issue #2598</a>).<li><code>inline</code>. Valor predeterminado: <code>false</code>. Si se establece <code>true</code>, la imagen se mostrará en línea con el texto.<li><code>full_width</code>. Valor predeterminado: <code>false</code> (ver <a href=https://welpo.github.io/tabi/es/blog/shortcodes/#imagen-a-ancho-completo>más abajo</a>).<li><code>lazy_loading</code>. Valor predeterminado: <code>true</code>.</ul><h3 id=imagenes-de-doble-tema><a aria-label="Anchor link for: imagenes-de-doble-tema" class="header-anchor no-hover-padding" href=#imagenes-de-doble-tema><span aria-hidden=true class=link-icon></span></a> Imágenes de doble tema</h3><p>Útil si deseas usar una imagen diferente para los temas claro y oscuro:</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=uso-1><a aria-label="Anchor link for: uso-1" class="header-anchor no-hover-padding" href=#uso-1><span aria-hidden=true class=link-icon></span></a> Uso</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=imagen-invertible><a aria-label="Anchor link for: imagen-invertible" class="header-anchor no-hover-padding" href=#imagen-invertible><span aria-hidden=true class=link-icon></span></a> Imagen invertible</h3><p>Ideal para gráficos, dibujos lineales, diagramas… Invierte los colores de la imagen. La imagen de origen se utilizará para el tema claro.</p><img alt="Gráfico 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=uso-2><a aria-label="Anchor link for: uso-2" class="header-anchor no-hover-padding" href=#uso-2><span aria-hidden=true class=link-icon></span></a> Uso</h4><pre class=z-code><code><span class="z-text z-plain">{{ invertible_image(src="img/graph.webp", alt="Gráfico invertible") }}
</span></code></pre><h3 id=imagen-atenuable><a aria-label="Anchor link for: imagen-atenuable" class="header-anchor no-hover-padding" href=#imagen-atenuable><span aria-hidden=true class=link-icon></span></a> Imagen atenuable</h3><p>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.</p><img alt="Fotografía de un desierto, cielo 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=uso-3><a aria-label="Anchor link for: uso-3" class="header-anchor no-hover-padding" href=#uso-3><span aria-hidden=true class=link-icon></span></a> Uso</h4><pre class=z-code><code><span class="z-text z-plain">{{ dimmable_image(src="img/desert_by_oskerwyld.webp", alt="Fotografía de un desierto, cielo celestial") }}
</span></code></pre><h3 id=cambio-de-imagen-al-pasar-el-cursor><a aria-label="Anchor link for: cambio-de-imagen-al-pasar-el-cursor" class="header-anchor no-hover-padding" href=#cambio-de-imagen-al-pasar-el-cursor><span aria-hidden=true class=link-icon></span></a> Cambio de imagen al pasar el cursor</h3><p>La imagen mostrada cambia cuando el usuario pasa el cursor por encima. Útil para comparaciones de antes y después, por ejemplo.<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=uso-4><a aria-label="Anchor link for: uso-4" class="header-anchor no-hover-padding" href=#uso-4><span aria-hidden=true class=link-icon></span></a> Uso</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="Imagen editada", hovered_alt="Toma original") }}
</span></code></pre><h3 id=cambio-de-imagen-via-click><a aria-label="Anchor link for: cambio-de-imagen-via-click" class="header-anchor no-hover-padding" href=#cambio-de-imagen-via-click><span aria-hidden=true class=link-icon></span></a> Cambio de imagen vía click</h3><p>Muestra una imagen y cambia a una diferente al hacer clic. Ideal para destacar diferencias o llamar la atención sobre detalles.<div class=image-toggler-container><input class=image-toggler-toggle id=toggle-img-31334 type=checkbox><label class=image-label for=toggle-img-31334><div class=image-default><img alt="Mojave durante el día" 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 durante la noche" 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=uso-5><a aria-label="Anchor link for: uso-5" class="header-anchor no-hover-padding" href=#uso-5><span aria-hidden=true class=link-icon></span></a> Uso</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 durante el día", toggled_alt="Mojave durante la noche") }}
</span></code></pre><h3 id=imagen-a-ancho-completo><a aria-label="Anchor link for: imagen-a-ancho-completo" class="header-anchor no-hover-padding" href=#imagen-a-ancho-completo><span aria-hidden=true class=link-icon></span></a> Imagen a ancho completo</h3><p>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).<p>Todos los otros shortcodes de imágenes pueden usar el ancho completo asignando el valor <code>true</code> al parámetro opcional <code>full_width</code>.<div class=full-width><img alt="Fotografía de un canal en Á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=uso-6><a aria-label="Anchor link for: uso-6" class="header-anchor no-hover-padding" href=#uso-6><span aria-hidden=true class=link-icon></span></a> Uso</h4><pre class=z-code><code><span class="z-text z-plain">{{ full_width_image(src="img/amsterdam_by_oskerwyld.webp", alt="Fotografía de un canal en Ámsterdam") }}
</span></code></pre><h2 id=shortcodes-sociales><a aria-label="Anchor link for: shortcodes-sociales" class="header-anchor no-hover-padding" href=#shortcodes-sociales><span aria-hidden=true class=link-icon></span></a> Shortcodes sociales</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>Para añadirlo a todas las publicaciones, establece <code>iine = true</code> en la sección <code>[extra]</code> de tu <code>config.toml</code>.</aside><p>Este shortcode te permite añadir botones adicionales de <a class=external href=https://iine.to>iine.to</a> a tus publicaciones, como este:<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=uso-7><a aria-label="Anchor link for: uso-7" class="header-anchor no-hover-padding" href=#uso-7><span aria-hidden=true class=link-icon></span></a> Uso</h4><pre class=z-code><code><span class="z-text z-plain">{{ iine(icon="heart", slug="/post/mi-slug-de-post/like", label="Me gusta esta publicación") }}
</span></code></pre><p>El shortcode acepta los siguientes parámetros opcionales:<ul><li><code>icon</code>: El icono a mostrar. Puede ser <code>heart</code>, <code>thumbs_up</code>, <code>upvote</code>, o cualquier emoji.<li><code>slug</code>: Un identificador único. Por defecto es la ruta de la página actual. Útil si quieres más de un botón en la misma página.<li><code>label</code>: La etiqueta de accesibilidad para el botón. Por defecto es “Me gusta esta publicación”.</ul><h2 id=shortcodes-de-codigo><a aria-label="Anchor link for: shortcodes-de-codigo" class="header-anchor no-hover-padding" href=#shortcodes-de-codigo><span aria-hidden=true class=link-icon></span></a> Shortcodes de código</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>Puedes mostrar una ruta o URL para un bloque de código usando la sintaxis nativa de Zola:<aside><p>Requiere 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, mundo!");
</span><span class="z-text z-plain">}
</span><span class="z-text z-plain">```
</span></code></pre><p>Esto renderiza:<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, mundo!<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 estableces el <code>name</code> como una URL (es decir, comienza con <code>http</code> o <code>https</code>), puedes convertirlo en un enlace clickable. Esto es particularmente útil cuando se usa junto con el <a href=https://welpo.github.io/tabi/es/blog/shortcodes/#texto-remoto>shortcode de texto remoto</a>.<div class="admonition warning"><div class="admonition-icon admonition-icon-warning"></div><div class=admonition-content><strong class=admonition-title>JavaScript requerido</strong><p>La función de URLs clickables requiere JavaScript. Para habilitarla, configura <code>code_block_name_links = true</code> en la sección <code>[extra]</code> de tu página, sección, 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=soporte-de-shortcode-heredado><a aria-label="Anchor link for: soporte-de-shortcode-heredado" class="header-anchor no-hover-padding" href=#soporte-de-shortcode-heredado><span aria-hidden=true class=link-icon></span></a> Soporte de shortcode heredado</h3><p>El shortcode <code>add_src_to_code_block</code> sigue funcionando por retrocompatibilidad, pero será descontinuado en una versión futura. Por favor, usa la sintaxis nativa de Zola:<pre class=z-code><code><span class="z-text z-plain"># Forma antigua (descontinuada):
</span><span class="z-text z-plain">{{ add_src_to_code_block(src="ruta/al/archivo.rs") }}
</span><span class="z-text z-plain">
</span><span class="z-text z-plain"># Forma nueva (recomendada):
</span><span class="z-text z-plain">```rust,name=ruta/al/archivo.rs
</span></code></pre><h2 id=shortcodes-de-texto><a aria-label="Anchor link for: shortcodes-de-texto" class="header-anchor no-hover-padding" href=#shortcodes-de-texto><span aria-hidden=true class=link-icon></span></a> Shortcodes de texto</h2><h3 id=aside-nota-al-margen><a aria-label="Anchor link for: aside-nota-al-margen" class="header-anchor no-hover-padding" href=#aside-nota-al-margen><span aria-hidden=true class=link-icon></span></a> Aside (nota al margen)</h3><p>Añade contenido complementario en los márgenes en pantallas anchas, o como bloques distintivos en móvil.<aside><p><em>Nota al margen</em> viene de <em>nota</em> (del latín, ‘marca’ o ‘señal’) y <em>margen</em> (del latín <em>margo</em>, ‘borde’ o ‘límite’).</aside><p>El shortcode acepta dos parámetros:<ul><li><code>position</code>: Establecer como <code>"right"</code> para colocar en el margen derecho (por defecto, izquierdo)<li>El contenido puede proporcionarse mediante el parámetro <code>text</code> o entre las etiquetas del shortcode</ul><h4 id=uso-8><a aria-label="Anchor link for: uso-8" class="header-anchor no-hover-padding" href=#uso-8><span aria-hidden=true class=link-icon></span></a> Uso</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 llamada al shortcode con saltos de línea para evitar errores de renderizado.</div></div><p>Usando el parámetro <code>text</code>:<pre class=z-code><code><span class="z-text z-plain">{{ aside(text="*Nota al margen* viene de *nota* (del latín, 'marca' o 'señal') y *margen* (del latín *margo*, 'borde' o 'límite').") }}
</span></code></pre><p>Usando el cuerpo del contenido e indicando la posición:<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 larga que
</span><span class="z-text z-plain">puede ocupar varias líneas.
</span><span class="z-text z-plain">
</span><span class="z-text z-plain">Se admite *Markdown*.
</span><span class="z-text z-plain">{% end %}
</span></code></pre><h3 id=texto-remoto><a aria-label="Anchor link for: texto-remoto" class="header-anchor no-hover-padding" href=#texto-remoto><span aria-hidden=true class=link-icon></span></a> Texto remoto</h3><p>Añade texto desde una URL remota o un archivo local.<p>El shortcode acepta tres parámetros:<ul><li><code>src</code>: La URL de origen o ruta del archivo (obligatorio)<li><code>start</code>: Primera línea a mostrar (opcional, empieza en 1)<li><code>end</code>: Número de la última línea (opcional, por defecto es 0, la última línea)</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> y <code>end</code> son inclusivos. <code>start=3, end=3</code> mostrará solo la tercera línea.</div></div><p><strong>Importante</strong>:<ul><li><strong>Archivos remotos VS archivos locales</strong>: Si <code>src</code> empieza con “http”, se tratará como un archivo remoto. De lo contrario, se asume que es una ruta de archivo local.<li><strong>Acceso a archivos</strong>: Dado que utiliza la función <a class=external href=https://www.getzola.org/documentation/templates/overview/#load-data><code>load_data</code></a> de Zola, los archivos locales deben estar dentro del directorio de Zola —ver la <a class=external href=https://www.getzola.org/documentation/templates/overview/#file-searching-logic>lógica de búsqueda de archivos</a>. Desde <a class=external href=https://github.com/welpo/tabi/releases/tag/v2.16.0>tabi 2.16.0</a>, el shortcode admite también rutas relativas.<li><strong>Formateo de bloques de código</strong>: 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.</ul><h4 id=uso-9><a aria-label="Anchor link for: uso-9" class="header-anchor no-hover-padding" href=#uso-9><span aria-hidden=true class=link-icon></span></a> Uso</h4><p>Añade un script de Python remoto dentro de un bloque de código con resaltado sintáctico:<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>Visualización de texto de un archivo local:<pre class=z-code><code><span class="z-text z-plain">{{ remote_text(src="ruta/a/archivo.txt") }}
</span></code></pre><p>Mostar sólo las líneas 3 a 5 de un archivo remoto:<pre class=z-code><code><span class="z-text z-plain">{{ remote_text(src="https://example.com/script.py", start=3, end=5) }}
</span></code></pre><h3 id=advertencias><a aria-label="Anchor link for: advertencias" class="header-anchor no-hover-padding" href=#advertencias><span aria-hidden=true class=link-icon></span></a> Advertencias</h3><p>Destaca información con estos shortcodes de advertencia/alerta. Hay cinco tipos (<code>type</code>): <code>note</code>, <code>tip</code>, <code>info</code>, <code>warning</code>, y <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>Contenido con <strong>sintaxis</strong> <em>Markdown</em>. Consulta <a href=#>esta <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>Contenido con <strong>sintaxis</strong> <em>Markdown</em>. Consulta <a href=#>esta <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>Contenido con <strong>sintaxis</strong> <em>Markdown</em>. Consulta <a href=#>esta <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>Contenido con <strong>sintaxis</strong> <em>Markdown</em>. Consulta <a href=#>esta <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>Contenido con <strong>sintaxis</strong> <em>Markdown</em>. Consulta <a href=#>esta <code>api</code></a>.</div></div><p>Puedes cambiar el <code>title</code> y el <code>icon</code> de la advertencia. Ambos parámetros aceptan texto y por defecto coinciden con el tipo de advertencia. <code>icon</code> puede ser cualquiera de los tipos de advertencia disponibles.<div class="admonition note"><div class="admonition-icon admonition-icon-tip"></div><div class=admonition-content><strong class=admonition-title>Título e icono personalizados</strong><p>Contenido con <strong>sintaxis</strong> <em>Markdown</em>. Consulta <a href=#>esta <code>api</code></a>.</div></div><h4 id=uso-10><a aria-label="Anchor link for: uso-10" class="header-anchor no-hover-padding" href=#uso-10><span aria-hidden=true class=link-icon></span></a> Uso</h4><p>Puedes usar las advertencias de dos formas:<ol><li>En línea con parámetros:</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 consejo importante", text="Mantente hidratado") }}
</span></span></code></pre><ol start=2><li>Con contenido en el cuerpo:</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 consejo importante") %}
</span></span><span class="z-text z-html z-markdown"><span class="z-meta z-paragraph z-markdown">Mantente hidratado
</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">Este método es especialmente útil para contenido largo o múltiples párrafos.
</span></span><span class="z-text z-html z-markdown"><span class="z-meta z-paragraph z-markdown">{% end %}
</span></span></code></pre><p>Ambos métodos admiten los mismos parámetros (<code>type</code>, <code>icon</code>, y <code>title</code>).<h3 id=citas-multilenguaje><a aria-label="Anchor link for: citas-multilenguaje" class="header-anchor no-hover-padding" href=#citas-multilenguaje><span aria-hidden=true class=link-icon></span></a> Citas multilenguaje</h3><p>Este shortcode permite mostrar una cita traducida y en su lenguaje original:<div class=quote-container><input class=quote-toggle id=toggle-70696 type=checkbox><div class=quote><div class=translated><blockquote><p>«Lo terrible no es sufrir o morir, sino morir en vano.»<p>— Jean-Paul Sartre <label class="quote-label quote-label-original" for=toggle-70696>(Mostrar cita original)</label></blockquote></div><div class=original><blockquote><p>«Ce qui est terrible, ce n’est pas de souffrir ni de mourir, mais de mourir en vain.»<p>— Jean-Paul Sartre <label class="quote-label quote-label-translate" for=toggle-70696>(Mostrar traducción)</label></blockquote></div></div></div><h4 id=uso-11><a aria-label="Anchor link for: uso-11" class="header-anchor no-hover-padding" href=#uso-11><span aria-hidden=true class=link-icon></span></a> Uso</h4><pre class=z-code><code><span class="z-text z-plain">{{ 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") }}
</span></code></pre><h3 id=referencias-con-sangria-francesa><a aria-label="Anchor link for: referencias-con-sangria-francesa" class="header-anchor no-hover-padding" href=#referencias-con-sangria-francesa><span aria-hidden=true class=link-icon></span></a> Referencias con sangría francesa</h3><p>Este shortcode formatea una sección de referencias con sangría francesa de la siguiente manera:<div class=references><p>Alderson, E. (2015). Ciberseguridad y justicia social: Una crítica a la hegemonía corporativa en un mundo 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). Las normas sociales de indecencia: Un análisis del comportamiento desviado en la sociedad contemporánea. <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ón de la agricultura de remolacha: Un análisis de la innovación agrícola. <em>Scranton Agricultural Quarterly, 38</em>(3), 67-81.<p>Steinbrenner, G. (1997). El análisis costo-beneficio de George Costanza: Un examen del comportamiento de toma de riesgos en el lugar de trabajo. <em>New York Journal of Business, 12</em>(4), 112-125.<p>Winger, J. A. (2010). El arte del debate: Un examen de la retórica en el modelo de las Naciones Unidas 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=uso-12><a aria-label="Anchor link for: uso-12" class="header-anchor no-hover-padding" href=#uso-12><span aria-hidden=true class=link-icon></span></a> Uso</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">Tus referencias van aquí.
</span><span class="z-text z-plain">
</span><span class="z-text z-plain">Cada una en una línea nueva. Se renderizará Markdown (enlaces, cursivas…).
</span><span class="z-text z-plain">
</span><span class="z-text z-plain">{% end %}
</span></code></pre><h3 id=spoilers><a aria-label="Anchor link for: spoilers" class="header-anchor no-hover-padding" href=#spoilers><span aria-hidden=true class=link-icon></span></a> Spoilers</h3><p>Este shortcode permite ocultar texto que se revelará al hacer clic. Por ejemplo: las galletas de la fortuna tiene su origen en <label class=spoiler-container><input aria-pressed=false class=spoiler-toggle id=spoiler-91866 role=button type=checkbox> <span title="reveal spoiler" class=spoiler-content tabindex=0> <span class=spoiler-hidden>Japón. Sí, <a class=external href=https://es.wikipedia.org/wiki/Galleta_de_la_suerte#Historia_y_origen>en serio</a>. </span> </span></label><p>Como ves, el Markdown se renderiza.<p>Este shortcode tiene la opción <code>fixed_blur</code> para difuminar el texto “SPOILER”, en lugar de difuminar el contenido real. Por ejemplo: es <label class="spoiler-container fixed-blur"><input aria-pressed=false class=spoiler-toggle id=spoiler-8964 role=button type=checkbox> <span title="reveal spoiler" class=spoiler-content tabindex=0> <span class=spoiler-hidden>innecesario </span> </span></label> esperar 24 horas antes de denunciar la desaparición de una persona.<h4 id=uso-13><a aria-label="Anchor link for: uso-13" class="header-anchor no-hover-padding" href=#uso-13><span aria-hidden=true class=link-icon></span></a> Uso</h4><pre class=z-code><code><span class="z-text z-plain">{{ spoiler(text="texto que ocultar", fixed_blur=false) }}
</span></code></pre><h2 id=contenedores><a aria-label="Anchor link for: contenedores" class="header-anchor no-hover-padding" href=#contenedores><span aria-hidden=true class=link-icon></span></a> Contenedores</h2><h3 id=contenedor-ancho><a aria-label="Anchor link for: contenedor-ancho" class="header-anchor no-hover-padding" href=#contenedor-ancho><span aria-hidden=true class=link-icon></span></a> Contenedor ancho</h3><p>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.<div class=full-width><table><thead><tr><th>Título<th>Año<th>Director<th>Director de Fotografía<th>Género<th>IMDb<th>Duración<tbody><tr><td>Beoning<td>2018<td>Lee Chang-dong<td>Hong Kyung-pyo<td>Drama/Misterio<td>7.5<td>148 min<tr><td>The Master<td>2012<td>Paul Thomas Anderson<td>Mihai Mălaimare Jr.<td>Drama/Historia<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=uso-14><a aria-label="Anchor link for: uso-14" class="header-anchor no-hover-padding" href=#uso-14><span aria-hidden=true class=link-icon></span></a> Uso</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">Coloca tu bloque de código, párrafo, tabla… aquí.
</span><span class="z-text z-plain">
</span><span class="z-text z-plain">El Markdown, por supuesto, será interpretado.
</span><span class="z-text z-plain">
</span><span class="z-text z-plain">{% end %}
</span></code></pre><h3 id=forzar-direccion-del-texto><a aria-label="Anchor link for: forzar-direccion-del-texto" class="header-anchor no-hover-padding" href=#forzar-direccion-del-texto><span aria-hidden=true class=link-icon></span></a> Forzar dirección del texto</h3><p>Fuerza la dirección del texto de un bloque de contenido. Anula tanto la configuración global <code>force_codeblock_ltr</code> como la dirección general del documento.<p>Acepta el parámetro <code>direction</code>: la dirección de texto deseada. Puede ser “ltr” (de izquierda a derecha) o “rtl” (de derecha a izquierda). Por defecto es “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=uso-15><a aria-label="Anchor link for: uso-15" class="header-anchor no-hover-padding" href=#uso-15><span aria-hidden=true class=link-icon></span></a> Uso</h4><p>En una página LTR podemos forzar que un bloque de código sea RTL (como se muestra arriba) de la siguiente 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="Me gusta esta publicación" title="Me gusta esta publicación" 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=Siguiente href=https://welpo.github.io/tabi/es/blog/security/><span class=arrow>←</span> Siguiente</a><p aria-hidden=true id=left_title>Seguro por defecto</div><div><a aria-describedby=right_title aria-label=Anterior href=https://welpo.github.io/tabi/es/blog/markdown/>Anterior <span class=arrow>→</span></a><p aria-hidden=true id=right_title>Ejemplos 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 tabla de contenidos" 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/es/blog/shortcodes/#shortcodes-de-diagramas>Shortcodes de diagramas</a> <ul><li><a href=https://welpo.github.io/tabi/es/blog/shortcodes/#diagramas-de-mermaid>Diagramas de Mermaid</a></ul><li><a href=https://welpo.github.io/tabi/es/blog/shortcodes/#shortcodes-de-imagen>Shortcodes de imagen</a> <ul><li><a href=https://welpo.github.io/tabi/es/blog/shortcodes/#imagenes-de-doble-tema>Imágenes de doble tema</a><li><a href=https://welpo.github.io/tabi/es/blog/shortcodes/#imagen-invertible>Imagen invertible</a><li><a href=https://welpo.github.io/tabi/es/blog/shortcodes/#imagen-atenuable>Imagen atenuable</a><li><a href=https://welpo.github.io/tabi/es/blog/shortcodes/#cambio-de-imagen-al-pasar-el-cursor>Cambio de imagen al pasar el cursor</a><li><a href=https://welpo.github.io/tabi/es/blog/shortcodes/#cambio-de-imagen-via-click>Cambio de imagen vía click</a><li><a href=https://welpo.github.io/tabi/es/blog/shortcodes/#imagen-a-ancho-completo>Imagen a ancho completo</a></ul><li><a href=https://welpo.github.io/tabi/es/blog/shortcodes/#shortcodes-sociales>Shortcodes sociales</a> <ul><li><a href=https://welpo.github.io/tabi/es/blog/shortcodes/#iine>iine</a></ul><li><a href=https://welpo.github.io/tabi/es/blog/shortcodes/#shortcodes-de-codigo>Shortcodes de código</a> <ul><li><a href=https://welpo.github.io/tabi/es/blog/shortcodes/#mostrar-ruta-o-url>Mostrar ruta o URL</a><li><a href=https://welpo.github.io/tabi/es/blog/shortcodes/#soporte-de-shortcode-heredado>Soporte de shortcode heredado</a></ul><li><a href=https://welpo.github.io/tabi/es/blog/shortcodes/#shortcodes-de-texto>Shortcodes de texto</a> <ul><li><a href=https://welpo.github.io/tabi/es/blog/shortcodes/#aside-nota-al-margen>Aside (nota al margen)</a><li><a href=https://welpo.github.io/tabi/es/blog/shortcodes/#texto-remoto>Texto remoto</a><li><a href=https://welpo.github.io/tabi/es/blog/shortcodes/#advertencias>Advertencias</a><li><a href=https://welpo.github.io/tabi/es/blog/shortcodes/#citas-multilenguaje>Citas multilenguaje</a><li><a href=https://welpo.github.io/tabi/es/blog/shortcodes/#referencias-con-sangria-francesa>Referencias con sangría francesa</a><li><a href=https://welpo.github.io/tabi/es/blog/shortcodes/#spoilers>Spoilers</a></ul><li><a href=https://welpo.github.io/tabi/es/blog/shortcodes/#contenedores>Contenedores</a> <ul><li><a href=https://welpo.github.io/tabi/es/blog/shortcodes/#contenedor-ancho>Contenedor ancho</a><li><a href=https://welpo.github.io/tabi/es/blog/shortcodes/#forzar-direccion-del-texto>Forzar dirección del texto</a></ul></ul></div></div></div><a title="Ir al inicio 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> Copiado! </span><span class=hidden id=copy-init> Copiar código al portapapeles </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/es/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/es/about/> sobre mí </a><li><a class="nav-links no-hover-padding" href=https://welpo.github.io/tabi/es/privacy/> política de privacidad </a><li><a class="nav-links no-hover-padding" href=https://tabi-stats.osc.garden/> estadísticas del sitio </a><li><a class="nav-links no-hover-padding" href=https://welpo.github.io/tabi/sitemap.xml> mapa del sitio </a></ul> </small></nav><div class=credits><small> Impulsado por <a href=https://www.getzola.org>Zola</a> y <a href=https://github.com/welpo/tabi>tabi</a> • <a href=https://github.com/welpo/tabi> Código del sitio </a></small></div></section><script async src=https://welpo.github.io/tabi/js/decodeMail.min.js></script><div class="search-modal js" aria-labelledby=modalTitle id=searchModal role=dialog><h1 class=visually-hidden id=modalTitle>Buscar</h1><div id=modal-content><div id=searchBar><div aria-hidden=true class=search-icon><svg viewbox="0 -960 960 960" xmlns=http://www.w3.org/2000/svg><path d="M784-120 532-372q-30 24-69 38t-83 14q-109 0-184.5-75.5T120-580q0-109 75.5-184.5T380-840q109 0 184.5 75.5T640-580q0 44-14 83t-38 69l252 252-56 56ZM380-400q75 0 127.5-52.5T560-580q0-75-52.5-127.5T380-760q-75 0-127.5 52.5T200-580q0 75 52.5 127.5T380-400Z"/></svg></div><input aria-controls=results-container aria-expanded=false autocomplete=off id=searchInput placeholder=Buscar… role=combobox spellcheck=false><div class="close-icon interactive-icon" title="Borrar búsqueda" id=clear-search role=button tabindex=0><svg viewbox="0 -960 960 960" xmlns=http://www.w3.org/2000/svg><path d="m256-200-56-56 224-224-224-224 56-56 224 224 224-224 56 56-224 224 224 224-56 56-224-224-224 224Z"/></svg></div></div><div id=results-container><div id=results-info><span id=zero_results> No hay resultados</span><span id=one_results> $NUMBER resultado</span><span id=many_results> $NUMBER resultados</span><span id=two_results> $NUMBER resultados</span><span id=few_results> $NUMBER resultados</span></div><div id=results role=listbox></div></div></div></div></footer>
Reference in a new issue View git blame Copy permalink