Documentation
Comprendre les blocs

Comprendre les blocs

Les blocs sont les briques de base d’Osuny, ils font le pont entre l’admin et le thème

Contextes

Les contenus (pages, actualités…) peuvent être pleine largeur ou non, ce qui change leur mise en page desktop. Chaque bloc fonctionne donc dans 4 contextes :

  • desktop pleine largeur
  • desktop avec barre latérale
  • tablette
  • mobile

Lorsque la page est en pleine largeur, le body est doté de la classe full-width.

Les mixins suivants permettent d’adresser les contextes différents :

  • @include in-page-without-sidebar ou @include full-page pour les pages pleine largeur
  • @include in-page-with-sidebar ou @include not-full-page pour les pages avec barre latérale
  • @include in-page-with-or-without-sidebarpour adresser les 2 cas (TODO expliquer pourquoi ça et pas rien ?)
PériphériqueContexteDirective
mobile@include media-breakpoint-down(mobile)
desktop@include media-breakpoint-up(desktop)
desktoppleine largeur@include in-page-without-sidebar ou @include full-page
desktopavec barre latérale@include in-page-with-sidebar ou @include not-full-page

Titres

Les blocs maintiennent une hiérarchie de titre juste de façon autonome, en fonction des contributions. Voir à ce sujet Accessibilité numérique : un bon plan.

Formats de données

Les attributs dans le YAML utilisent des types.

TypeDescription
stringTexte classique
textTexte avec retours à la ligne
richtextRichtext Summernote
integerNombre entier
floatNombre décimal
booleanBooléen (vrai/faux)
objetRéférence à un objet
blobLe uuid
imageUn objet ayant des attributs id, alt et credit pour représenter une image situé dans le dossier data/medias
arrayPour un tableau d’éléments
hashPour un objet avec des paires clé-valeur

Référence à un objet

permalink

La vraie url, sans le domaine. Avec ou sans langue.

Exemples :

  • /actualites/2024-05-17-lapplication-osuny-presente-le-niveau-de-securite-bon/

path

L’identifiant qu’utilise Hugo.

La page de documentation explique la méthode, qui s’appuie sur le chemin du fichier physique :

  1. Enlever l’extension de fichier
  2. Enlever la langue
  3. Passer en bas de casse
  4. Remplacer les espaces par des tirets

On remarque qu’il n’y a pas non plus mention du dossier content, il est implicite.

Exemples :

  • /posts/2024/2024-05-17-lapplication-osuny-presente-le-niveau-de-securite-bon
  • /events/2024-12-27-communs-numerique-et-interet-general

slug

L’identifiant unique de l’objet, tel quel. Les slugs semblent être les identifiants à utiliser dans les taxonomies Hugo, avec des slash à l’intérieur pour les taxonomies et les catégories en arbre.

Exemples :

  • lapplication-osuny-presente-le-niveau-de-securite-bon
  • communs-numerique-et-interet-general
  • taxonomie/taxon-1

file

Le chemin du fichier physique dans le référentiel Git.

Exemples :

  • content/fr/posts/2024/2024-05-17-lapplication-osuny-presente-le-niveau-de-securite-bon.html

Référence à un blob

TODO expliquer la mécanique

Les blocs qui n’existent pas

Carrousel

Problèmes d’efficacité et d’accessibilité :