gsl-statique-litterateur/help/template-comment-creer.md

67 lines
2.1 KiB
Markdown
Raw Normal View History

# Créer un Template
------------------------------------------------------------------------
Vous devrez pour que votre site soit à vôtre goût créer et définir les
styles dans styles.css. Placez ce fichier (en fonction du choix de votre
configuration du DOMAIN) dans :
- HOME: ~/.config/gsl/domains/DOMAIN/templates/
- GLOBAL: /var/lib/gsl/domains/DOMAIN/templates/
Concernant les contenus images et fichiers dans vos articles, placez-les
dans les dossiers
- .../templates/images
- .../templates/files
Astuce: Une fois votre article créé, vous verrez dans sa source HTML que
beaucoup d'éléments ont une class="ACRONYM_uneclass". Utilisez
ces classes dans style.css pour décorer votre site à votre goût.
Pour mettre à jour et voir vos modifications de styles
```
gsl sync
```
GSL synchronisera votre template sur votre webserver.
Rechargez votre page dans votre navigateur
Si vous avez modifié header ou footer.html, ou si de nouvelles fonctions
sont arrivées et concernent les pages HTML dans GSL, il vous faudra
reconstruire toutes les pages
```
gsl make -F
```
## Listes de classes utilisées.
Rappel: les classes et IDs commencent passent votre ACRONYM configuré,
2022-04-16 12:41:10 +02:00
lors de la création d'un domaine avec ```gsl new```, suivi par ```_```.
Pour une meilleure lisibilité, votre ACRONYM est marqué xxx.
2022-04-16 12:25:31 +02:00
### Dans body, header
- ID=
2022-04-16 12:41:10 +02:00
- - body: xxx_page
- - header: xxx_banner
- - logo dans header: xxx_site-logo
- - title dans header: xxxsite-title
- - name dans header: xxx_site-name
- - Description dans header: xxx_site-description
- - ```<section>``` avant ```<article>```: xxxspage-wrapper
- - article: xxx_SLUG (SLUG est le "slug: SLUG" de l'article)
- - div metas (auteur, date...): xxx_metas
- - p dans div metas: xxx_auteur
2022-04-16 12:25:31 +02:00
### Dans ```<article>```
- CLASS=
2022-04-16 12:41:10 +02:00
- - div après chaque titre ```<hX>```: xxx_content-pX
- - p dans div content-pX: xxx_paragraph
- - - si contenu ```( 2```: xxx_paragraph-2
- - code pour les inline-code avec ```¤...¤```: xxx_icode
- - li (liste) en fonction du nombre N de ```=```: xxx__list-li x_list-N
- - ul (liste) simple: xxx_list-ul
- - ol (liste) ordonnée: xxx_list-ol
... more to be listed here