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.

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 >}}

Exemple 2 : Paramètre non nommé

{{< alert "twitter" >}}
N'oubliez pas de me [suivre](https://twitter.com/nunocoracao) sur Twitter.
{{< /alert >}}

Exemple 3 : Paramètres nommés

{{< 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é.

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.

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.

Exemple :

{{< article link="/docs/welcome/" showSummary=true compactSummary=true >}}

Welcome to Blowfish

3 mins

New Docs

Blowfish is packed with tons of features. The original aim of Blowfish was to develop a theme that was simple and lightweight. The theme is a fork of Congo and expands its initial vision.

Badge

#

badge affiche un composant de badge stylisé qui est utile pour afficher des métadonnées.

Exemple :

{{< 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 >}}

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.

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}" >}}

Previous Next

Exemple 2 : Ratio d’aspect 21:9 et liste d’images avec regex

{{< carousel images="gallery/*" aspectRatio="21-9" interval="2500" >}}

Previous Next

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 >}}

Vous pouvez voir des exemples Chart.js supplémentaires sur la page exemples de graphiques.

Code Importer

#

Ce shortcode permet d’importer facilement du code depuis des sources externes sans copier-coller.

Exemple :

{{< codeimporter url="https://raw.githubusercontent.com/nunocoracao/blowfish/main/layouts/shortcodes/mdimporter.html" type="go" >}}

{{ $url := .Get "url" }}
{{ with resources.GetRemote (urls.Parse $url) }}
  {{ .Content | markdownify }}
{{ else }}
  {{ warnf "mdimporter shortcode: unable to fetch %q: %s" $url .Position }}
{{ end }}

{{< codeimporter url="https://raw.githubusercontent.com/nunocoracao/blowfish/main/config/_default/hugo.toml" type="toml" startLine="11" endLine="18" >}}

enableRobotsTXT = true
summaryLength = 0

buildDrafts = false
buildFuture = false

enableEmoji = true

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.

Exemple 1 :

{{< 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 :

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 :

![Texte alternatif](image.jpg "Légende de l'image")

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 -->

![Œuvre d'art abstraite violette](abstract.jpg "Photo par [Jr Korpa](https://unsplash.com/@jrkorpa) sur [Unsplash](https://unsplash.com/)")

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.

Exemple 1 :

{{< 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 >}}

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 >}}

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.

Exemple 1 : Intégrer un Gist entier

{{< gist "octocat" "6cad326836d38bd3a7ae" >}}

Exemple 2 : Intégrer un fichier spécifique du Gist

{{< 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.

Exemple 1 :

{{< 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.

Exemple 1 :

{{< github repo="nunocoracao/blowfish" showThumbnail=true >}}

nunocoracao/blowfish

Personal Website & Blog Theme for Hugo

HTML

2423

628

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.

Exemple 1 :

{{< 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.

Note : Utilisez soit le paramètre model soit dataset, pas les deux.

Exemple 1 (Modèle) :

{{< huggingface model="google-bert/bert-base-uncased" >}}

Exemple 2 (Dataset) :

{{< 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 :

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 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.

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\)

\(f(a,b,c) = (a^2+b^2+c^2)^3\)

Consultez la page exemples de notation mathématique 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.

L’entrée est écrite en Markdown, vous pouvez donc la formater comme vous le souhaitez.

Exemple 1 :

{{< 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 >}}

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 >}}

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.

Exemple #1 :

{{< list limit=2 >}}

Articles récents

Bienvenue sur Blowfish

4 mins

Nouveau Documentation

n9o.xyz ↗ ↖

Site Personnel Theme Author

Exemple #2 :

{{< list title="Exemples" cardView=true limit=6 where="Type" value="sample" >}}

Samples

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

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.

Exemple :

{{< mdimporter url="https://raw.githubusercontent.com/nunocoracao/nunocoracao/master/README.md" >}}

Hi there 👋

#

🧠 Principal PM @ Docker (AI, agents, infra) · Creator of Blowfish · Ex-founder · Mentor & advisor

• 🚀 Personal blog - n9o.xyz

• 🐡 Creator and maintainer of Blowfish @ Blowfish page

• 🐳 Principal Product Manager @ Docker - working on cagent

• 📚 mentoring @ mentorcruise

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 >}}

graph LR;
A[Lemons]-->B[Lemonade];
B-->C[Profit]

Vous pouvez voir des exemples Mermaid supplémentaires sur la page exemples de diagrammes et organigrammes.

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

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

choco install vscode.install

winget install -e --id Microsoft.VisualStudioCode

brew install --cask visual-studio-code

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.

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 >}}

1. header

   badge test

   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.
2. Another Awesome Header

   date - present

   Awesome Subheader

   Avec du code HTML

   • Café
   • Thé
   • Lait
3. Shortcodes

   AWESOME

   Avec d'autres shortcodes

   
4. Another Awesome Header

   

   nunocoracao/blowfish

   Personal Website & Blog Theme for Hugo

   HTML

   2423

   628

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é.

Exemple 1 :

{{< typeit >}}
Lorem ipsum dolor sit amet
{{< /typeit >}}

Exemple 2 :

{{< 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 >}}

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.

Exemple 1 :

{{< youtubeLite id="SgXhGb-7QbU" label="Démo Blowfish-tools" >}}

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" >}}

Plus d’informations peuvent être trouvées sur le repo GitHub youtubeLite et la page paramètres du lecteur de YouTube.