Home Explore Help
Sign In
thibaud_goiffon
/
popsu_html2print
1
0
Fork 1
Files Issues 14 Pull Requests 0 Wiki

No Description

Tree: 9d788ce2de
Branches Tags
popsu_html2p...
ZIP TAR.GZ
Tibo 9d788ce2de Ajout readme, Correction CSS 5 years ago
.cache 6cbeae6bbb Ajout des feuilles de styles 5 years ago
src 9d788ce2de Ajout readme, Correction CSS 5 years ago
static da0a72e1e4 Correction previewer 5 years ago
.gitignore 28d1936dee correction, ajout gitignore 5 years ago
README.md 9d788ce2de Ajout readme, Correction CSS 5 years ago
gridsome.config.js 28d1936dee correction, ajout gitignore 5 years ago
gridsome.server.js 28d1936dee correction, ajout gitignore 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

README.md

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

  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

    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

  4. Ouvrez toujours la page d'aperçu dans Chromium.

  5. Il faut laisser Gridsome tourner dans le terminal, sans ça vous ne pourrez pas afficher l'aperçu sur http://localhost:8080

  6. Rechargez la page pour visionnier les changements après modifications et sauvegarde dans les fichiers css.

  7. 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.