Création de page avec Grav

Créer une page

Pour creer une nouvelle page il suffit de se rendre dans l’onglet pages du menu de gauche.

Des petits boutons en haut à droite permettent de directement créer directement des pages qui auront la bonne configuration.

Add Article : un article de blog qui ira automatiquement se caler dans /blog.

Add Project : un page de projet qui ira automatiquement se caler dans /home.

Modifier une page

Pour modifier une page, depuis l’onglet pages, il suffit de cliquer sur le petit + d’un des dossiers /home ou /blog et de cliquer sur l’élément à modifier.

Enregistrement et prévisualisation

À la création, la page se met automatiquement en invisible, afin de pouvoir la sauvegarder au fur et à mesure de l’écriture sans qu’elle n’apparaisse sur le site.

En premier lieu il faut tout de suite enregistrer la page avec CTRL + s afin de valider la création de la page et faire apparaître le champ media qui permet d’ajouter des images, vidéos, etc.

Malgré le fait que la page soit invisible il est tout de même possible de la visualiser avant publication en cliquant sur le petit œil en haut :

Options de page générique

Une fois dans la page d’édition, on peut observer plusieurs onglet Content, Options, Advanced et des boutons Normal et Expert. Inutile d’aller modifier des choses là dedans, j’ai déplacé tout le nécessaire dans l’onglet principal Content.

Les champs disponible pour les deux types de page :

Visible

[default : disabled]

Cliquer sur enabled pour que la page soit visible.

Title

Le titre donné à la création de la page.
Possibilité de le changer.

Content

voir la section markdown

Page Media

[optionnel]

L’ajout de médias se fait ici. Drag n’ drop de fichier ou click pour avoir une invite.
Si celui-ci n’est pas présent, enregistrez la page et il apparaîtra.

Note : Penser à renommer les images avant de les upload, de manière descriptive et sans espaces : remplacer par les caractères - ou _. ex : author-photoLongName.png

Options de page type Project

Website URL

[optionnel]

Si l’on souhaite ajouter un lien vers un site en base de la page (comme sur la page de Sisifo).
ex : https://sisifo.site

Website text

[optionnel]
[prérequis : une URL à été indiqué dans Website URL]

Permet d’afficher une URL réduite ou un titre descriptif à la place du lien.

ex : inscription ou sisifo.site

Authors

[optionnel]

Cliquer sur + Add item pour ajouter un auteur.
Répéter autant que l’on souhaite.

Name

[obligatoire]

Nom de l’auteur.

Website

[optionnel]

Affiche un lien vers le site si fourni.

Contributors

[optionnel]

Idem que pour Authors.

Note : les auteurs et les contributeurs sont séparés par le mot avec dans la liste affichée.

image réseaux sociaux

[optionnel]
[default : le logo des Règles de la Nuit]
[prérequis: une image à été uploadée dans Page Media]

Indiquer le nom du fichier ajouté dans les médias.

ex : ambre-troieIllustration.jpg

Metadata

[optionnel]

Cocher la case si l’on souhaite remplacer les métadonnées de base type description ou keywords pour les moteurs de recherches et les réseaux sociaux.

Note : Seule description à une incidence sur les réseaux sociaux.

Pour la description :

Key

description

Value

Une description qui fait maximum 300 glyphes.

Pour les mots-clés :

Key

keywords

Value

Une, liste, de mots, séparés, par, des, virgules

Options de page type Article

Taxonomies

Category

[optionnel]

Une liste de catégories.
Ceux-ci apparaissent à côté du titre et dans la barre de droite du blog.
Il ne faut pas trop en faire, cela sert à ranger le contenu pour plus facilement retrouver.

ex : publication Troie.

Tag

[optionnel]

Une liste de tags.
Ceux-ci apparaissent en bas des articles de blog.
On peut davantage se lâcher sur le nombre.

ex : Troie édition luvan Ambre Laure Afchain Fidèle

