cgpt - Démo ultime Hugo + Relearn

7) Vidéo YouTube (natif Hugo)

6) Lien interne robuste (natif Hugo)

Voir la page d’accueil : /earl/
(Utilise ref/relref pour pointer des pages du site.)

1. Badges

Performance Documentation Open-Source TipStable
InfoBrouillon
ImportantCritique

TipFonctionnel InfoRelearn ImportantTesté

Ultra rapide Idéal documentation Sans base de données

Ultra rapide Idéal documentation Sans base de données

4) Badges et Boutons

Texte avec un badge dans la phrase.

8) Badges & Boutons (Relearn)

Texte avec un badge.
Aller sur gohugo.io

Bouton

2. Boutons

Un bouton simple qui pointe vers le site de Hugo :

Un bouton avec icône à droite et style d’avertissement :

3. Summary Box / Admonitions (Alerte, Info, Warning, Tip…)

Les notice servent à faire des encadrés de différents types (info, tip, warning, etc.).

1) Notice (boîte d’info)

1) Bloc d’info Relearn (remplace alert)

4. Expand (contenu déroulant)

3) Section repliable (expand)

3) Section repliable (Relearn)

5. Tabs (onglets)

Les onglets permettent de condenser plusieurs variantes du même contenu.

2) Onglets (tabs + tab)

hugo version

hugo serve

2) Onglets (shortcode Relearn)

hugo version

hugo serve

6. Figures (images avec légende)

5) Image avec légende (natif Hugo)

7. Callouts de Code

Voici un exemple de code highlighté par Hugo (Chroma) :

package main
import "fmt"

func main() {
    fmt.Println("Hello Hugo!")
}

1
2
3
4

function hello() {
    console.log("Hello Relearn !");
}
hello();

4) Code avec coloration (natif Hugo)

1package main
2import "fmt"
3func main(){ fmt.Println("Hello Hugo") }

8. Mermaid (diagrammes)

flowchart TD
  A[Page Hugo] --> B{Traitement Relearn}
  B --> C[Shortcodes]
  B --> D[Navigation]
  B --> E[Rendu final]

graph TD
    A[Hugo] --> B[Relearn]
    B --> C[Shortcodes]
    C --> D[Documentations avancées]

6) Mermaid (diagrammes)

flowchart TD
  A[Départ] --> B{Relearn ?}
  B -->|Oui| C[Shortcodes]
  B -->|Non| D[Built-ins Hugo]

timeline 
  title History of Social Media Platform
  2002 : LinkedIn
  2004 : Facebook
       : Google
  2005 : Youtube
  2006 : Twitter

9) Mermaid (Relearn)

flowchart TD
  A[Départ] --> B{Relearn ?}
  B -->|Oui| C[Shortcodes]
  B -->|Non| D[Built-ins Hugo]

📊 Diagramme Mermaid

graph LR  
   A[Code local] --> B{Compile Hugo}  
   B --> C[Répertoire Public]  
   C --> D[Hébergement]  
   D --> E[Visiteurs]

9. Math (KaTeX)

$$ E = mc^2 $$

7) Maths (MathJax)

10) Maths (Relearn)

10. Détails repliables natifs HTML

Section déroulante (expand)

10,5. Icônes

• Succès :
• Info :
• Attention :

5) Icône

Icône seule (Font Awesome, version gratuite) :

11. Cards (cartes cliquables)

• Guide de démarrage

  Une vue structurée pour commencer votre documentation.

• Référence complète

  Toute la puissance de Relearn, expliquée en détail.

• Page d’accueil

  Lien vers la racine du site.

• Documentation Relearn

  Accédez à la documentation complète.

11,2. Cards groupées (cards)

• Section 1

  Introduction à la section 1.
• Section 2

  Documents techniques.

Carte cliquable

• Accéder au Guide complet

  Une vue structurée de toutes les étapes d’installation.

12. Hints (encadrés pédagogiques)

MON cul

X. Arborescences : tree

Y. Children (pages enfant)

Si rien n’apparaît : la page n’a pas d’enfants, mais ça ne génère aucune erreur.

8) Children (liste les sous-pages)

Affiche les enfants de la page courante (donc crée des sous-pages pour voir un résultat). Sans enfants, le rendu est vide (mais aucune erreur).

13. Listes, tableaux et mise en page Hugo

Liste :

• rapide
• modulaire
• sans base de données

Tableau :

14. Embed fichiers / ressources (page bundle)

Vous pouvez inclure images, PDF, vidéos directement dans une page bundle :

content/
  article/
    index.md
    schema.png
    document.pdf

Exemple :