Aller au contenu

Structure

Ce document fixe la structure des fichiers HTML du thème Osuny.

Style

  • Indentation = 2 espaces
  • utilisation du tiret {{- -}} lorsque l’on veut supprimer des espaces entres des éléments d’inline qui causeraient des espaces visuels. Le HTML étant minifié il n’est pas nécessaire d’en mettre partout.
{{ if something }}
  something
{{ end }}

<p>
  {{- if something -}}
    <span>something</span>
  {{- end -}}
</p>
  • Une directive hugo générant du html (partial ou variable) est suivi d’un saut de ligne :
{{ .heading_items.open }}
  {{- i18n "commons.contact.socials.title" -}}
{{ .heading_items.close }}

Nommage et appels des partiels

Partiels normaux

Les partiels normaux sont ceux qui génèrent du html.

Nommage

Les noms des fichiers s’écrivent en lowercase et tiret (hyphen -) avec l’extension .html.

Par exemple : contact-details.html.

Appels

Appel d’un partiel avec un seul paramètre :

{{ partial "jobs/single/image.html" .Params.image }}

Appel d’un partiel avec plusieurs paramètre en utilisant dict :

{{ partial "contents/list.html" (dict
  "context" .
  "contents" .Params.contents
) }}

Partiels helpers

Nommage

Les helpers sont les partiels qui renvoient une valeur. Ils incluent systèmatiquement un {{ return }}.

Les noms des fichiers helpers s’écrivent en CamelCase avec l’extension .html. Les helpers sont des actions : Get, Is, Has… le nom du fichier doit toujours contenir un verbe, sinon c’est un partiel simple qui ne dit pas son nom.

Appels
L’appel d’un partiel helper s’écrie sans l’extension .html
{{ $media := partial "GetMedia" . }}

Précision sémantique

Afin d’utiliser des termes courants dans Hugo, on emploie layouts et partials. Cela a l’avantage d’être familier pour les devs Hugo, et l’inconvénient de désigner des dossiers différents avec le même nom.
TermeHugoOsuny
layoutsFichiers HTML utilisés par le siteFichiers HTML utilisés pour mettre en page possibles des objets (en cartes, en grille…)
partialsComposants utilisés par les fichiers natifsComposants Osuny utilisés par les fichiers spécifiques Osuny

Un dossier pour chaque objet

            • section.html
            • single.html
        Tous les fichiers pour représenter les jobmes sont dans le dossier layouts/_partials/jobs

        Les objets Osuny (organizations, posts, pages, events…) peuvent s’afficher de 3 façons : dans une section, dans un bloc ou dans une page. Dans la section et dans le bloc, il s’agit de lister des objets en utilisant une mise en page (layout) et des options. Les fichiers à la racine du dossier layouts d’Hugo, dans /layouts (attention, pas les layouts Osuny !) suivent la logique de Hugo (par exemple list.html et single.html) et appellent les partials Osuny.

        Section

              • hero.html
            • section.html
        Tous les fichiers liés à l’affichage de la page de l’offre de formation

        C’est la page native de Hugo pour lister les objets d’un type. Elle est paginée. Certains objets, comme Page, sont un peu spéciaux : ils sont à la fois une page et une liste (de ses enfants). Ce distingo est fait dans les fichiers natifs Hugo, à la racine de layouts. La section est aussi utilisée par les taxonomies, pour afficher une catégorie de formations par exemple.

        Single

              • hero.html
            • single.html
        Tous les fichiers liés à l’affichage d’une formation (par exemple : Bibliothécaire)

        Une single représente la page d’un objet. Le dossier single contient des objets nécessaires à l’affichage de la page. Ce sont souvent de simple “passe-plats” vers des partiels plus communs.

        Partials

                • dates.html
                • heading.html
                • media.html
                • summary.html
              • job.html
              • jobs.html
        Tous les fichiers utilisés à la fois par les blocs, par la section et par la single

        Le partiel jobs.html est une liste de formations paginée avec options, utilisée dans la section et dans les catégories de formations.