41 KiB
title, weight, draft, description, slug, tags, series, series_order
| title | weight | draft | description | slug | tags | series | series_order | ||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| Shortcodes | 6 | false | Tous les shortcodes disponibles dans Blowfish. | shortcodes |
|
|
8 |
En plus de tous les shortcodes Hugo par défaut, Blowfish en ajoute quelques-uns supplémentaires pour des fonctionnalités avancées.
Alert
alert affiche son contenu sous forme de boîte de message stylisée dans votre article. C'est utile pour attirer l'attention sur des informations importantes que vous ne voulez pas que le lecteur manque.
| Paramètre | Description |
|---|---|
icon |
Optionnel. L'icône à afficher sur le côté gauche. Par défaut: triangle-exclamation (Consultez le shortcode icon pour plus de détails sur l'utilisation des icônes.) |
iconColor |
Optionnel. La couleur de l'icône en style CSS basique. Peut être soit des valeurs hexadécimales ( #FFFFFF) soit des noms de couleurs (white)Par défaut choisi en fonction du thème de couleur actuel. |
cardColor |
Optionnel. La couleur de fond de la carte en style CSS basique. Peut être soit des valeurs hexadécimales ( #FFFFFF) soit des noms de couleurs (white)Par défaut choisi en fonction du thème de couleur actuel. |
textColor |
Optionnel. La couleur du texte en style CSS basique. Peut être soit des valeurs hexadécimales ( #FFFFFF) soit des noms de couleurs (white)Par défaut choisi en fonction du thème de couleur actuel. |
L'entrée est écrite en Markdown, vous pouvez donc la formater comme vous le souhaitez.
Exemple 1 : Sans paramètres
{{</* alert */>}}
**Attention !** Cette action est destructive !
{{</* /alert */>}}
{{< alert >}} Attention ! Cette action est destructive ! {{< /alert >}}
Exemple 2 : Paramètre non nommé
{{</* alert "twitter" */>}}
N'oubliez pas de me [suivre](https://twitter.com/nunocoracao) sur Twitter.
{{</* /alert */>}}
{{< alert "twitter" >}} N'oubliez pas de me suivre sur Twitter. {{< /alert >}}
Exemple 3 : Paramètres nommés
{{</* alert icon="fire" cardColor="#e63946" iconColor="#1d3557" textColor="#f1faee" */>}}
Ceci est une erreur !
{{</* /alert */>}}
{{< alert icon="fire" cardColor="#e63946" iconColor="#1d3557" textColor="#f1faee" >}} Ceci est une erreur ! {{< /alert >}}
Admonition
Les admonitions vous permettent d'insérer des encadrés d'avertissement accrocheurs dans votre contenu.
Les admonitions servent un objectif similaire au shortcode alert mais sont implémentées via des hooks de rendu Hugo. La différence clé est la syntaxe : les admonitions utilisent la syntaxe Markdown, ce qui les rend plus portables entre différentes plateformes, tandis que les shortcodes sont spécifiques à Hugo. La syntaxe ressemble aux alertes GitHub :
> [!NOTE]
> Une admonition de type Note.
> [!TIP]+ Titre personnalisé
> Une admonition repliable avec un titre personnalisé.
Note
Une admonition de type Note.
[!TIP]+ Titre personnalisé Une admonition repliable avec un titre personnalisé.
Le signe d'alerte (+ ou -) est optionnel pour contrôler si l'admonition est repliée ou non. Notez que le signe d'alerte n'est compatible qu'avec Obsidian.
[!INFO]- Types supportés Les types d'admonition valides incluent les types d'alerte GitHub et les types de callout Obsidian. Les types ne sont pas sensibles à la casse.
Types GitHub :
NOTE,TIP,IMPORTANT,WARNING,CAUTIONTypes Obsidian :note,abstract,info,todo,tip,success,question,warning,failure,danger,bug,example,quote
Article
Article intègre un seul article dans un fichier markdown. Le link vers le fichier doit être le .RelPermalink du fichier à intégrer. Notez que le shortcode n'affichera rien s'il fait référence à sa page parente. Note : si vous exécutez votre site dans un sous-dossier comme Blowfish (c'est-à-dire /blowfish/), veuillez inclure ce chemin dans le lien.
| Paramètre | Description |
|---|---|
link |
Requis. Le .RelPermalink vers l'article cible. |
showSummary |
Optionnel. Une valeur booléenne indiquant s'il faut afficher le résumé de l'article. Si non défini, la configuration par défaut du site sera utilisée. |
compactSummary |
Optionnel. Une valeur booléenne indiquant s'il faut afficher le résumé en mode compact. Par défaut false. |
Exemple :
{{</* article link="/docs/welcome/" showSummary=true compactSummary=true */>}}
{{< article link="/docs/welcome/" showSummary=true compactSummary=true >}}
Badge
badge affiche un composant de badge stylisé qui est utile pour afficher des métadonnées.
Exemple :
{{</* badge */>}}
Nouvel article !
{{</* /badge */>}}
{{< badge >}} Nouvel article ! {{< /badge >}}
Button
button affiche un composant de bouton stylisé qui peut être utilisé pour mettre en évidence une action principale. Il a trois variables optionnelles href, target et rel qui peuvent être utilisées pour spécifier l'URL, la cible et la relation du lien.
Exemple :
{{</* button href="#button" target="_self" */>}}
Appel à l'action
{{</* /button */>}}
{{< button href="#button" target="_self" >}} Appel à l'action {{< /button >}}
Carousel
carousel est utilisé pour présenter plusieurs images de manière interactive et visuellement attrayante. Cela permet à un utilisateur de faire défiler plusieurs images tout en n'occupant que l'espace vertical d'une seule. Toutes les images sont affichées en utilisant la largeur complète du composant parent et le ratio d'aspect que vous définissez avec une valeur par défaut de 16:9.
| Paramètre | Description |
|---|---|
images |
Requis. Une chaîne regex pour correspondre aux noms ou URLs des images. |
aspectRatio |
Optionnel. Le ratio d'aspect pour le carrousel. Par défaut 16-9. |
interval |
Optionnel. L'intervalle pour le défilement automatique, spécifié en millisecondes. Par défaut 2000 (2s) |
Exemple 1 : Ratio d'aspect 16:9 et liste d'images détaillée
{{</* carousel images="{https://cdn.pixabay.com/photo/2016/12/11/12/02/mountains-1899264_960_720.jpg,gallery/03.jpg,gallery/01.jpg,gallery/02.jpg,gallery/04.jpg}" */>}}
{{< carousel images="{https://cdn.pixabay.com/photo/2016/12/11/12/02/mountains-1899264_960_720.jpg,gallery/03.jpg,gallery/01.jpg,gallery/02.jpg,gallery/04.jpg}" >}}
Exemple 2 : Ratio d'aspect 21:9 et liste d'images avec regex
{{</* carousel images="gallery/*" aspectRatio="21-9" interval="2500" */>}}
{{< carousel images="gallery/*" aspectRatio="21-9" interval="2500" >}}
Chart
chart utilise la bibliothèque Chart.js pour intégrer des graphiques dans les articles en utilisant des données structurées simples. Il prend en charge un certain nombre de différents styles de graphiques et tout peut être configuré depuis le shortcode. Fournissez simplement les paramètres du graphique entre les balises du shortcode et Chart.js fera le reste.
Consultez la documentation officielle Chart.js pour les détails sur la syntaxe et les types de graphiques supportés.
Exemple :
{{</* chart */>}}
type: 'bar',
data: {
labels: ['Tomate', 'Myrtille', 'Banane', 'Citron vert', 'Orange'],
datasets: [{
label: '# de votes',
data: [12, 19, 3, 5, 3],
}]
}
{{</* /chart */>}}
{{< chart >}} type: 'bar', data: { labels: ['Tomato', 'Blueberry', 'Banana', 'Lime', 'Orange'], datasets: [{ label: '# of votes', data: [12, 19, 3, 5, 3], }] } {{< /chart >}}
Vous pouvez voir des exemples Chart.js supplémentaires sur la page [exemples de graphiques]({{< ref "charts" >}}).
Code Importer
Ce shortcode permet d'importer facilement du code depuis des sources externes sans copier-coller.
| Paramètre | Description |
|---|---|
url |
Requis URL vers un fichier de code hébergé externement. |
type |
Type de code utilisé pour la coloration syntaxique. |
startLine |
Optionnel Le numéro de ligne à partir duquel commencer l'import. |
endLine |
Optionnel Le numéro de ligne auquel terminer l'import. |
Exemple :
{{</* codeimporter url="https://raw.githubusercontent.com/nunocoracao/blowfish/main/layouts/shortcodes/mdimporter.html" type="go" */>}}
{{< codeimporter url="https://raw.githubusercontent.com/nunocoracao/blowfish/main/layouts/shortcodes/mdimporter.html" type="go" >}}
{{</* codeimporter url="https://raw.githubusercontent.com/nunocoracao/blowfish/main/config/_default/hugo.toml" type="toml" startLine="11" endLine="18" */>}}
{{< codeimporter url="https://raw.githubusercontent.com/nunocoracao/blowfish/main/config/_default/hugo.toml" type="toml" startLine="11" endLine="18">}}
Codeberg Card
codeberg vous permet de créer rapidement un lien vers un dépôt Codeberg via l'API Codeberg, fournissant des mises à jour en temps réel sur les statistiques telles que les étoiles et les forks.
| Paramètre | Description |
|---|---|
repo |
[String] dépôt Codeberg au format utilisateur/repo |
Exemple 1 :
{{</* codeberg repo="forgejo/forgejo" */>}}
{{< codeberg repo="forgejo/forgejo" >}}
Figure
Blowfish inclut un shortcode figure pour ajouter des images au contenu. Le shortcode remplace la fonctionnalité Hugo de base afin de fournir des avantages de performance supplémentaires.
Lorsqu'une image fournie est une ressource de page, elle sera optimisée en utilisant Hugo Pipes et mise à l'échelle pour fournir des images appropriées aux différentes résolutions d'appareils. Si un asset statique ou une URL vers une image externe est fourni, il sera inclus tel quel sans aucun traitement d'image par Hugo.
Le shortcode figure accepte six paramètres :
| Paramètre | Description |
|---|---|
src |
Requis. Le chemin/nom de fichier local ou l'URL de l'image. Lors de la fourniture d'un chemin et d'un nom de fichier, le thème tentera de localiser l'image en utilisant l'ordre de recherche suivant : Premièrement, comme une ressource de page groupée avec la page ; puis un asset dans le répertoire assets/ ; et enfin, une image statique dans le répertoire static/. |
alt |
Description textuelle alternative pour l'image. |
caption |
Markdown pour la légende de l'image, qui sera affichée sous l'image. |
class |
Classes CSS supplémentaires à appliquer à l'image. |
href |
URL vers laquelle l'image doit être liée. |
target |
L'attribut cible pour l'URL href. |
nozoom |
nozoom=true désactive la fonctionnalité de "zoom" de l'image. C'est particulièrement utile en combinaison avec un lien href. |
default |
Paramètre spécial pour revenir au comportement figure Hugo par défaut. Fournissez simplement default=true puis utilisez la syntaxe de shortcode Hugo normale. |
Blowfish prend également en charge la conversion automatique des images incluses en utilisant la syntaxe Markdown standard. Utilisez simplement le format suivant et le thème s'occupera du reste :
Exemple :
{{</* figure
src="abstract.jpg"
alt="Œuvre d'art abstraite violette"
caption="Photo par [Jr Korpa](https://unsplash.com/@jrkorpa) sur [Unsplash](https://unsplash.com/)"
*/>}}
<!-- OU -->
{{< figure src="abstract.jpg" alt="Abstract purple artwork" caption="Photo par Jr Korpa sur Unsplash" >}}
Forgejo Card
forgejo vous permet de créer rapidement un lien vers un dépôt Forgejo via l'API Forgejo, fournissant des mises à jour en temps réel sur les statistiques telles que les étoiles et les forks.
| Paramètre | Description |
|---|---|
repo |
[String] dépôt Forgejo au format utilisateur/repo |
server |
[String] URL du serveur comme https://v11.next.forgejo.org |
Exemple 1 :
{{</* forgejo server="https://v11.next.forgejo.org" repo="a/mastodon" */>}}
{{< forgejo server="https://v11.next.forgejo.org" repo="a/mastodon" >}}
Gallery
gallery vous permet de présenter plusieurs images à la fois, de manière responsive avec des mises en page plus variées et intéressantes.
Pour ajouter des images à la galerie, utilisez des balises img pour chaque image et ajoutez class="grid-wXX" pour que la galerie puisse identifier la largeur de colonne pour chaque image. Les largeurs disponibles par défaut commencent à 10% et vont jusqu'à 100% par incréments de 5%. Par exemple, pour définir la largeur à 65%, définissez la classe sur grid-w65. De plus, des largeurs pour 33% et 66% sont également disponibles pour construire des galeries à 3 colonnes. Vous pouvez également utiliser les indicateurs responsive de Tailwind pour avoir une grille responsive.
Exemple 1 : Galerie normale
{{</* gallery */>}}
<img src="gallery/01.jpg" class="grid-w33" />
<img src="gallery/02.jpg" class="grid-w33" />
<img src="gallery/03.jpg" class="grid-w33" />
<img src="gallery/04.jpg" class="grid-w33" />
<img src="gallery/05.jpg" class="grid-w33" />
<img src="gallery/06.jpg" class="grid-w33" />
<img src="gallery/07.jpg" class="grid-w33" />
{{</* /gallery */>}}
{{< gallery >}}
{{< /gallery >}}
Exemple 2 : Galerie responsive
{{</* gallery */>}}
<img src="gallery/01.jpg" class="grid-w50 md:grid-w33 xl:grid-w25" />
<img src="gallery/02.jpg" class="grid-w50 md:grid-w33 xl:grid-w25" />
<img src="gallery/03.jpg" class="grid-w50 md:grid-w33 xl:grid-w25" />
<img src="gallery/04.jpg" class="grid-w50 md:grid-w33 xl:grid-w25" />
<img src="gallery/05.jpg" class="grid-w50 md:grid-w33 xl:grid-w25" />
<img src="gallery/06.jpg" class="grid-w50 md:grid-w33 xl:grid-w25" />
<img src="gallery/07.jpg" class="grid-w50 md:grid-w33 xl:grid-w25" />
{{</* /gallery */>}}
{{< gallery >}}
{{< /gallery >}}
Gist
Le shortcode gist vous permet d'intégrer un GitHub Gist directement dans votre contenu en spécifiant l'utilisateur du Gist, l'ID, et optionnellement un fichier spécifique.
| Paramètre | Description |
|---|---|
[0] |
[String] Nom d'utilisateur GitHub |
[1] |
[String] ID du Gist |
[2] (optionnel) |
[String] Nom de fichier dans le Gist à intégrer (optionnel) |
Exemple 1 : Intégrer un Gist entier
{{</* gist "octocat" "6cad326836d38bd3a7ae" */>}}
{{< gist "octocat" "6cad326836d38bd3a7ae" >}}
Exemple 2 : Intégrer un fichier spécifique du Gist
{{</* gist "rauchg" "2052694" "README.md" */>}}
{{< gist "rauchg" "2052694" "README.md" >}}
Gitea Card
gitea vous permet de créer rapidement un lien vers un dépôt Gitea via l'API Gitea, fournissant des mises à jour en temps réel sur les statistiques telles que les étoiles et les forks.
| Paramètre | Description |
|---|---|
repo |
[String] dépôt Gitea au format utilisateur/repo |
server |
[String] URL du serveur comme https://git.fsfe.org |
Exemple 1 :
{{</* gitea server="https://git.fsfe.org" repo="FSFE/fsfe-website" */>}}
{{< gitea server="https://git.fsfe.org" repo="FSFE/fsfe-website" >}}
GitHub Card
github vous permet de créer rapidement un lien vers un dépôt GitHub, tout en affichant et mettant à jour en temps réel les statistiques le concernant, comme le nombre d'étoiles et de forks.
| Paramètre | Description |
|---|---|
repo |
[String] dépôt GitHub au format utilisateur/repo |
showThumbnail |
Optionnel [boolean] affiche une vignette pour le dépôt |
Exemple 1 :
{{</* github repo="nunocoracao/blowfish" showThumbnail=true */>}}
{{< github repo="nunocoracao/blowfish" showThumbnail=true >}}
GitLab Card
gitlab vous permet de créer rapidement un lien vers un projet GitLab (le terme GitLab pour dépôt).
Il affiche les statistiques en temps réel le concernant, comme le nombre d'étoiles et de forks.
Contrairement à github, il ne peut pas afficher le langage de programmation principal d'un projet.
Enfin, une URL d'instance GitLab personnalisée peut être fournie, tant que le point de terminaison api/v4/projects/ est disponible, ce qui rend ce shortcode compatible avec la plupart des déploiements auto-hébergés / entreprise.
| Paramètre | Description |
|---|---|
projectID |
[String] ID numérique du projet GitLab |
baseURL |
[String] URL optionnelle de l'instance GitLab, par défaut https://gitlab.com/ |
Exemple 1 :
{{</* gitlab projectID="278964" */>}}
{{< gitlab projectID="278964" >}}
Hugging Face Card
huggingface vous permet de créer rapidement un lien vers un modèle ou un dataset Hugging Face, affichant des informations en temps réel comme le nombre de likes et de téléchargements, ainsi que le type et la description.
| Paramètre | Description |
|---|---|
model |
[String] Modèle Hugging Face au format utilisateur/modèle |
dataset |
[String] Dataset Hugging Face au format utilisateur/dataset |
Note : Utilisez soit le paramètre model soit dataset, pas les deux.
Exemple 1 (Modèle) :
{{</* huggingface model="google-bert/bert-base-uncased" */>}}
{{< huggingface model="google-bert/bert-base-uncased" >}}
Exemple 2 (Dataset) :
{{</* huggingface dataset="stanfordnlp/imdb" */>}}
{{< huggingface dataset="stanfordnlp/imdb" >}}
Icon
icon affiche une icône SVG et prend le nom de l'icône comme seul paramètre. L'icône est mise à l'échelle pour correspondre à la taille du texte actuel.
Exemple :
{{</* icon "github" */>}}
Sortie : {{< icon "github" >}}
Les icônes sont remplies en utilisant les pipelines Hugo, ce qui les rend très flexibles. Blowfish inclut un certain nombre d'icônes intégrées pour les réseaux sociaux, les liens et d'autres usages. Consultez la page [exemples d'icônes]({{< ref "samples/icons" >}}) pour une liste complète des icônes supportées.
Des icônes personnalisées peuvent être ajoutées en fournissant vos propres assets d'icônes dans le répertoire assets/icons/ de votre projet. L'icône peut ensuite être référencée dans le shortcode en utilisant le nom du fichier SVG sans l'extension .svg.
Les icônes peuvent également être utilisées dans les partials en appelant le [partial icon]({{< ref "partials#icon" >}}).
KaTeX
Le shortcode katex peut être utilisé pour ajouter des expressions mathématiques au contenu des articles en utilisant le package KaTeX. Consultez la référence en ligne des fonctions TeX supportées pour la syntaxe disponible.
Pour inclure des expressions mathématiques dans un article, placez simplement le shortcode n'importe où dans le contenu. Il ne doit être inclus qu'une fois par article et KaTeX rendra automatiquement tout le markup de cette page. Les notations inline et bloc sont supportées.
La notation inline peut être générée en entourant l'expression des délimiteurs \( et \). Alternativement, la notation bloc peut être générée en utilisant les délimiteurs $$.
Exemple :
{{</* katex */>}}
\(f(a,b,c) = (a^2+b^2+c^2)^3\)
{{< katex >}} (f(a,b,c) = (a^2+b^2+c^2)^3)
Consultez la page [exemples de notation mathématique]({{< ref "mathematical-notation" >}}) pour plus d'exemples.
Keyword
Le composant keyword peut être utilisé pour mettre en évidence visuellement certains mots ou phrases importants, par exemple les compétences professionnelles, etc. Le shortcode keywordList peut être utilisé pour regrouper plusieurs éléments keyword. Chaque élément peut avoir les propriétés suivantes.
| Paramètre | Description |
|---|---|
icon |
Icône optionnelle à utiliser dans le keyword |
L'entrée est écrite en Markdown, vous pouvez donc la formater comme vous le souhaitez.
Exemple 1 :
{{</* keyword */>}} *Super* compétence {{</* /keyword */>}}
{{< keyword >}} Super compétence {{< /keyword >}}
Exemple 2 :
{{</* keywordList */>}}
{{</* keyword icon="github" */>}} Lorem ipsum dolor. {{</* /keyword */>}}
{{</* keyword icon="code" */>}} Compétence **importante** {{</* /keyword */>}}
{{</* /keywordList */>}}
{{</* keyword */>}} Compétence *autonome* {{</* /keyword */>}}
{{< keywordList >}} {{< keyword icon="github" >}} Lorem ipsum dolor {{< /keyword >}} {{< keyword icon="code" >}} Compétence importante {{< /keyword >}} {{< /keywordList >}} {{< keyword >}} Compétence autonome {{< /keyword >}}
Lead
lead est utilisé pour mettre en évidence le début d'un article. Il peut être utilisé pour styliser une introduction ou pour attirer l'attention sur une information importante. Entourez simplement tout contenu Markdown dans le shortcode lead.
Exemple :
{{</* lead */>}}
Quand la vie te donne des citrons, fais de la limonade.
{{</* /lead */>}}
{{< lead >}} Quand la vie te donne des citrons, fais de la limonade. {{< /lead >}}
List
List affichera une liste des articles récents. Ce shortcode nécessite une valeur limite pour contraindre la liste. De plus, il supporte un where et un value pour filtrer les articles par leurs paramètres. Notez que ce shortcode n'affichera pas sa page parente mais elle comptera pour la valeur limite.
| Paramètre | Description |
|---|---|
limit |
Requis. Le nombre d'articles récents à afficher. |
title |
Titre optionnel pour la liste, par défaut Recent |
cardView |
Vue en carte optionnelle activée pour la liste, par défaut false |
where |
La variable à utiliser pour la requête des articles, par exemple Type |
value |
La valeur qui devra correspondre au paramètre défini dans where pour la requête des articles, par exemple pour where == Type une valeur valide pourrait être sample |
{{< alert >}}
Les valeurs where et value sont utilisées dans la requête suivante where .Site.RegularPages $where $value dans le code du shortcode. Consultez les docs Hugo pour en savoir plus sur les paramètres disponibles.
{{</ alert >}}
Exemple #1 :
{{</* list limit=2 */>}}
{{< list limit=2 >}}
Exemple #2 :
{{</* list title="Exemples" cardView=true limit=6 where="Type" value="sample" */>}}
{{< list title="Samples" cardView=true limit=6 where="Type" value="sample">}}
LTR/RTL
ltr et rtl vous permettent de mélanger vos contenus. De nombreux utilisateurs de langues RTL veulent inclure des parties du contenu en LTR. Ce shortcode vous permettra de le faire, et en utilisant % comme délimiteur externe dans le shortcode Hugo shortcodes, tout markdown à l'intérieur sera rendu normalement.
Exemple :
- Ceci est une liste markdown.
- Direction LTR par défaut
{{%/* rtl */%}}
- هذه القائمة باللغة العربية
- من اليمين الى اليسار
{{%/* /rtl */%}}
- Ceci est une liste markdown.
- Direction LTR par défaut {{% rtl %}}
- هذه القائمة باللغة العربية
- من اليمين الى اليسار {{% /rtl %}}
Markdown Importer
Ce shortcode vous permet d'importer des fichiers markdown depuis des sources externes. C'est utile pour inclure du contenu d'autres dépôts ou sites web sans avoir à copier-coller le contenu.
| Paramètre | Description |
|---|---|
url |
Requis URL vers un fichier markdown hébergé externement. |
Exemple :
{{</* mdimporter url="https://raw.githubusercontent.com/nunocoracao/nunocoracao/master/README.md" */>}}
{{< mdimporter url="https://raw.githubusercontent.com/nunocoracao/nunocoracao/master/README.md" >}}
Mermaid
mermaid vous permet de dessiner des diagrammes et visualisations détaillés en utilisant du texte. Il utilise Mermaid en arrière-plan et supporte une grande variété de diagrammes, graphiques et autres formats de sortie.
Écrivez simplement votre syntaxe Mermaid dans le shortcode mermaid et laissez le plugin faire le reste.
Consultez la documentation officielle Mermaid pour les détails sur la syntaxe et les types de diagrammes supportés.
Exemple :
{{</* mermaid */>}}
graph LR;
A[Citrons]-->B[Limonade];
B-->C[Profit]
{{</* /mermaid */>}}
{{< mermaid >}} graph LR; A[Lemons]-->B[Lemonade]; B-->C[Profit] {{< /mermaid >}}
Vous pouvez voir des exemples Mermaid supplémentaires sur la page [exemples de diagrammes et organigrammes]({{< ref "diagrams-flowcharts" >}}).
Swatches
swatches affiche un ensemble de jusqu'à trois couleurs différentes pour présenter des éléments de couleur comme une palette de couleurs. Ce shortcode prend les codes HEX de chaque couleur et crée les éléments visuels pour chacune.
Exemple
{{</* swatches "#64748b" "#3b82f6" "#06b6d4" */>}}
Sortie {{< swatches "#64748b" "#3b82f6" "#06b6d4" >}}
Tabs
Le shortcode tabs est couramment utilisé pour présenter différentes variantes d'une étape particulière. Par exemple, il peut être utilisé pour montrer comment installer VS Code sur différentes plateformes.
Exemple
{{</* tabs */>}}
{{</* tab label="Windows" */>}}
Installer avec Chocolatey :
```pwsh
choco install vscode.install
```
ou installer avec WinGet
```pwsh
winget install -e --id Microsoft.VisualStudioCode
```
{{</* /tab */>}}
{{</* tab label="macOS" */>}}
```bash
brew install --cask visual-studio-code
```
{{</* /tab */>}}
{{</* tab label="Linux" */>}}
Voir la [documentation](https://code.visualstudio.com/docs/setup/linux#_install-vs-code-on-linux).
{{</* /tab */>}}
{{</* /tabs */>}}
Sortie
{{< tabs >}}
{{< tab label="Windows" >}}
Installer avec Chocolatey :
```pwsh
choco install vscode.install
```
ou installer avec WinGet
```pwsh
winget install -e --id Microsoft.VisualStudioCode
```
{{< /tab >}}
{{< tab label="macOS" >}}
```bash
brew install --cask visual-studio-code
```
{{< /tab >}}
{{< tab label="Linux" >}}
Voir la [documentation](https://code.visualstudio.com/docs/setup/linux#_install-vs-code-on-linux).
{{< /tab >}}
{{< /tabs >}}
Timeline
Le timeline crée une timeline visuelle qui peut être utilisée dans différents cas d'utilisation, par exemple l'expérience professionnelle, les réalisations d'un projet, etc. Le shortcode timeline repose sur le sous-shortcode timelineItem pour définir chaque élément dans la timeline principale. Chaque élément peut avoir les propriétés suivantes.
| Paramètre | Description |
|---|---|
md |
Rendre le contenu en Markdown (true/false) |
icon |
L'icône à utiliser dans les visuels de la timeline |
header |
En-tête pour chaque entrée |
badge |
Texte à placer dans le badge en haut à droite |
subheader |
Sous-en-tête de l'entrée |
Exemple :
{{</* timeline */>}}
{{</* timelineItem icon="github" header="En-tête" badge="Test badge" subheader="Sous-en-tête" */>}}
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus non magna ex. Donec sollicitudin ut lorem quis lobortis. Nam ac ipsum libero. Sed a ex eget ipsum tincidunt venenatis quis sed nisl. Pellentesque sed urna vel odio consequat tincidunt id ut purus. Nam sollicitudin est sed dui interdum rhoncus.
{{</* /timelineItem */>}}
{{</* timelineItem icon="code" header="Un autre super en-tête" badge="date - présent" subheader="Super sous-en-tête" */>}}
Avec du code HTML
<ul>
<li>Café</li>
<li>Thé</li>
<li>Lait</li>
</ul>
{{</* /timelineItem */>}}
{{</* timelineItem icon="star" header="Shortcodes" badge="GÉNIAL" */>}}
Avec d'autres shortcodes
{{</* gallery */>}}
<img src="gallery/01.jpg" class="grid-w33" />
<img src="gallery/02.jpg" class="grid-w33" />
<img src="gallery/03.jpg" class="grid-w33" />
<img src="gallery/04.jpg" class="grid-w33" />
<img src="gallery/05.jpg" class="grid-w33" />
<img src="gallery/06.jpg" class="grid-w33" />
<img src="gallery/07.jpg" class="grid-w33" />
{{</* /gallery */>}}
{{</* /timelineItem */>}}
{{</* timelineItem icon="code" header="Un autre super en-tête"*/>}}
{{</* github repo="nunocoracao/blowfish" */>}}
{{</* /timelineItem */>}}
{{</* /timeline */>}}
{{< timeline >}}
{{< timelineItem icon="github" header="header" badge="badge test" subheader="subheader" >}} Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus non magna ex. Donec sollicitudin ut lorem quis lobortis. Nam ac ipsum libero. Sed a ex eget ipsum tincidunt venenatis quis sed nisl. Pellentesque sed urna vel odio consequat tincidunt id ut purus. Nam sollicitudin est sed dui interdum rhoncus. {{</ timelineItem >}}
{{< timelineItem icon="code" header="Another Awesome Header" badge="date - present" subheader="Awesome Subheader">}} Avec du code HTML
- Café
- Thé
- Lait
{{< timelineItem icon="star" header="Shortcodes" badge="AWESOME" >}}
Avec d'autres shortcodes
{{< gallery >}}
{{< /gallery >}}
{{</ timelineItem >}}
{{< timelineItem icon="code" header="Another Awesome Header">}}
{{< github repo="nunocoracao/blowfish" >}}
{{</ timelineItem >}}
{{</ timeline >}}
TypeIt
TypeIt est l'outil JavaScript le plus polyvalent pour créer des effets de machine à écrire sur la planète. Avec une configuration simple, il vous permet de taper des chaînes simples ou multiples qui font des retours à la ligne, se suppriment et se remplacent mutuellement, et il peut même gérer des chaînes contenant du HTML complexe.
Blowfish implémente un sous-ensemble des fonctionnalités TypeIt en utilisant un shortcode. Écrivez votre texte dans le shortcode typeit et utilisez les paramètres suivants pour configurer le comportement souhaité.
| Paramètre | Description |
|---|---|
tag |
[String] Balise html qui sera utilisée pour rendre les chaînes. |
classList |
[String] Liste de classes css à appliquer à l'élément html. |
initialString |
[String] Chaîne initiale qui apparaîtra écrite et sera remplacée. |
speed |
[number] Vitesse de frappe, mesurée en millisecondes entre chaque étape. |
lifeLike |
[boolean] Rend le rythme de frappe irrégulier, comme si une vraie personne le faisait. |
startDelay |
[number] Le temps avant que le plugin commence à taper après avoir été initialisé. |
breakLines |
[boolean] Si plusieurs chaînes sont imprimées les unes sur les autres (true), ou si elles sont supprimées et remplacées les unes par les autres (false). |
waitUntilVisible |
[boolean] Détermine si l'instance commencera au chargement ou seulement lorsque l'élément cible devient visible dans le viewport. Par défaut true |
loop |
[boolean] Si vos chaînes seront continuellement répétées après la complétion |
Exemple 1 :
{{</* typeit */>}}
Lorem ipsum dolor sit amet
{{</* /typeit */>}}
{{< typeit >}} Lorem ipsum dolor sit amet {{< /typeit >}}
Exemple 2 :
{{</* typeit
tag=h1
lifeLike=true
*/>}}
Lorem ipsum dolor sit amet,
consectetur adipiscing elit.
{{</* /typeit */>}}
{{< typeit tag=h1 lifeLike=true
}} Lorem ipsum dolor sit amet, consectetur adipiscing elit. {{< /typeit >}}
Exemple 3 :
{{</* typeit
tag=h3
speed=50
breakLines=false
loop=true
*/>}}
"Franchement, ma chère, c'est le cadet de mes soucis." Autant en emporte le vent (1939)
"Je vais lui faire une offre qu'il ne pourra pas refuser." Le Parrain (1972)
"Toto, j'ai l'impression que nous ne sommes plus au Kansas." Le Magicien d'Oz (1939)
{{</* /typeit */>}}
{{< typeit tag=h3 speed=50 breakLines=false loop=true
}} "Frankly, my dear, I don't give a damn." Gone with the Wind (1939) "I'm gonna make him an offer he can't refuse." The Godfather (1972) "Toto, I've a feeling we're not in Kansas anymore." The Wizard of Oz (1939) {{< /typeit >}}
Video
Blowfish inclut un shortcode video pour intégrer des vidéos locales ou externes dans le contenu. Le shortcode génère un conteneur <figure> avec un lecteur vidéo adaptatif et une légende facultative.
Le shortcode video accepte les paramètres suivants :
| Paramètre | Description |
|---|---|
src |
Requis. URL de la vidéo ou chemin local. Ordre de recherche local : ressource de page → assets/ → static/. |
poster |
Image d'affiche optionnelle (URL ou chemin local). Si omise, le shortcode tente une image du même nom dans le bundle de page. |
caption |
Légende Markdown optionnelle affichée sous la vidéo. |
autoplay |
true/false. Active la lecture automatique quand true. Par défaut : false. |
loop |
true/false. Boucle quand true. Par défaut : false. |
muted |
true/false. Met en sourdine quand true. Par défaut : false. |
controls |
true/false. Affiche les contrôles de lecture par défaut du navigateur quand true. Par défaut : true. |
playsinline |
true/false. Lecture en ligne sur mobile quand true. Par défaut : true. |
preload |
metadata (charge les infos), none (économise la bande passante) ou auto (précharge davantage). Par défaut : metadata. |
start |
Temps de début optionnel en secondes. |
end |
Temps de fin optionnel en secondes. |
ratio |
Ratio d'aspect réservé pour le lecteur. Prend en charge 16/9, 4/3, 1/1 ou W/H personnalisé. Par défaut : 16/9. |
fit |
Ajustement de la vidéo dans le ratio : contain (pas de recadrage), cover (recadre pour remplir), fill (étire). Par défaut : contain. |
Si le navigateur ne peut pas lire la vidéo, le lecteur affiche un message minimal en anglais avec un lien de téléchargement.
Exemple :
{{</* video
src="https://upload.wikimedia.org/wikipedia/commons/5/5a/CC0_-_Public_Domain_Dedication_video_bumper.webm"
poster="https://upload.wikimedia.org/wikipedia/commons/e/e0/CC0.jpg"
caption="**Démo du domaine public** — vidéo et affiche CC0."
loop=true
muted=true
*/>}}
{{< video src="https://upload.wikimedia.org/wikipedia/commons/5/5a/CC0_-_Public_Domain_Dedication_video_bumper.webm" poster="https://upload.wikimedia.org/wikipedia/commons/e/e0/CC0.jpg" caption="Démo du domaine public — vidéo et affiche CC0." loop=true muted=true
}}
Youtube Lite
Un raccourci pour intégrer des vidéos YouTube en utilisant la bibliothèque lite-youtube-embed. Cette bibliothèque est une alternative légère aux intégrations YouTube standard, et elle est conçue pour être plus rapide et plus efficace.
| Paramètre | Description |
|---|---|
id |
[String] ID de la vidéo YouTube à intégrer. |
label |
[String] Libellé pour la vidéo |
params |
[String] Paramètres supplémentaires pour la lecture vidéo |
Exemple 1 :
{{</* youtubeLite id="SgXhGb-7QbU" label="Démo Blowfish-tools" */>}}
{{< youtubeLite id="SgXhGb-7QbU" label="Blowfish-tools demo" >}}
Exemple 2 :
Vous pouvez utiliser tous les paramètres du lecteur YouTube pour la variable params, comme démontré ci-dessous :
Cette vidéo démarrera après 130 secondes (2m10)
{{</* youtubeLite id="SgXhGb-7QbU" label="Démo Blowfish-tools" params="start=130" */>}}
Cette vidéo n'aura pas de contrôles d'interface utilisateur, démarrera à 130 secondes et s'arrêtera 10 secondes plus tard.
Pour concaténer plusieurs options comme indiqué ci-dessous, vous devez ajouter le caractère & entre elles.
{{</* youtubeLite id="SgXhGb-7QbU" label="Démo Blowfish-tools" params="start=130&end=10&controls=0" */>}}
{{< youtubeLite id="SgXhGb-7QbU" label="Blowfish-tools demo" params="start=130&end=10&controls=0" >}}
Plus d'informations peuvent être trouvées sur le repo GitHub youtubeLite et la page paramètres du lecteur de YouTube.