Structure - Holusion/holusion.com GitHub Wiki
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
oufoo.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 :
- En utilisant des composants et classes de bootstrap
- En modifiant les variables du framework dans le fichier
_css/_variables.scss
(liste des variables )