|
@@ -5,49 +5,56 @@ 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)*
|
|
|
```sh
|
|
|
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 deplacer à la racine du projet.
|
|
|
+Il faut maintenant se déplacer à la racine du projet.
|
|
|
```sh
|
|
|
cd popsu_html2print/
|
|
|
```
|
|
|
-
|
|
|
### 3 Installer les dépendances
|
|
|
```sh
|
|
|
npm install
|
|
|
```
|
|
|
-
|
|
|
### 4 Installer gridsome
|
|
|
```sh
|
|
|
sudo npm install --g @gridsome/cli
|
|
|
```
|
|
|
-
|
|
|
### 5 lancer le serveur
|
|
|
```sh
|
|
|
gridsome develop
|
|
|
```
|
|
|
-pour lancer le serveur de développement à l'adresse http://localhost:8080
|
|
|
-
|
|
|
+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 (https://popsu.strapi.figli.io/admin)
|
|
|
+ - **Nom d'utilisateur** : dev
|
|
|
+ - **Mot de Passe** : 7SqHtx4XCSNLKS5b
|
|
|
+2. Gridsome recupere le contenu texte et l'integre dans le modèle HTML
|
|
|
+3. Le modèle HTML est habillé avec le css.
|
|
|
## Utilisation
|
|
|
-
|
|
|
-### Config
|
|
|
-todo: faire un fichier de config scss pour les régages généraux type, format, grille, marge, fond perdu, etc
|
|
|
-
|
|
|
+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
|
|
|
+```sh
|
|
|
+CTRL+C
|
|
|
+gridsome develop
|
|
|
+```
|
|
|
### Styles
|
|
|
-quels fichiers scss peut-on éditer pour la mise en page ??
|
|
|
-
|
|
|
-### d'autres choses a savoir ?
|
|
|
+#### 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.
|