Mise en page
Cet article donne un aperçu de certaines des fonctionnalités disponibles pour la mise en page de vos articles. Il ne s’agit pas de fonctionnalités du Markdown, mais de shortcodes proposés par le thème Hugo.
Onglets
Code :
{{< tabs >}}
{{% tab name="Ubuntu/Debian" %}}
- Dans un terminal :
```bash
sudo apt update
sudo apt install -y git make hugo golang-go nodejs npm python3
```
{{% /tab %}}
{{% tab name="Fedora/AlmaLinux/RHEL"* %}}
- Dans un terminal :
```bash
sudo dnf update
sudo dnf install -y git make hugo golang nodejs npm python3
```
{{% /tab %}}
{{% tab name="ArchLinux" %}}
- Dans un terminal :
```bash
sudo pacman -Syu
sudo pacman -S git make hugo go nodejs npm python --noconfirm
```
{{% /tab %}}
{{< /tabs >}}Résultat :
- Dans un terminal :
sudo apt update
sudo apt install -y git make hugo golang-go nodejs npm python3
- Dans un terminal :
sudo dnf update
sudo dnf install -y git make hugo golang nodejs npm python3
- Dans un terminal :
sudo pacman -Syu
sudo pacman -S git make hugo go nodejs npm python --noconfirm
Colonnes
Vous pouvez diviser des sections de la page en autant de colonnes que vous le souhaitez.
La syntaxe pour diviser une section en colonnes est la suivante :
{{< split A B C ... >}}
Avec A, B, C, … les largeurs respectives des colonnes en pourcents.
La séparation entre le contenu de chaque colonne s’effectue avec une ligne horizontale de tirets ---
La somme des largeurs des colonnes doit être inférieure ou égale à 100% pour que les colonnes soient affichées côte à côte. Si la somme dépasse 100%, les colonnes seront empilées les unes sur les autres.
Sur les écrans plus petits, comme les smartphones, les colonnes seront automatiquement empilées les unes sur les autres pour assurer une bonne lisibilité.
Diviser en 2 colonnes
Code :
{{< split 50 50 >}}
##### Colonne de gauche
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras egestas lectus sed leo ultricies ultricies.
---
##### Colonne de droite
Fusce ut leo turpis. Morbi consectetur sed lacus vitae vehicula. Cras gravida turpis id eleifend volutpat.
{{< /split >}}
Résultat :
Colonne de gauche
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras egestas lectus sed leo ultricies ultricies.
Colonne de droite
Fusce ut leo turpis. Morbi consectetur sed lacus vitae vehicula. Cras gravida turpis id eleifend volutpat.
Les largeurs des colonnes peuvent être différentes.
Code :
{{< split 33 66 >}}
##### Petite colonne de gauche
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras egestas lectus sed leo ultricies ultricies.
---
##### Grosse colonne de droite
Fusce ut leo turpis. Morbi consectetur sed lacus vitae vehicula. Cras gravida turpis id eleifend volutpat.
{{< /split >}}
Résultat :
Petite colonne de gauche
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras egestas lectus sed leo ultricies ultricies.
Grosse colonne de droite
Fusce ut leo turpis. Morbi consectetur sed lacus vitae vehicula. Cras gravida turpis id eleifend volutpat.
Diviser en 3 colonnes
Code :
{{< split 33 33 33 >}}
##### Colonne de gauche
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras egestas lectus sed leo ultricies ultricies.
---
##### Colonne du milieu
Aenean dignissim dictum ex. Donec a nunc vel nibh placerat interdum.
---
##### Colonne de droite
Fusce ut leo turpis. Morbi consectetur sed lacus vitae vehicula. Cras gravida turpis id eleifend volutpat.
{{< /split >}}
Résultat :
Colonne de gauche
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras egestas lectus sed leo ultricies ultricies.
Colonne du milieu
Aenean dignissim dictum ex. Donec a nunc vel nibh placerat interdum.
Colonne de droite
Fusce ut leo turpis. Morbi consectetur sed lacus vitae vehicula. Cras gravida turpis id eleifend volutpat.
Espacement vertical
Il est possible d’ajouter un espace vertical entre deux lignes. L’unité de mesure par défaut est le rem, qui est relative à la taille de la police racine du document. Par exemple, 4rem correspond à quatre fois la taille de la police racine. Cependant, il est possible d’utiliser d’autres unités de mesure en les spécifiant explicitement, comme px pour les pixels.
Code :
Voici la ligne 1.
{{< vs 1rem >}}
Voici la ligne 2. Avec un espace de `1rem` avec la ligne précédente.
{{< vs 4 >}}
Voici la ligne 3. Avec un espace de `4rem` avec la ligne précédente.
{{< vs 20px >}}
Voici la ligne 4. Avec un espace de `20px` avec la ligne précédente.
{{< vs -10px >}}
Voici la ligne 5. Avec un espace de `-10px` avec la ligne précédente.
Résultat :
Voici la ligne 1.
Voici la ligne 2. Avec un espace de1rem avec la ligne précédente.Voici la ligne 3. Avec un espace de 4rem avec la ligne précédente.Voici la ligne 4. Avec un espace de 20px avec la ligne précédente.Voici la ligne 5. Avec un espace de -10px avec la ligne précédente.Centrage
Il est possible de centrer du contenu horizontalement en utilisant le shortcode center.
Code :
{{< center >}}
Voici du texte **centré**.
{{< /center >}}
Résultat :
Code :
{{< center >}}
| Nom | Age |
| ----- | --- |
| Bob | 27 |
| Alice | 23 |
{{< /center >}}
Résultat :
| Nom | Age |
|---|---|
| Bob | 27 |
| Alice | 23 |
Code :
{{< center >}}{{< img src="adder.svg" src_dark="adder_dark.svg" >}} <em>Un bel additionneur</em> {{< /center >}}
Résultat :
Un bel additionneur