popsu_html2print

TL;DR.

sudo npm install --g @gridsome/cli
npm install
gridsome develop

pour lancer le serveur de développement à l'adresse http://localhost:8080

En détail

Installation

Cloner le projet

Ouvrez un terminal et deplacez vous à l'endroit désiré. (ex: le bureau)

cd Desktop/
git clone https://figureslibres.io/gogs/thibaud_goiffon/popsu_html2print.git

Rentrer dans le projet

Le projet vient d'être cloné dans un dossier sur le bureau, mais le terminal se trouve toujours sur le bureau. Il faut maintenant se déplacer à la racine du projet.

cd popsu_html2print/

Installer les dépendances

npm install

Un dossier "node_modules" vient d'être ajouté à votre clone du projet. Il est peuplé par les dependances définits dans le fichier "package.json".

Installer gridsome

L'installation de Gridsome de maniere globale sur votre systeme est nécessaire pour utiliser de nouvelles commandes dans le terminal.

sudo npm install --g @gridsome/cli

lancer le serveur

gridsome develop

Après un court temps de construction, ce message devrait se présenter.

DONE  Compiled successfully in 278ms                                   11:05:45
 Site running at:          http://localhost:8080/
 Explore GraphQL data at:  http://localhost:8080/___explore

Pour visualisez la mise en page, cliquez sur ce lien http://localhost:8080.

Fonctionnement

1. Les contenus sont rentrés par le client via Strapi
2. Gridsome récupère le contenu texte et l'intègre dans le modèle HTML
3. Le modèle HTML est habillé avec le css.

Utilisation

Ouvrir le dossier popsu_html2print dans Atom pour pouvoir faire des modifications dans le CSS. Pour visualisez la mise en page, ouvrez une page web à l'adresse http://localhost:8080

⚠️ Important

• Ouvrez toujours la page d'aperçu dans Chromium.
• Il faut laisser Gridsome tourner dans le terminal, sans ça vous ne pourrez pas afficher l'aperçu sur http://localhost:8080
• Rechargez la page pour visionnier les changements après modifications et sauvegarde dans les fichiers css.
• Relancez gridsome si des modifications sont apportées dans Strapi
• Si le dossier est déjà cloné, Pensez à faire git pull avant gridsome develop

CTRL+C
gridsome develop

Styles

Ajouter une police

Pour ajouter une nouvelle font, ajouter le fichier dans le dossier src/fonts, puis referencez la dans le fichier css (src/css/fonts.scss)

Parametres.scss

Fichier utilisé pour réferencer des variables globales utilisables dans tout le projet. Ex: les marges, tailles du document, gouttieres, taille de police.

Screen.scss

Sert à afficher les pages en vis-à-vis dans le navigateur.

Ajouter des modifications

git add .

Ajoutez toutes vos modifications.

git commit -m "Descriptif de la modification"
git push

Todo

• Pages citations