Home
CS POK MON Projets

Shortcodes

Tags :
  • HOME
  • GUIDE
  • shortcodes
Auteurs :
  • François Brucker
  • Loïck Goupil-Hallay

Liens utiles

Shortcodes

Un shortcode est une balise qui est remplacée par un contenu plus complexe lors de la génération du site.
Cela permet de simplifier l'écriture de contenu en évitant de répéter des blocs de code HTML, ou en ajoutant des fonctionnalités supplémentaires.

On distingue deux types de shortcodes : les paired shortcodes et les shortcodes auto-fermants (comme les balises HTML).

Paired shortcodes

Les paired shortcodes sont des balises qui s'ouvrent et se ferment à deux endroits différents.
Elles peuvent prendre des paramètres en argument ET inclure du contenu entre les balises.

Elles sont de la forme suivante :



{% NOM_SHORTCODE PARAM1, PARAM2, ... %}
Ligne de contenu
<img src="image.jpg" alt="Image" />
{% endNOM_SHORTCODE %}

Shortcodes auto-fermants

Les shortcodes auto-fermants sont des balises qui s'ouvrent et se ferment au même endroit.
Elles peuvent prendre des paramètres en argument, mais n'incluent pas de contenu entre les balises.

Elles sont de la forme suivante :



{% NOM_SHORTCODE PARAM1, PARAM2, ... %}

Liste des shortcodes

Notre site met à disposition de nombreux shortcodes pour vous aider à rendre vos contenus les plus jolis possibles.
Tous nos paired shortcodes reçoivent un unique argument (optionel) : le titre de la balise.
Si le titre n'est pas renseigné, la balise présentera son titre par défaut (le nom de la balise capitalisé).

Note

Vous pouvez appliquer n'importe quelle balise HTML pour le titre et le contenu des shortcodes.

Attention

Le titre de la balise est toujours optionnel. Mais s'il est présent il est obligatoirement entre " " (chaîne de caractères).
Si vous voulez placer un titre vide, vous devez mettre des guillemets vides : "".

Paired Shortcode sommaire

Permet d'ajouter une barre de navigation sur le côté droit de votre contenu. La barre est pliable / dépliable pour les petits écrans.
Ce shortcode peut être agrémenté du contenu ${toc} ou [toc] ou [[toc]] ou [[_toc_]] pour générer automatiquent une table des matières.



{% sommaire "**Titre du sommaire**" %}
${toc}
{% endsommaire %}

Paired Shortcode note

Permet d'ajouter une note à retenir distinguée dans votre contenu.



{% note "**Titre de la note**" %}
Contenu de la note.
{% endnote %}

Titre de la note

Contenu de la note.

Paired Shortcode attention

Permet d'ajouter une mise en garde dans votre contenu.



{% attention "**Titre de l'attention**" %}
Contenu de l'attention.
{% endattention %}

Titre de l'attention

Contenu de l'attention.

Paired Shortcode info

Permet d'ajouter une information utile, mais pas indispensable, dans votre contenu.



{% info "**Titre de l'info**" %}
Contenu de l'info.
{% endinfo %}

Titre de l'info

Contenu de l'info.

Paired Shortcode citation

Permet d'ajouter une citation dans votre contenu. Le contenu de la citation doit être en raw HTML pour permettre son affichage correct. utilisez les balises <br> pour les retours à la ligne.



{% citation "**Auteur de la citation (OPTIONNEL)**", "**Source de la citation (OPTIONNEL)**" %}
Contenu de la citation.
{% endcitation %}
AI is 90% marketing and 10% reality
Linus Torvalds

Paired Shortcode faire

Permet d'ajouter une action à réaliser dans votre contenu.



{% faire "**Titre de l'action**" %}
Contenu de l'action.
{% endfaire %}

Titre de l'action

Contenu de l'action.

Paired Shortcode details

Permet d'ajouter un contenu dépliable dans votre fichier.



{% details "**Titre du détail**" %}
Contenu du détail.
{% enddetails %}

Titre du détail

Contenu du détail.

Paired Shortcode exercice

Permet d'ajouter un exercice à réaliser dans votre contenu.



{% exercice "**Titre de l'exercice**" %}
Contenu de l'exercice.
{% endexercice %}

Titre de l'exercice

Contenu de l'exercice.

Paired Shortcode chemin

Permet d'ajouter un chemin de fichier dans votre contenu.



{% chemin "**Titre du chemin**" %}
Contenu du chemin.
{% endchemin %}

Titre du chemin

Contenu du chemin.

Paired Shortcode prerequis

Permet d'ajouter une liste de pré-requis à lire dans votre contenu.



{% prerequis "**Titre des pré-requis**" %}
- un pré-requis à lire
- un autre pré-requis à lire
{% endprerequis %}

Titre des pré-requis

  • un pré-requis à lire
  • un autre pré-requis à lire

Paired Shortcode lien

Permet d'ajouter des liens dans votre contenu.



{% lien "**Liens utiles**" %}
- [Lien 1](https://www.example.com)
- [Lien 2](https://www.example.com)
{% endlien %}

Liens utiles

Shortcode auto-fermant lienInterne

Ajoute un lien vers une ressource interne du site. Affiche son titre et son résumé.
Le chemin de la ressource peut être absolu ou relatif.

Optionnellement, il est aussi possible de spécifier un format de date pour la ressource.



{% lienInterne "CHEMIN/VERS/RESSOURCE" "FORMAT_DATE" %}

VSCode Extension: Achievements
Développement d'une extension permettant de débloquer des succès en fonction de l'utilisation de VSCode.
Loïck Goupil-Hallay
10/11/2024

Shortcode auto-fermant sizedImage

Permet d'ajouter une image avec une taille configurable.
Les paramètres sont:



{% sizedImage "SOURCE_IMAGE", "TEXTE_ALTERNATIF", "TAILLE_IMAGE", "CENTRER" %}
Image de test

Autres guides