themes - l'apparence d'un site tilder
tilder écrit du HTML aux noms de classes stables, sans aucun style qui lui soit propre ; c'est le dossier theme/ du site qui décide de son apparence. Un thème, c'est un gabarit à variables, une feuille de style, et tout ce qu'il choisit d'y ajouter : polices, scripts, aperçu de lien, types de contenu. tilder ne fournit aucun thème en dehors de celui du site de départ, un thème minimal à copier puis à faire grandir.
Un thème est un dossier, theme/, à côté de content/ et assets/. Un seul fichier y est obligatoire, layout.html : le HTML qui entoure chaque page, dans lequel la construction remplace {{ title }}, {{ body }} et les autres variables. Tout le reste est facultatif :
style.css, qui met en forme les classes écrites par la construction ;theme.toml, les réglages et les mots du thème, sous ceux du site.La construction remplit le gabarit, copie ce qui doit être servi, et ne sert jamais ce qu'elle se contente de lire. Le thème a la charge de l'apparence et d'une part de l'accessibilité (contraste, focus, texte masqué à l'écran) ; la construction, celle du balisage : titres, textes alternatifs, libellés, attributs aria-*.
Un site utilise le thème de son dossier theme/, et aucun autre : aucun réglage ne nomme un thème. Pour en utiliser un, copiez-le à cet endroit.
Le site de départ est livré avec son thème, starter/theme/ dans le dépôt de tilder : un gabarit, une feuille de style et un aperçu de lien, sur les polices du système, sans aucun script. Il met en forme chaque classe écrite par la construction et respecte le contraste WCAG AA en clair comme en sombre. Partir du site de départ (premiers pas) vous donne ce thème, à modifier comme bon vous semble.
Le site que vous lisez a son propre thème, et montre ce que fait un thème plus fourni : deux gabarits de plus (layouts/home.html pour la page d'accueil, layouts/doc.html pour la documentation), deux types de contenu dans types/ (doc et showcase), trois scripts (le bouton de copie, la barre latérale sur petit écran, la recherche), des polices hébergées sur le site, et ses mots en anglais et en français dans theme.toml et theme.fr.toml.
Copiez son dossier en tant que theme/, puis lisez son README : un thème qui ajoute des types de contenu indique les collections à déclarer dans site.toml, et un thème peut demander une version de tilder ou un réglage du serveur (une recherche lit son index, ce qui exige connect-src 'self' dans la Content-Security-Policy de la page).
rm -rf theme
cp -r ../other-theme themeUn thème peut vivre dans son propre dépôt git, cloné en tant que theme/ : son dossier .git, ses fichiers git, ainsi qu'un README.md ou un LICENSE à sa racine ne sont jamais servis.
Deux façons de modifier un thème tout en reprenant sa prochaine version telle quelle :
content/site.toml (ou site.<lang>.toml), qui a le dernier mot sur le theme.toml du thème (configuration).assets/. Il l'emporte sur celui du thème : assets/style.css remplace theme/style.css, assets/layouts/doc.html remplace le gabarit du thème qui porte ce nom.Les types/ d'un thème sont des modules Python, exécutés par la construction avec les droits de la personne qui la lance. Un thème fait partie du site, au même titre que tilder : lisez-le avant de l'utiliser, comme tout code que vous exécutez. Un thème sans types/ n'exécute rien à la construction ; ses scripts s'exécutent dans le navigateur du lecteur, selon les règles des scripts.
Fichiers : chaque fichier qu'un thème peut fournir, ce qu'en fait la construction, et ce qui est servi.
Gabarits : layout.html et layouts/, le choix du gabarit d'une page, chaque variable et ce que le gabarit doit conserver.
Classes : chaque classe écrite par la construction, l'élément qui la porte, et l'accessibilité dont le thème est responsable.
Scripts : code.js, members.js, le script d'un type, où chacun est chargé et les règles qu'ils suivent.
Vérifier un thème : build.py --check, qui vérifie les classes et le contraste des couleurs d'un thème au regard du tilder qui l'exécute.