Skip to content

Structure

Jump to bottom
Sebastien Dumetz edited this page Jul 13, 2018 · 4 revisions

Structure du site web

Il peut être utile de se renseigner sur Jekyll (le générateur de site utilisé) avant tout. Les pages sont écrites en html (.html) ou en markdown (.md).

On sépare les pages individuelles (fr/, en/, _content_dev) des templates, fragments et styles (_includes, _layouts, _css, _data).

Dossiers principaux

Le site est en deux langues, séparées dans deux dossiers : fr/ et en/. Dans chacun d'eux on retrouvera les mêmes répertoires "spéciaux" :

_posts : le blog

Un post doit être daté. Le fichier est toujours nommé yyyy-mm-dd-titre_du_post.html Il doit aussi comporter une image, de taille 800x450 et un titre. Optionellement (mais recommandé), on peut fournir deux images : simple (400x225) et double (800x450) résolution.

Additionellement, on peut donner des tags au post pour le relier à du contenu similaire.

Exemple d'entête de post :

---
title: Digital Art
image: /static/img/posts/art_numerique/h_itsme_titre.jpg
image2x: /static/img/posts/art_numerique/h_itsme_titre_2x.jpg
tags: evenementiel, formation
---

products : les produits

similaires aux posts, mais sans date.

Les produits sont surtout définis par leurs propriétés. e.g. le prism :

---
title: Prism
image: /build/img/products/Prism_v2_voiture.jpg
image2x: /build/img/products/Prism_v2_voiture_2x.jpg
abstract: L'Holusion Prism est une vitrine qui diffuse les hologrammes à 360°
rank: 0
tags: prism
slides:
  -
    image: /static/img/products/Prism_v2_montre.jpg
  -
    image: /static/img/products/prism_comenor.jpg
header: Vitrine interactive
picto: /static/img/products/picto_prism.png
price: "2 000,00"
properties:
  display:
    brightness: 800cd/m²
    contrast: "1000:1"
    resolution: "1280×1024"
    full_display_area: 376.3(H) x 301.1(V) mm
    diagonal: 19" (4:3)
  characteristics:
    size: 45(L) x 38(l) x 26(h) cm
    weight: 7kg
    power: 40W
    cpu: INTEL Celeron J1900
    setup: Plug & Play
  options:
    transport: flight case trolley
    nfc: pilotez votre playlist
---

On spécifie :

  • L'image de la page (optionellement, l'alternative x2).
  • Le titre title
  • Le sous titre header
  • la description courte abstract
  • Les slides, images en 800x450 qui présentent le produit
  • le picto, svg schématique du produit
  • le prix, price (exprimé en chaine de caractères!)
  • les propriétés (cf. ci-dessous

static et src

Le dossier static/ contiens tous les assets du site : Images, vidéos, fichiers divers. Un fichier rangé par exemple dans static/img/products/foo.png sera disponible à l'adresse /static/img/products/foo.png

Le dossier src/ est un peu particulier : Il n'est pas publié directement mais intègre une logique de transformation des assets : Tous les fichiers de ce dossier sont copiés dans le répertoire build/ au moment de la construction du site avec les transformations suivantes :

  • images foo.png, foo.xcf ou foo.psd
    • foo_2x.png png optimisé compressé, résolution 100%
    • foo.png png optimisé compressé, résolution 50%
    • foo_2x.jpg jpg, résolution 100%
    • foo.jpg jpg, résolution 50%
  • vidéos foo.mp4
    • foo.mp4 (compatible iphone)
    • foo.webm
    • foo.ogv

C'est aussi dans le dossier src/ qu'on range les icônes qui seront intégrées par le plugin svg.

Templates

_data : données du site

Sorte de base de données textuelle au format yaml, le dossier _data sert surtout à stocker les chaines de caractères localisées

Par exemple, le fichier strings.yml contiens toutes les chaines de caractères de l'interface à traduire :

about: #désignation de la page about.html
  fr: A propos
  en: About

On s'y réfèrera dans les différents templates avec la syntaxe suivante :

{{site.data.strings["about"][page.lang]}}

Référence complète pour site.data

_includes et _layouts

Voir la doc Jekyll sur les templates et éventuellement la documentaiton avancée sur la syntaxe Liquid.

_css

Le site utilise la syntaxe scss pour ses feuilles de style. Bootstrap 4 est inclus, et la majorité des modifications majeures (taille de police, couleur, padding) peut se faire :

  1. En utilisant des composants et classes de bootstrap
  2. En modifiant les variables du framework dans le fichier _css/_variables.scss (liste des variables )
Clone this wiki locally