1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
|
+++
date = 2021-05-15T15:00:00Z
description = "Una breve descripción de Components 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, Components"
series = "Features"
toc = true
[taxonomies]
tags = [
"Features",
"Video",
"Audio",
"Images",
"Components",
]
+++
Se incluyen varios components personalizados para aumentar CommonMark. `video` los components `image`, `gif` y `audio` se crearon para ayudarle a aprovechar los elementos HTML modernos en sus escritos.
<!-- more -->
## 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 [component img](https://abridge.pages.dev/overview-images/#img-component)*
**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
{% raw %}
```rs
{{<video sources={["over9000_av1.mp4", "over9000_vp9.webm"]} page={page} config={config} />}}
```
{% endraw %}
### Salida
```html
{{<video sources={["over9000_av1.mp4", "over9000_vp9.webm"]} page={page} config={config} />}}
```
{{<video sources={["over9000_av1.mp4", "over9000_vp9.webm"]} page={page} config={config} />}}
### Uso
{% raw %}
```rs
{{<video sources={["over9000_av1.mp4", "over9000_vp9.webm"]} muted={true} class="ci b1" caption="¡Son más de 9000!" page={page} config={config} />}}
```
{% endraw %}
### Salida
```html
{{<video sources={["over9000_av1.mp4", "over9000_vp9.webm"]} muted={true} class="ci b1" caption="¡Son más de 9000!" page={page} config={config} />}}
```
{{<video sources={["over9000_av1.mp4", "over9000_vp9.webm"]} muted={true} class="ci b1" caption="It's Over 9000!!" page={page} config={config} />}}
## Imagen
El component `image` devuelve una etiqueta `<picture>` 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 `<img>` 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 [component img](https://abridge.pages.dev/overview-images/#img-component)*
**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
{% raw %}
```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!" page={page} config={config} />}}
```
{% endraw %}
### 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!" page={page} config={config} />}}
```
{{<image sources={["over9000-960.avif", "over9000-640.avif", "over9000-400.avif", "over9000-640.webp"]} w={640} h={480} alt="ITS OVER 9000!" page={page} config={config} />}}
## GIF
El component `gif` es exactamente igual que el [component video](#video).
La única diferencia es que automáticamente tiene las propiedades adicionales: `autoplay`, `loop`, `muted`, `playsinline`.
El uso de la etiqueta `<video>` en lugar de gifs permite reducir el tamaño de los archivos,
lo cual es especialmente importante en regiones donde Internet es más lento o
menos fiable.
### Utilización
{% raw %}
```rs
{{<gif sources={["over9000_av1.mp4", "over9000_vp9.webm"]} page={page} config={config} />}}
```
{% endraw %}
### Salida
```html
{{<gif sources={["over9000_av1.mp4", "over9000_vp9.webm"]} page={page} config={config} />}}
```
{{<gif sources={["over9000_av1.mp4", "over9000_vp9.webm"]} page={page} config={config} />}}
## Audio
El component `audio` toma una matriz `sources` de cadenas y devuelve una etiqueta
`<audio>`. Cada cadena de la matriz `sources` debe ser una ruta a un archivo de audio
de un tipo diferente (`ogg`, `mp3`, `flac`, `wav`, etc).
El navegador reproducirá el primer tipo que admita, por lo que colocarlos en orden de menor a mayor tamaño utilizará el menor ancho de banda si ese es su objetivo.
- `sources` es un array de rutas de archivos. (obligatorio)
- `class` establece una clase para el audio.
- `caption` establece el texto del título debajo del audio.
- `autoplay` cuando se establece, reproduce automáticamente el audio al cargar.
- `loop` cuando se establece, reproduce el audio en bucle.
- `muted` cuando se establece, establece el audio silenciado inicialmente.
*Las fuentes pueden ser la misma ruta, la ruta relativa o la ruta raíz, como el [component img](https://abridge.pages.dev/overview-images/#img-component)*
**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
{% raw %}
```rs
{{<audio sources={["over9000.ogg", "over9000.mp3", "over9000.flac", "over9000.wav"]} page={page} config={config} />}}
```
{% endraw %}
### Salida
```html
{{<audio sources={["over9000.ogg", "over9000.mp3", "over9000.flac", "over9000.wav"]} page={page} config={config} />}}
```
{{<audio sources={["over9000.ogg", "over9000.mp3"]} page={page} config={config} />}}
### Uso
{% raw %}
```rs
{{<audio sources={["over9000.ogg", "over9000.mp3", "over9000.flac", "over9000.wav"]} class="ci b1" caption="¡Son más de 9000!!" page={page} config={config} />}}
```
{% endraw %}
### Salida
```html
{{<audio sources={["over9000.ogg", "over9000.mp3", "over9000.flac", "over9000.wav"]} class="ci b1" caption="¡Son más de 9000!" page={page} config={config} />}}
```
{{<audio sources={["over9000.ogg", "over9000.mp3"]} class="ci b1" caption="It's Over 9000!!" page={page} config={config} />}}
|
