Shortcodes

Div

Wrapper simple avec une balise div, le shortcode peut prendre l’attribut class tout comme pourrait un élément HTML. Le contenu écrit à l’intérieur est rendu avec Hugo.

<!-- Avec du contenu markdown -->
{{% div class="css classes" %}}

Markdown content:
- A bullet point ...

{{% /div %}}

<!-- Sans contenu markdown -->
{{< div class="classes CSS" >}}

{{< non-markdown-content >}}

{{< /div >}}

Image

Une solution alternative au shortcode natif de Hugo figure. Sans l’attribut caption, alors uniquement la balise img est créée.

Dans un cas sans caption, alors il n’est pas nécessaire de donner l’attribut class puisqu’il ne sera pas utilisé.

L’attribut alt aura comme valeur le nom de l’image (i.e. src="/images/my-image.jpg" alors alt="my-image").

{{< img
  class="classes CSS pour la figure"
  src="URL de l'image"
  img-class="classes CSS pour l'image"
  width="largeur de l'image"
  height="hauteur de l'image"
  caption="Caption"
>}}

Exemple

{{< img
  class="col-2"
  src="/logo/10.webp"
  height="100px"
  img-class="mb-1"
  caption="Arthur in The Beginning After the End"
  caption-class="text-italic text-center"
>}}

Arthur in The Beginning After the End

Image latérale

Un wrapper simple (avec une balise div) pour positionner une image sur le côté d’un texte.

{{% side-img
  class="classes CSS pour le wrapper"
  src="URL de l'image"
  img-class="classes CSS pour l'image"
  width="largeur de l'image"
  height="hauteur de l'image"
  inner-class="classes CSS pour le contenu intérieur"
%}}

Markdown content:
- A bullet point ...

{{% /side-img %}}

Exemple

{{% side-img
  class="row-gap-3 col-gap-3 mt-3"
  src="/logo/10.webp"
  height="50px"
%}}

Markdown content:
{class="mb-0"}
- A bullet point ...

{{% /side-img %}}

Markdown content:

A bullet point …

SVG

Un shortcode simple pour afficher un SVG sans passer par une balise img. Il peut aussi être équipé d’une info-bulle si l’attribut tooltip est donné. Les SVGs sont ajoutés en static lors du build Hugo et peuvent être distants (src commençe par https://) ou locaux.

{{< svg src="/static/primer/book-16.svg" class="octicon" height="22" width="22" tooltip="Un libre" >}}

Exemple

Item chronologique

Un item chronologique reprend le composant associé de Primer ici. C’est un item avec un badge et du contenu à côté.

{{% timeline-item
  badge="/primer/book-16.svg"
  class="classes CSS pour l'item complet"
  inner-class="classes CSS pour le contenu"
%}}

Markdown content:
- A bullet point ...

{{% /timeline-item %}}

Exemple

{{% timeline-item badge="/logo/10.webp" inner-class="fgColor-default" %}}

Markdown content:
{class="mb-0"}
- A bullet point ...

{{% /timeline-item %}}
{{% timeline-item badge="/logo/10.webp" inner-class="fgColor-default" %}}

Markdown content:
{class="mb-0"}
- A bullet point ...

{{% /timeline-item %}}

Markdown content:

A bullet point …

Markdown content:

A bullet point …

Paginate

Un shortcode simple permettant d’afficher en face à face deux boutons (ou un seul) < Précédent et Suivant > avec des URLs personalisées :

{{< paginate next="/path/to/next" prev="/path/to/previous" format="default OU terse" >}}

En mode terse, si next ou prev n’est pas fourni, alors le bouton associé n’est pas affiché. En mode default, le bouton associé est affiché mais désactivé.

Exemple

Avec deux liens

{{< paginate next="/fr/walkthrough/shortcodes#paginate" prev="/fr/walkthrough/shortcodes#paginate" format="terse" >}}
{{< paginate next="/fr/walkthrough/shortcodes#paginate" prev="/fr/walkthrough/shortcodes#paginate" format="default" >}}

Avec un seul lien

{{< paginate prev="/fr/walkthrough/shortcodes#paginate" format="terse" >}}
{{< paginate next="/fr/walkthrough/shortcodes#paginate" format="terse" >}}
{{< paginate prev="/fr/walkthrough/shortcodes#paginate" format="default" >}}
{{< paginate next="/fr/walkthrough/shortcodes#paginate" format="default" >}}