Créer une vue sur le site MATRICE

On crée un fichier index.haml dans lequel on render l'ensemble des partials consistuant la page.

index.haml
!= haml :'home/header'
!= haml :'home/programs'
!= haml :'home/news'
!= haml :'shared/blogposts-carousel'
!= haml :’shared/testimonials'
!= haml :'shared/newsletter'

Chaque fichier render dans index.haml doit être initialement structuré de la manière suivante :

exemple.haml
%section#example
.container

Partials communes

Dans le dossier "shared/" sont stockées plusieurs partials "partagées" utilisable à travers tout le site MATRICE.

On rangera dans ce dossier, les partials réutilisables à plusieurs emplacement du site.


shared/faq.haml

La FAQ se voyant réutilisé plusieurs fois sur le site MATRICE, elle est naturellement une partials "partagée", pour afficher la FAQ danx une page, il suffit de la render.

Cette partial n'a pas besoin de parametres particuliers.

!= haml :'shared/faq'

shared/footer.haml

Partial du pied de page du site MATRICE.

Cette partial n'a pas besoin de parametres particuliers.


shared/fullwidth_image.haml
%section#fullwidth_image{style: "height: #{height}; background-image: url(#{image});"}

Cette partial prend en premier parametre une chaine de caractère composée d'un entier et d'une unité (px, vh, %).

En second parametre une chaine de caractère correspondant à l'url d'une image

shared/header.haml

Partial de l'entête du site MATRICE.

Cette partial n'a pas besoin de parametres particuliers.

shared/navbar.haml

Partial de la barre de navigation du site MATRICE.

Cette partial n'a pas besoin de parametres particuliers.

shared/newsletter.haml

Partial d'inscription à la newsletter de MATRICE.

Cette partial n'a pas besoin de parametres particuliers.

shared/sidebar.haml

Partial de la barre latérale de la navigation du site MATRICE.

Cette partial n'a pas besoin de parametres particuliers.

shared/testimonials

Partial des témoignages, cette dernière necessite plusieurs parametres.

quote //chaine de caractère à afficher
author //chaine de caractère
%title //chaine de caractère
logo //chaine de caractère représentant le lien de l'image

le render de la partials se présente comme ci dessous :

\!= haml :'shared/testimonials', locals: { quote: "« Mieux qu’un stage, plus formateur que de nombreux jobs, MATRICE veut apprendre aux leaders de demain à travailler d’emblée en mode entrepreneur »", author:"L’ADN", title:"Les séquences de l'innovation", logo: image_path("home/adn.png")}

shared/video_player.haml

Partial de lecteur video


%img.img-fluid.img-center{src: image }
%a{"data-fancybox" => "", href: url }

Necessite deux parametres

image //Une chaine de caractère représentant l'url de l'image
url //Une chaine de caractère représentant l'url de la vidéo

Détail des vues/partials

layout.haml

Fichier de base faisant le lien dans le site, c'est ici que l'on appelle le CSS et le JS, que se situe la balise .

Au sein du body on render la navbar et le footer.

De manière générale, on ne touche pas à ce fichier, car on appelle nos partials dans un autre fichier.

dossier home/
index.haml
!= haml :'home/header'
!= haml :'home/programs'
!= haml :'home/news'
!= haml :'shared/blogposts-carousel'
!= haml :’shared/testimonials'
!= haml :'shared/newsletter'

On peut voir que le fichier index.haml comporte uniquement des render de morceaux du code de la page, c'est ainsi qu'il faut procéder, ainsi pour obtenir notre page finale, nous allons composer chaque partie de cette dernière puis les assembler.


header.haml

Ce fichier correspond à la video d'accueil de la page "home" du site MATRICE.

L'objet principal de cette partial est la video, détaillée ci dessous :

%video{autoplay: "autoplay", loop: "loop", muted: "muted", playsinline: "playsinline"}
%source{src: "https://s3.eu-west-3.amazonaws.com/matrice-website/header-video.mp4", type: "video/mp4"}

Si on doit modifier la vidéo affichée, il n'y à qu'un seul paramêtre à modifier : l'attribut src de la balise source. Ce lien doit renvoyer vers une vidéo au format .MP4

On ne modifiera en règle générale PAS les attributs de la balise video.

news.haml

Partial dédiée à l'affichage des articles sur la home.

programs.haml

Partial dédiée à l'affichage des différents programmes de MATRICE.

dossier pages/

Partials des différentes pages du site web.

dossier about/
En savoir plus
a.btn.btn-primary.btn-lg

En savoir plus
a.btn.btn-secondary.btn-lg