From 2aa5a83686880e947a6614a42f93550d96b1f87f Mon Sep 17 00:00:00 2001 From: Jieiku Date: Sun, 2 Feb 2025 21:30:23 -0800 Subject: Add and Update Translations --- content/overview-rich-content/index.es.md | 182 ++++++++++++++++++++++++++++++ content/overview-rich-content/index.fr.md | 116 ++++++++++++------- content/overview-rich-content/index.md | 30 ++++- 3 files changed, 282 insertions(+), 46 deletions(-) create mode 100644 content/overview-rich-content/index.es.md (limited to 'content/overview-rich-content') diff --git a/content/overview-rich-content/index.es.md b/content/overview-rich-content/index.es.md new file mode 100644 index 0000000..fdafd67 --- /dev/null +++ b/content/overview-rich-content/index.es.md @@ -0,0 +1,182 @@ ++++ +date = 2021-05-15T15:00:00Z +description = "Una breve descripción de Shortcodes personalizados para Zola que implementan elementos html modernos: video, imagen, gif, audio." +draft = false +title = "Contenido enriquecido" + +[extra] +keywords = "Images, Videos, Audio, Gif, Rich Content, Shortcodes" +series = "Features" +toc = true + +[taxonomies] +tags = [ + "Features", + "Video", + "Audio", + "Images", + "Shortcodes", +] ++++ +Se incluyen varios shortcodes personalizados para aumentar CommonMark. `video` los shortcodes `image`, `gif` y `audio` se crearon para ayudarle a aprovechar los elementos HTML modernos en sus escritos. + + + +## Vídeo + +- `sources` es una matriz de rutas de archivos de vídeo. (obligatorio) +- `class` establece una clase para el vídeo. +- `caption` establece el texto del pie de foto debajo del vídeo. +- `w` define la anchura del vídeo. +- `h` define la altura del vídeo. +- `autoplay` si está activado, el vídeo se reproduce automáticamente al cargarse. +- `loop` si está activado, reproduce el vídeo en bucle. +- `muted` cuando está activado, silencia el audio inicialmente. +- `playsinline` si está configurado, reproduce el vídeo incrustado en lugar de a pantalla completa en navegadores móviles. + +*Las fuentes pueden ser la misma ruta, la ruta relativa o la ruta raíz, como el [shortcode img](https://abridge.pages.dev/overview-images/#img-shortcode)* + +**Clases opcionales:** + +- `ci` se puede utilizar para centrar la imagen. +- `fr` se puede utilizar para flotar la imagen a la derecha. +- `fl` se puede utilizar para flotar la imagen a la izquierda. +- `b1` se puede utilizar para añadir un borde de 1px. + +### Uso + +```rs +{{/* video(sources=["over9000_av1.mp4", "over9000_vp9.webm"]) */}} +``` + +### Salida + +```html +{{ video(sources=["over9000_av1.mp4", "over9000_vp9.webm"]) }} +``` + +{{ video(sources=["over9000_av1.mp4", "over9000_vp9.webm"]) }} + +### Uso + +```rs +{{/* video(sources=["over9000_av1.mp4", "over9000_vp9.webm"] muted="true" class="ci b1" caption="¡Son más de 9000!") */}} +``` + +### Salida + +```html +{{ video(sources=["over9000_av1.mp4", "over9000_vp9.webm"] muted="true" class="ci b1" caption="¡Son más de 9000!") }} +``` + +{{ video(sources=["over9000_av1.mp4", "over9000_vp9.webm"] muted="true" class="ci b1" caption="It's Over 9000!!") }} + +## Imagen + +El shortcode `image` devuelve una etiqueta `` con múltiples fuentes. + +Cada cadena en la matriz `sources` debe ser una ruta a un archivo de imagen de un tipo diferente (`avif`, `webp`, `png`, `jpg`, etc). +La última imagen en la matriz `sources` se utiliza para crear una etiqueta `` para que el navegador recurra a ella si los otros formatos aún no son compatibles. + +- `sources` es una matriz de rutas de archivos de imagen. (obligatorio) +- `class` establece una clase para la imagen. +- `caption` establece el texto del pie de foto debajo de la imagen. +- `w` establece el ancho de la imagen. +- `h` establece la altura de la imagen. + +*Las fuentes pueden ser la misma ruta, la ruta relativa o la ruta raíz, como el [shortcode img](https://abridge.pages.dev/overview-images/#img-shortcode)* + +**Clases opcionales:** + +- `ci` se puede utilizar para centrar la imagen. +- `fr` se puede utilizar para flotar la imagen a la derecha. +- `fl` se puede utilizar para flotar la imagen a la izquierda. +- `b1` se puede utilizar para añadir un borde de 1px. + +### Uso + +```rs +{{/* image(sources=["over9000-960.avif", "over9000-640.avif", "over9000-400.avif", "over9000-640.webp"] w=640 h=480 alt="¡ES MÁS DE 9000!") */}} +``` + +### Salida + +```html +{{ image(sources=["over9000-960.avif", "over9000-640.avif", "over9000-400.avif", "over9000-640.webp"] w=640 h=480 alt="¡ES MÁS DE 9000!") }} +``` + +{{ image(sources=["over9000-960.avif", "over9000-640.avif", "over9000-400.avif", "over9000-640.webp"] w=640 h=480 alt="ITS OVER 9000!") }} + +## GIF + +El shortcode `gif` es exactamente igual que el [shortcode video](#video). +La única diferencia es que automáticamente tiene las propiedades adicionales: `autoplay`, `loop`, `muted`, `playsinline`. + +El uso de la etiqueta `