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 = "Une brève description des components personnalisés pour Zola qui mettent en œuvre des éléments html modernes : vidéo, image, gif, audio."
draft = false
title = "Un contenu riche"
[extra]
keywords = "Images, Videos, Audio, Gif, Rich Content, Components"
series = "Features"
toc = true
[taxonomies]
tags = [
"Features",
"Video",
"Audio",
"Images",
"Components",
]
+++
Plusieurs components personnalisés sont inclus pour améliorer CommonMark. `video` les components `image`, `gif` et `audio` ont été créés pour vous aider à tirer parti des éléments HTML modernes dans vos écrits.
<!-- more -->
## Vidéo
- `sources` est un tableau de chemins d'accès aux fichiers vidéo. (obligatoire)
- `class` définit une classe pour la vidéo.
- `caption` définit le texte de la légende sous la vidéo.
- `w` définit la largeur de la vidéo.
- `h` définit la hauteur de la vidéo.
- `autoplay` lorsque cette option est activée, la vidéo s'affiche automatiquement au chargement.
- `loop` lorsque cette option est activée, la vidéo est lue en boucle.
- `muted` lorsque cette option est activée, le son est initialement coupé.
- `playsinline` lorsque cette option est activée, la vidéo est lue en mode intégré plutôt qu'en mode plein écran sur les navigateurs mobiles.
*les sources peuvent être le même chemin, le chemin relatif ou le chemin racine, comme le [component img](https://abridge.pages.dev/overview-images/#img-component)*
**Classes optionnelles :**
- `ci` peut être utilisé pour centrer l'image.
- `fr` peut être utilisé pour faire flotter l'image à droite.
- `fl` peut être utilisé pour faire flotter l'image à gauche.
- `b1` peut être utilisé pour ajouter une bordure de 1px.
### Utilisation
{% raw %}
```rs
{{<video sources={["over9000_av1.mp4", "over9000_vp9.webm"]} page={page} config={config} />}}
```
{% endraw %}
### Sortie
```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} />}}
### Utilisation
{% raw %}
```rs
{{<video sources={["over9000_av1.mp4", "over9000_vp9.webm"]} muted={true} class="ci b1" caption="It's Over 9000!!" page={page} config={config} />}}
```
{% endraw %}
### Sortie
```html
{{<video sources={["over9000_av1.mp4", "over9000_vp9.webm"]} muted={true} class="ci b1" caption="It's Over 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} />}}
## Image
Le component `image` renvoie une balise `<picture>` avec plusieurs sources.
Chaque chaîne du tableau `sources` doit être un chemin vers un fichier image d'un type différent (`avif`, `webp`, `png`, `jpg`, etc).
La dernière image du tableau `sources` est utilisée pour créer une balise `<img>` sur laquelle le navigateur peut se rabattre si les autres formats ne sont pas encore pris en charge.
- `sources` est un tableau de chemins d'accès aux fichiers d'images. (obligatoire)
- `class` définit une classe pour l'image.
- `caption` définit le texte de la légende sous l'image.
- `w` définit la largeur de l'image.
- `h` définit la hauteur de l'image.
*les sources peuvent être le même chemin, le chemin relatif ou le chemin racine, comme le [component img](https://abridge.pages.dev/overview-images/#img-component)*
**Classes optionnelles :**
- `ci` peut être utilisé pour centrer l'image.
- `fr` peut être utilisé pour faire flotter l'image à droite.
- `fl` peut être utilisé pour faire flotter l'image à gauche.
- `b1` peut être utilisé pour ajouter une bordure de 1px.
### Utilisation
{% raw %}
```rs
{{<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} />}}
```
{% endraw %}
### Sortie
```html
{{<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} />}}
```
{{<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
Le component `gif` est exactement le même que le [component vidéo](#video).
La seule différence est qu'il possède automatiquement les propriétés supplémentaires : `autoplay`, `loop`, `muted`, `playsinline`.
L'utilisation de la balise `<video>` à la place des gifs permet de réduire la taille des fichiers,
, ce qui est particulièrement important dans les régions où l'internet est plus lent ou
moins fiable.
### Utilisation
{% raw %}
```rs
{{<gif sources={["over9000_av1.mp4", "over9000_vp9.webm"]} page={page} config={config} />}}
```
{% endraw %}
### Sortie
```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
Le component `audio` prend un tableau de chaînes `sources` et renvoie une balise
`<audio>`. Chaque chaîne du tableau `sources` doit être un chemin vers un fichier audio
d'un type différent (`ogg`, `mp3`, `flac`, `wav`, etc).
Le navigateur lira le premier type qu'il prend en charge, donc les placer dans l'ordre de la taille la plus petite à la plus grande utilisera le moins de bande passante si c'est votre objectif.
- `sources` est un tableau de chemins d'accès aux fichiers. (obligatoire)
- `class` définit une classe pour l'audio.
- `caption` définit le texte de la légende sous l'audio.
- `autoplay` lorsque cette option est activée, l'audio s'affiche automatiquement au chargement.
- `loop` lorsque cette option est activée, l'audio est lu en boucle.
- `muted` lorsqu'il est défini, met l'audio en sourdine au départ.
*les sources peuvent être le même chemin, un chemin relatif ou le chemin de la racine, comme le [component img](https://abridge.pages.dev/overview-images/#img-component)*
**Classes optionnelles :**
- `ci` peut être utilisé pour centrer l'image.
- `fr` peut être utilisé pour faire flotter l'image à droite.
- `fl` peut être utilisé pour faire flotter l'image à gauche.
- `b1` peut être utilisé pour ajouter une bordure de 1px.
### Utilisation
{% raw %}
```rs
{{<audio sources={["over9000.ogg", "over9000.mp3", "over9000.flac", "over9000.wav"]} page={page} config={config} />}}
```
{% endraw %}
### Sortie
```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} />}}
### Utilisation
{% raw %}
```rs
{{<audio sources={["over9000.ogg", "over9000.mp3", "over9000.flac", "over9000.wav"]} class="ci b1" caption="It's Over 9000!!" page={page} config={config} />}}
```
{% endraw %}
### Sortie
```html
{{<audio sources={["over9000.ogg", "over9000.mp3", "over9000.flac", "over9000.wav"]} class="ci b1" caption="It's Over 9000!!" page={page} config={config} />}}
```
{{<audio sources={["over9000.ogg", "over9000.mp3"]} class="ci b1" caption="It's Over 9000!!" page={page} config={config} />}}
|
