No Description

Tibo e9c9ae861d Ajout du css clip-path et gestion des fonds avec motifs		5 years ago
.cache	e9c9ae861d Ajout du css clip-path et gestion des fonds avec motifs	5 years ago
src	e9c9ae861d Ajout du css clip-path et gestion des fonds avec motifs	5 years ago
static	e9c9ae861d Ajout du css clip-path et gestion des fonds avec motifs	5 years ago
.gitignore	28d1936dee correction, ajout gitignore	5 years ago
README.md	e9c9ae861d Ajout du css clip-path et gestion des fonds avec motifs	5 years ago
gridsome.config.js	28d1936dee correction, ajout gitignore	5 years ago
gridsome.server.js	e9c9ae861d Ajout du css clip-path et gestion des fonds avec motifs	5 years ago
package-lock.json	6cbeae6bbb Ajout des feuilles de styles	5 years ago
package.json	6cbeae6bbb Ajout des feuilles de styles	5 years ago

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

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 récupère le contenu texte et l'intègre 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 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.

README.md