|
|
||
|---|---|---|
| .forgejo/workflows | ||
| assets | ||
| kirby | ||
| site | ||
| vendor | ||
| .editorconfig | ||
| .gitignore | ||
| .htaccess | ||
| composer.json | ||
| composer.lock | ||
| index.php | ||
| job-log.md | ||
| README.md | ||
| replace_hd_images.sh | ||
Revue Décor 6 — Site Web-to-Print
Repo du site de la revue décor 6 (ENSAD), réalisé en web-to-print avec Kirby CMS et Paged.js.
Ajouter des contenus au site
Pour ajouter des contenus rédigés sous Word, il est recommandé de convertir vos fichiers .doc ou .docx en HTML compatible Kirby avant de les coller dans un bloc texte.
Convertisseur Doc → Kirby
Cet outil convertit un document Word en HTML prêt pour les blocs texte de Kirby. Son principal avantage est de transformer automatiquement les notes de bas de page en kirbytags au format (note: contenu de la note).
Utilisation :
- Déposer votre fichier
.docou.docx - Cliquer sur Convert
- Copier le HTML généré via le bouton Copy
- Coller le résultat dans un bloc Kirby
Bonnes pratiques : Pour que la conversion soit correcte, le document Word doit être bien structuré : utiliser les styles de titres pour les titres, et la fonction Notes de bas de page de Word pour les notes (et non une saisie manuelle).
Confidentialité : Les fichiers ne sont pas envoyés à un serveur et ne sont pas stockés. Ils sont uniquement utilisés localement le temps de la conversion.
Templates
| Template | Description |
|---|---|
home |
Version web du site |
print |
Version print du site |
Snippets
| Fichier | Description |
|---|---|
footer.php |
Footer du site |
head.php |
<head> du site |
header.php |
<header> du site (contient la navigation et le logo) |
nav.php |
Menu du site |
logo.php |
Logo du site |
Blocks personnalisés
Le projet comporte de nombreux blocks personnalisés :
blank — Page blanche
Insère une page blanche dans le document print.
<div class="blank-page"></div>
break — Saut de page
Insère un saut de page dans le document print.
<div class="pagebreak"></div>
fullpageimage — Image pleine page
Insère une image en pleine page avec effet full-bleed.
gallery — Galerie d'images
Insère une galerie d'images.
image — Image (web + print)
Insère une image avec une séparation en couches pour le print (trichromie).
Le block génère deux figures distinctes :
.web-image— figure affichée uniquement en version web, avec une image unique..print-image.float-image— figure affichée uniquement en version print, décomposée en trois couches colorées :.print-red/.red-layer— couche rouge.print-green/.green-layer— couche verte.print-blue/.blue-layer— couche bleue
Chaque couche accepte une image séparée, permettant une impression en trichromie. Une légende optionnelle (figcaption) est partagée entre les deux versions.
imagefloat — Image flottante
Insère une image flottante dans le texte. Utilise la classe .float-image.
interview — Interview (en cours)
Insère un bloc interview. Utilise la classe .interview-block.
spreadimage — Image en double page
Insère une image s'étendant sur une double page. Utilise la classe .spread-image.
video — Vidéo
Insère une vidéo.
text — Texte formaté
Insère un bloc de texte avec mise en forme.
Fichiers CSS
Tous les fichiers CSS se trouvent dans assets/css/.
| Fichier | Description |
|---|---|
main.css |
Fichier partagé entre la version web et la version print |
print-template.css |
Fichier de classes pré-faites pour le print — ne pas modifier |
print.css |
Styles exclusifs à la version print |
reset.css |
Reset CSS |
responsive.css |
Styles responsive pour la version web |
variables.css |
Déclaration des variables CSS — définir les variables ici |
web.css |
Styles exclusifs à la version web |
Documentation de print-template.css
Ce fichier contient des classes utilitaires prêtes à l'emploi pour la mise en page print. Ne pas écrire dedans.
Gestion des images
figure img.fill /* Remplit le conteneur en déformant l'image si nécessaire */
figure img.contain /* Affiche l'image en entier sans la rogner */
figure img.cover /* Remplit le conteneur en rognant l'image */
Sauts de page
.page /* Insère une page après l'élément */
.pagebreak /* Insère un saut de page après l'élément */
.blank-page /* Insère une page blanche (sans en-têtes ni pieds de page) */
Alignement de blocs de texte
.alignment-left /* Texte aligné à gauche, sans césure */
.alignment-right /* Texte aligné à droite, sans césure */
.alignment-center /* Texte centré, sans césure */
.alignment-justify /* Texte justifié avec césure automatique */
Images de fond et pleine page
Image pleine page (.full-bleed-image)
Positionne une image en pleine page avec bleed, s'adaptant selon la page gauche ou droite.
.full-bleed-image /* Image full-bleed positionnée en absolu */
.full-bleed-image.full-page /* Image couvrant la hauteur totale de la page */
Image en double page (.spread-image)
S'étend sur une double page grâce à --pagedjs-full-page: spread.
.spread-image /* Image couvrant le spread complet */
Image d'intervalle (.interval-image et .spread-interval-image)
Pages d'illustration entre des chapitres, avec fond via --backgroundImage.
.interval-image /* Page d'image seule, fond via CSS variable */
.spread-interval-image-left /* Première page du spread d'intervalle */
.spread-interval-image-right /* Seconde page du spread (image étendue à 200%) */
Image de fond (.background-image)
Image positionnée en fond de page, couvrant toute la surface de la page courante.
.background-image /* Image de fond pleine page */
Légendes (figcaption)
Les légendes sur fond image ont un style commun : fond blanc, bordure arrondie, couleur --green.
/* Positionnement selon le type d'image */
.full-bleed-image figcaption /* Bas de page, aligné gauche ou droite selon la page */
.spread-image figcaption /* Bas gauche du spread */
.interval-image figcaption /* Bas gauche de la page d'intervalle */
Colonnes de texte
.col-2 /* Texte sur 2 colonnes */
.col-3 /* Texte sur 3 colonnes */
Grille d'images
Le système de grille est basé sur 12 colonnes avec grid-gap: 0.5cm.
Largeur des figures :
figure /* 3 colonnes (défaut) */
figure.third /* 4 colonnes */
figure.half /* 6 colonnes */
figure.twothird /* 8 colonnes */
figure.threequarter /* 9 colonnes */
figure.full /* 12 colonnes (pleine largeur) */
Décalage (offset) :
figure.offset2 /* Commence à la colonne 3 */
figure.offset4 /* Commence à la colonne 5 */
figure.offset6 /* Commence à la colonne 7 */
figure.offset8 /* Commence à la colonne 9 */
/* Combinable avec les classes de largeur, ex : figure.half.offset4 */
Alignement vertical :
figure.top /* Aligné en haut */
figure.center /* Centré verticalement */
figure.bottom /* Aligné en bas */
Notes D6cor
Microtypo
Les règles microtypo qui s’appliquent:
Transformations HTML actives
Côté Kirby (PHP, serveur)
| Transformation | Où | Champs concernés |
|---|---|---|
->smartypants() |
print.php, default.php, blocs |
title, author, text, captions |
->kt() |
Blocs text, bibliographie, description | Markdown → HTML |
| Rendu des blocs Kirby | print.php |
Conversion des blocks en HTML |
->smartypants()
Applique des règles typographiques françaises au texte. Configuré dans site/config/config.php.
| Entrée | Sortie | Règle |
|---|---|---|
"texte" |
« texte » |
Guillemets doubles → guillemets français avec espace fine insécable |
' |
’ |
Apostrophe droite → apostrophe courbe |
... |
… |
Trois points → ellipse |
-- |
– |
Double tiret → tiret demi-cadratin |
--- |
— |
Triple tiret → tiret cadratin |
: ; ! ? |
 : etc. |
