Guide Shortcodes
En plus du Markdown, vous pouvez utiliser des shortcodes pour enrichir vos pages. Un shortcode est un petit bout de code qui est converti composant plus complexe lorsque la page web est générée. Ce guide recense l'ensemble des shortcodes utilisables au sein du contenu de vos pages.
Dans vos fichiers de contenu, un shortcode peut être appelé en utilisant la syntaxe suivante : {{< shortcode parametres >}}.
Le premier terme de la déclaration du shortcode correspond à son nom. Le nom du shortcode est obligatoire et sensible à la casse, attention à ne pas faire de fautes de frappes !
Les termes suivants correspondent aux paramètres du shortcodes. Ils sont délimités par des espaces. Il peut y en avoir aucun, un seul ou plusieurs, en fonction du shortcode. Certain paramètres n’ont pas de nom, et d’autres sont nommés selon le format suivant : nom="valeur".
Voici deux exemples de shortcodes, avec un seul paramètre son nom, permettant d’intégrer facilement des vidéos hébergées sur YouTube ou Vimeo au sein de vos pages.
YouTube
Pour intégrer une vidéo Youtube, il vous suffit d’ajouter son identififiant à la suite de youtube.
L’identifiant d’une vidéo YouTube correspondant à la la suite de chiffres et de lettres qui se trouvent après https://www.youtube.com/watch?v= dans l’url de votre navigateur. Pour l’obtenir facilement, vous pouvez également cliquez sur le bouton Partager et copiez-collez qui s’affiche après https://youtu.be/.
{{< youtube w7Ft2ymGmfc >}}
Vimeo
La principe est le même pour une vidéo hébergée sur Vimeo. Son identifiant correspondant à la suite de chiffres qui se trouve après https://vimeo.com/.
{{< vimeo 55073825 >}}
Bouton
Pour intégrer un bouton à vos pages, utilisez le shortcode bouton. Le premier paramètre texte correspond au texte affiché à l’intérieur du bouton, et le second lien correspond logiquement au lien vers la page ou le fichier ciblé.
Bouton avec lien interne :
{{< bouton texte="Bouton" lien="/presentation/projet" >}}
Bouton avec lien interne vers un fichier :
{{< bouton texte="Bouton" lien="/media/PN-Statuts.pdf" >}}
Bouton avec lien externe :
{{< bouton texte="Bouton" lien="https://plateaux-numeriques.fr/" >}}
Page
Le shortcode page permet de créer un lien vers une page sous forme de bouton. Si vous souhaitez en afficher plusieurs à la suite, veillez bien à sauter une ligne entre chaque shortcode comme dans l’exemple ci-dessous :
{{< page "/presentation/projet" >}}
{{< page "/presentation/histoire" >}}
Encadré
Comme en HTML, certains shortcodes nécessitent une balise de fermeture : {{< /shortcode >}}.
C’est le cas du shortcode encadre qui vous permet d’intégrer du contenu à l’intérieur d’un encadré.
{{< encadre >}}
Maecenas sed diam eget risus varius blandit sit amet non magna. Maecenas faucibus mollis interdum. Aenean lacinia bibendum nulla sed consectetur. Aenean lacinia bibendum nulla sed consectetur.
{{< /encadre >}}
En plus de celui par défaut (gris), existe 4 types d’encadré :
info(bleu)succes(vert)attention(jaune)danger(rouge).
{{< encadre info >}}
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Donec sed odio dui. Aenean lacinia bibendum nulla sed consectetur.
{{< /encadre >}}
{{< encadre succes >}}
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Donec sed odio dui. Aenean lacinia bibendum nulla sed consectetur.
{{< /encadre >}}
{{< encadre attention >}}
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Donec sed odio dui. Aenean lacinia bibendum nulla sed consectetur.
{{< /encadre >}}
{{< encadre danger >}}
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Donec sed odio dui. Aenean lacinia bibendum nulla sed consectetur.
{{< /encadre >}}
Il est également possible d’indiquer un second paramètre entre guillemets " pour ajouter un titre à l’encadré, comme ceci :
{{< encadre info "Titre de l’encadré" >}}
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Donec sed odio dui. Aenean lacinia bibendum nulla sed consectetur.
{{< /encadre >}}
Citation
Si vous souhaitez ajouter la source d’une citation, les
citations en markdown
ne vous suffiront pas. Il vous faudra utiliser le shortcode citation en précisant au niveau paramètre source son auteur·ice. Vous pouvez même utiliser du markdown ou des balises HTML comme
<cite>
à l’intérieur de la source et de la citation !
{{< citation source="Ivan Illich, <cite>La convivialité</cite>" >}}
L’outil est convivial dans la mesure où chacun peut l’utiliser, sans difficulté, aussi souvent ou aussi rarement qu’il le désire, à des fins qu’il détermine lui-même.
{{< /citation >}}
L’outil est convivial dans la mesure où chacun peut l’utiliser, sans difficulté, aussi souvent ou aussi rarement qu’il le désire, à des fins qu’il détermine lui-même.
Grille & Bloc
Le shortcode grid vous permet de composer des sections de pages sur 2 colonnes. Se fonctionnement est un peu particulier : chaque élément qui se trouve entre le début {{< grid >}} et la fin du shortcode {{< /grid >}} est répartie automatiquement de gauche à droite au sein d’une grille de 2 colonnes. Cela peut-être un paragraphe, une image, peu importe.
{{< grid >}}
Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Donec ullamcorper nulla non metus auctor fringilla. Donec id elit non mi porta gravida at eget metus. Cras mattis consectetur purus sit amet fermentum. Donec ullamcorper nulla non metus auctor fringilla. Donec id elit non mi porta gravida at eget metus. Nulla vitae elit libero, a pharetra augue. Donec sed odio dui. Vestibulum id ligula porta felis euismod semper.
{{< /grid >}}
Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Donec ullamcorper nulla non metus auctor fringilla. Donec id elit non mi porta gravida at eget metus. Cras mattis consectetur purus sit amet fermentum. Donec ullamcorper nulla non metus auctor fringilla. Donec id elit non mi porta gravida at eget metus. Nulla vitae elit libero, a pharetra augue. Donec sed odio dui. Vestibulum id ligula porta felis euismod semper.
Si vous souhaitez composer plusieurs élément au sein d’une même colonne (plusieurs paragraphes ou images par exemple), il vous faudra combiner le shortcode grid avec le shortcode bloc.
{{< grid >}}
{{< bloc >}}
**Bloc avec plusieurs paragraphes** :
Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Donec ullamcorper nulla non metus auctor fringilla. Nullam quis risus eget urna mollis ornare vel eu leo. Aenean lacinia bibendum nulla sed consectetur.
Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Sed posuere consectetur est at lobortis. Donec id elit non mi porta gravida at eget metus.Aenean lacinia bibendum nulla sed consectetur. Vivamus sagittis lacus vel augue laoreet rutrum condimentum faucibus dolor auctor.
Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Donec ullamcorper nulla non metus auctor fringilla. Donec id elit non mi porta gravida at eget metus. Cras mattis consectetur purus sit amet fermentum. Donec ullamcorper nulla non metus auctor fringilla.
{{< /bloc >}}
{{< bloc >}}
**Bloc avec plusieurs images** :
{{< /bloc >}}
{{< /grid >}}
Bloc avec plusieurs paragraphes :
Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Donec ullamcorper nulla non metus auctor fringilla. Nullam quis risus eget urna mollis ornare vel eu leo. Aenean lacinia bibendum nulla sed consectetur.
Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Sed posuere consectetur est at lobortis. Donec id elit non mi porta gravida at eget metus.Aenean lacinia bibendum nulla sed consectetur. Vivamus sagittis lacus vel augue laoreet rutrum condimentum faucibus dolor auctor.
Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Donec ullamcorper nulla non metus auctor fringilla. Donec id elit non mi porta gravida at eget metus. Cras mattis consectetur purus sit amet fermentum. Donec ullamcorper nulla non metus auctor fringilla.
Bloc avec plusieurs images :