Note : je vais peut-être créer une nouvelle taxonomy qui servira à attribuer un article à un projet des règles afin par exemple de ne voir que les articles en lien avec tel projet et éventuellement afficher sur la page d’un dit projet (dans /home) une liste d’articles écris à son sujet.

La syntaxe Markdown

Dans la partie content on peut trouver des petits icônes qui peuvent transformer du texte en markdown mais je vais décrire ici la syntaxe si vous souhaitez l’apprendre car il est très pratique.

Le Markdown est un langage de balisage qui peut être converti, par de nombreux logiciel, en HTML, PDF et autres.
Il permet de structurer un document directement en mode texte en attribuant des balises à du contenu, ce qui permet par la suite de le convertir en lui donnant des styles (on choisi au moment de convertir, le document en lui même n’en a pas et peut donc servir à générer plein de versions différentes (graphiquement et en terme de formats) à partir du même contenu/fichier).

On pourrait par exemple à partir d’un seul fichier générer une version web avec une mise en page particulière, un pdf prêt à être imprimé et une version epub sans avoir à se taper n fois la structuration du document suivant l’export.

Les titres

Les titres sont précédés par des #. Le HTML permet d’avoir jusqu’à 6 niveaux de titre sémantique (balises h1, h2, etc.)

ex :

### Mon gros titre
#### Un moins gros
##### etc.

Attention : NE PAS UTILISER DE TITRE DE NIVEAU 1 ET 2 (# et ##) DANS LE CONTENU CAR DÉJÀ UTILISÉ DANS LES TEMPLATES !

Texte gras

Entourer le mot de **.

ex :

Ce **mot** apparaît en gras.

Texte ital

Entourer le mot de _.

ex :

ce _mot_ apparaît en ital.

Combo ital + gras

ex :

ce **_mot_** apparaît en ital et en gras.

Ligne de séparation

Inscrire --- sur une ligne seul.

ex :

Au dessus.

---

En dessous.

Citation

Ajouter > devant une ligne.

ex :

Deme quoque, supremumque enim semicaper villo dextraque pervenit muros tuus urbes quereris nefanda.

> Lorem markdownum urguent sitim. Messoris superis putaret si limina Trachinius stipitis duobus, et hederis gratia, et crimine. Longa lyrae cladi dolis saepe removit alis subiectatque ignibus spectasse erat, sua tibi dat.
> sit _Haemonias tempus sustulerat_.

Liste classique

Ajouter - devant la ligne, indenter au besoin.

ex :

- Recepit inplet inmurmurat at sunt lacrimisque omnia
    - Et quod spargit
    - Herbas vel
- Populo fata illa memorem nataeque
- Noviens conplexa et caelum trementes

Liste ordonnée

Ajouter 1. devant la ligne, indenter au besoin.

ex :

1. Recepit inplet inmurmurat at sunt lacrimisque omnia
    - Et quod spargit
    - Herbas vel
1. Populo fata illa memorem nataeque
1. Noviens conplexa et caelum trementes

Texte fond noir

Entourer le mot de `.

ex :

ce `mot` apparaît sous fond noir.

Bloc fond noir

Entourer le paragraphe de ```.

```
Ce paragraphe apparaît sous fond noir.
Même ici.
```

Ce paragraphe apparaît sous fond noir.
Même ici.

Lien

[nom du lien](adressedulien)

ex :

Ceci est un lien vers [Sisifo](https://sisifo.site).

Image

![nomalternatif](nomdufichier.jpg)

On peut aussi dans la partie Media survoler une image et cliquer sur + qui insérera le bon code automatiquement.

ex :

![](imgs/create-new-page.png)

Combo Image lien

Il faut inclure dans le nom du lien la syntaxe de l’ajout d’image.

[ ![nomalternatifimage](nomdufichier.jpg) ](adressedulien)

ex :

[![](imgs/create-new-page.png)](https://sisifo.site)