Migration

Hugo Blox est conçu pour offrir aux créateurs de contenu technique une expérience fluide. Vous pouvez vous concentrer sur le contenu et Hugo Blox s’occupe du reste.

Utilisez des outils populaires tels que Plotly, Mermaid et les tableaux de données (Data Frames).

Graphiques (Charts)

Hugo Blox prend en charge le format populaire Plotly pour les visualisations de données interactives. Avec Plotly, vous pouvez concevoir presque tous les types de visualisations imaginables !

Enregistrez votre fichier JSON Plotly dans le dossier de votre page (par exemple line-chart.json), puis ajoutez le shortcode {{< chart data="line-chart" >}} à l’endroit où vous souhaitez faire apparaître le graphique.

Vous pouvez également utiliser le Plotly JSON Editor pour préparer vos données.

Diagrammes (Mermaid)

Hugo Blox prend en charge l’extension Markdown Mermaid pour les diagrammes.

Organigramme (Flowchart)

Exemple de syntaxe :

```mermaid
graph TD
A[Début] -->|Texte| B(Étape)
B --> C{Décision}
C -->|Choix 1| D[Résultat 1]
C -->|Choix 2| E[Résultat 2]
```

Rendu :

Diagramme de séquence (Sequence diagram)

Exemple de syntaxe :

```mermaid
sequenceDiagram
Alice->>Jean: Bonjour Jean, comment vas-tu ?
loop Bilan de santé
    Jean->>Jean: Lutte contre l'hypocondrie
end
Note right of Jean: Pensées rationnelles !
Jean-->>Alice: Super !
Jean->>Bob: Et toi ?
Bob-->>Jean: Très bien !
```

Rendu :

Diagramme de classes (Class diagram)

Exemple de syntaxe :

```mermaid
classDiagram
Class01 <|-- UneTresLongueClasse : Cool
Class03 *-- Class04
Class05 o-- Class06
Class07 .. Class08
Class09 --> C2 : Où suis-je ?
Class09 --* C3
Class09 --|> Class07
Class07 : equals()
Class07 : Object[] elementData
Class01 : size()
Class01 : int chimpanze
Class01 : int gorille
Class08 <--> C2: Étiquette
```

Rendu :

Diagramme d’états (State diagram)

Exemple de syntaxe :

```mermaid
stateDiagram
[*] --> Immobile
Immobile --> [*]
Immobile --> EnMouvement
EnMouvement --> Immobile
EnMouvement --> Crash
Crash --> [*]
```

Rendu :

Tableaux de données (Data Frames / CSV)

Enregistrez votre feuille de calcul sous forme de fichier CSV dans le dossier de votre page, puis affichez-la en ajoutant le shortcode Table à votre page :

{{< table path="results.csv" header="true" caption="Tableau 1 : Mes résultats" >}}

Reference 2 Wiki

Cette fonctionnalité remplace et modernise l’ancien plugin WordPress reference-2-wiki . Tout lien vers Wikipédia bénéficie automatiquement du style avec le symbole ⓦ et s’ouvre dans un nouvel onglet (target="_blank").

1. Raccourcis de liens Markdown (Recommandé)

Vous pouvez utiliser le préfixe w: (ou wiki:) directement dans la syntaxe standard des liens Markdown :

2. Shortcodes Hugo

Vous pouvez également utiliser le shortcode {{< w >}} (ou son alias {{< wiki >}}) :

• {{< w "fusion thermonucléaire" >}} : lien vers l’article en français
• {{< w "Paul Davies (physicien)" "Paul Davies" >}} : article FR avec texte personnalisé
• {{< w "Harold_E._Puthoff" "en" "Dr. Hal E. Puthoff" >}} : article EN avec texte personnalisé
• {{< w "en|Harold_E._Puthoff|Dr. Hal E. Puthoff" >}} : format compact séparé par des barres |

Images flottantes et légendes (Figure Shortcode)

Ce shortcode remplace les anciennes balises WordPress [caption ...] pour insérer des images flottantes avec légende, redimensionnement et optimisation responsive automatique.

Syntaxe et Paramètres

{{< figure src="images/photo.jpg" caption="Légende de l'image" alt="Description" align="alignright" width="400" link="https://..." >}}

Exemples d’utilisation

Image flottante à droite avec largeur définie et légende :

{{< figure src="images/3-82.jpg" alt="Emmy Noether" caption="Emmy Noether" align="alignright" width="400" >}}

Image cliquable centrée avec lien :

{{< figure src="images/diagram.png" caption="Cliquer pour agrandir" link="https://example.com" align="aligncenter" width="600" >}}

Vidéos YouTube (YouTube Shortcode)

Les vidéos YouTube peuvent être intégrées avec adaptation automatique au ratio 16:9, respect de la vie privée (youtube-nocookie.com) et limitation optionnelle de la largeur maximale :

Syntaxe et Paramètres

{{< youtube id="yfwb39VCNcQ" width="640" >}}