From 7cb723c609c9bbfafc30b7923db53849ee877aaa Mon Sep 17 00:00:00 2001 From: Tibo Date: Fri, 20 Dec 2019 15:29:53 +0100 Subject: [PATCH] =?UTF-8?q?Copie=20du=20readme=20deu=20pr=C3=A9c=C3=A9dent?= =?UTF-8?q?=20d=C3=A9=C3=A9p=C3=B4t?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- README.md | 93 +++++++++++++++++++++++++++++++++++++++++++++++++------ 1 file changed, 84 insertions(+), 9 deletions(-) diff --git a/README.md b/README.md index 2b88f75..0574ee4 100644 --- a/README.md +++ b/README.md @@ -1,14 +1,89 @@ -# Default starter for Gridsome +# TL;DR. +```sh +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 -This is the project you get when you run `gridsome create new-project`. +#### Cloner le projet +Ouvrez un terminal et deplacez vous à l'endroit désiré. *(ex: le bureau)* +```sh +cd Desktop/ +git clone https://figureslibres.io/gogs/thibaud_goiffon/popsu_html2print.git +``` -### 1. Install Gridsome CLI tool if you don't have +#### 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. +```sh +cd popsu_html2print/ +``` -`npm install --global @gridsome/cli` +#### Installer les dépendances +```sh +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". -### 2. Create a Gridsome project +#### Installer gridsome +L'installation de Gridsome de maniere globale sur votre systeme est nécessaire pour utiliser de nouvelles commandes dans le terminal. +```sh +sudo npm install --g @gridsome/cli +``` -1. `gridsome create my-gridsome-site` to install default starter -2. `cd my-gridsome-site` to open the folder -3. `gridsome develop` to start a local dev server at `http://localhost:8080` -4. Happy coding 🎉🙌 +#### lancer le serveur +```sh +gridsome develop +``` +Après un court temps de construction, ce message devrait se présenter. +```sh +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``` + +```sh +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 +```sh +git add . +``` +Ajoutez toutes vos modifications. +```sh +git commit -m "Descriptif de la modification" +git push +``` +## Todo + +- Pages citations