Espace avant ponctuation forte → espace fine insécable ( ) |
espace après « |
  |
Espace fine insécable après guillemet ouvrant |
avant ponctuation |
  |
Espace insécable ordinaire remplacée par espace fine |
Les balises pre, code, kbd, script, style, math sont ignorées.
->kt()
Traite le texte comme du KirbyText (Markdown étendu). Principales conversions :
| Entrée | Sortie |
|---|---|
**texte** |
<strong>texte</strong> |
*texte* |
<em>texte</em> |
# Titre |
<h1>Titre</h1> |
[lien](url) |
<a href="url">lien</a> |
(note: texte) |
Note de bas de page (kirbytag personnalisé) |
| Ligne vide | Nouveau paragraphe <p> |
Côté JS (paged.js, actifs)
| Plugin | Hook | Ce qu’il fait |
|---|---|---|
beforeParsed.js |
beforeParsed |
Ajoute data-unique-id sur <p> et <li> |
createIndex-hook.js + createIndex.js |
beforeParsed |
Génère un index alphabétique depuis .book-index |
followingNotes.js |
beforeParsed |
Gestion des notes de bas de page en ligne |
margin-notes.js |
beforeParsed |
Notes de marge numérotées |
moveElems.js |
beforeParsed |
Déplace des éléments via --x-move-elem |
floatPage.js |
beforeParsed / afterPageLayout |
Flotte des éléments sur la page via --pagedjs-float-page |
fullpage.js |
beforeParsed |
Gère les éléments pleine page |
decor-blockquote.js |
afterPageLayout |
Ajoute des éléments décoratifs autour des blockquotes |
decor-subtitles.js |
afterPageLayout |
Décore les sous-titres h3/h4 |
decor-num-pages.js |
afterRendered |
Ajoute une barre de progression visuelle des pages |
portfolio.js |
— | Gestion spécifique du layout portfolio |
toc.js |
beforeParsed |
Génère le sommaire |
tags-index.js |
beforeParsed / afterRendered |
Génère un index des thèmes avec numéros de page |
imposition.js |
afterRendered |
Imposition livret (si bouton activé) |
handlers.js |
beforeParsed |
Ajoute des IDs sur h3/h4, retire .full-page des portfolios |
Plugins inactifs (commentés)
| Plugin | Raison |
|---|---|
fix-justif.js |
Désactivé |
ragadjust-hook.js + ragadjust.js |
Désactivés |
regex-typo-hook.js + regex-typo.js |
Désactivés |
Hook page.render:after
Appliqué après le rendu complet de la page, sur les nœuds texte uniquement (entre balises HTML).
| Règle | Exemple |
|---|---|
après les mots d'une seule lettre |
à Paris → à Paris, y compris → y compris |
après les mots de deux lettres en début de phrase |
Si le texte → Si le texte, Or il → Or il |
Détection : après . ! ? … : ;, ou au premier mot d'un paragraphe. La capitale n'est pas utilisée comme signal pour éviter de toucher les noms propres en milieu de phrase.
Les URLs (http://, https://) ne sont pas affectées par les règles smartypants.
Gestion du content
Le dossier content/ est tracké dans git mais n'est pas déployé automatiquement sur le serveur. Le serveur fait référence : toutes les modifications de contenu passent par le panel Kirby en ligne.
Récupérer le content du serveur en local
Après des modifications dans le panel, pour rapatrier le content sur ta machine :
lftp -e "mirror --verbose --ignore-time --parallel=10 /content ./content; quit" -u USERNAME,PASSWORD HOST
Remplace USERNAME, PASSWORD et HOST par les credentials FTP (stockés dans les secrets Forgejo). Puis commit et push pour archiver l'état dans git.
Écraser le content du serveur avec le content local (sync manuelle exceptionnelle)
Ajouter temporairement --delete dans .forgejo/workflows/deploy.yml :
mirror --reverse --verbose --ignore-time --delete --parallel=10 content content
Commit et push pour déclencher le déploiement, vérifier que le serveur est propre, puis retirer --delete et re-push.