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
1 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
2 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/
3 Installer les dépendances
npm install
4 Installer gridsome
sudo npm install --g @gridsome/cli
5 lancer le serveur
gridsome develop
Pour visualisez la mise en page, cliquez sur ce lien http://localhost:8080.
Fonctionnement
- Les contenus sont rentrés par le client via Strapi (https://popsu.strapi.figli.io/admin)
- Nom d'utilisateur : dev
- Mot de Passe : 7SqHtx4XCSNLKS5b
- Gridsome recupere le contenu texte et l'integre dans le modèle HTML
- 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
CTRL+C
gridsome develop
Styles
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.
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)
Screen.scss
Sert à afficher les pages en vis-à-vis dans le navigateur.