#Thèmes

Un thème Webcosa est un dossier de fichiers texte, rendus par Liquid, qui décide de tout ce qu’un visiteur voit. Cette section décrit le format en entier : les six dossiers, la coquille, les sections et leurs schémas, les quatorze types de réglage, les templates, et les bornes dans lesquelles tout cela s’exécute.

Le format est celui de Shopify, à la lettre. Ce n’est pas une coïncidence et ce n’est pas de la paresse : c’est un format documenté depuis dix ans, que des milliers de gens connaissent déjà, et pour lequel les outils existent — coloration syntaxique, éditeurs, tutoriels. Un format maison aurait obligé à tout réexpliquer, pour aucun gain. Ce qui diffère, et pourquoi, est le sujet de Anatomie d’un thème.

#Un thème en trente secondes

Trois fichiers suffisent à faire rendre un site. Les voici, dans leur forme la plus courte qui fonctionne.

<!doctype html>
<html lang="fr">
  <head>
    <meta charset="utf-8">
    <title>{{ page.titre }} — {{ site.nom }}</title>
    {{ 'theme.css' | asset_url | stylesheet_tag }}
  </head>
  <body>{{ content_for_layout }}</body>
</html>

{
  "sections": { "accueil": { "type": "hero" } },
  "order": ["accueil"]
}

<section class="hero">
  <h1>{{ section.settings.titre }}</h1>
</section>

{% schema %}
{
  "name": "Bandeau d'accueil",
  "settings": [
    { "type": "text", "id": "titre", "label": "Titre", "default": "Bonjour" }
  ]
}
{% endschema %}

Il manque config/settings_schema.json pour que le thème soit installable — un tableau vide [] suffit. Le reste de cette section explique ce qu’on met dedans, et pourquoi.

#Les douze pages

#Dans quel ordre les lire

Elles se suivent, et l’ordre n’est pas alphabétique : il va du contenant au contenu, puis du contenu à ses réglages.

1. Comprendre ce qu’est un thème

   Anatomie puis Arborescence : ce que le format est, ce qu’il n’est pas, et où chaque fichier se range. Une demi-heure, et on ne se trompe plus de dossier.

2. Écrire du HTML qui rend

   La coquille, Écrire une section, Les templates. À la fin de ces trois pages, on sait composer une page entière.

3. Le rendre modifiable

   Le bloc schema, Les types de réglage, Les blocs, Réglages globaux. C’est ici qu’un thème cesse d’être une maquette figée.

4. Ranger et durcir

   Snippets, Assets, Le bac à sable. Les fragments réutilisables, les feuilles de style, et les bornes qu’on ne franchit pas.

#Neuf thèmes complets à lire

Le dépôt embarque neuf thèmes d’origine : aplomb, cadence, epure, fondant, forge, origo, piazza, scene, vela. Tous les exemples de cette documentation en sont tirés — jamais inventés.

Sept d’entre eux sont proposés à l’installation. epure et aplomb en sont retirés : leur config/theme.json déclare "catalogue": false, donc ils ne paraissent plus dans le Store et ne s’installent plus. Ils restent en revanche compilés, lisibles et mis à jour pour les sites qui les avaient déjà — voir Retirer un thème du catalogue. Rien ne change donc pour qui vient ici les lire : aplomb, ses trente-trois sections et ses huit éditions, reste le meilleur exemple d’un thème à habillages du dépôt, et epure celui d’un thème qui n’a que son index.

Quatre d’entre eux portent le gros des exemples de ces pages :

Ils vivent dans themes/<id>/ à la racine du dépôt. Un thème du catalogue n’est pas un thème installé : voir Ajouter un thème au catalogue pour la différence, qui compte.

#Ce qu’un thème ne peut pas faire

Autant le dire avant de commencer, ça évite d’écrire trois cents lignes pour rien :

• pas de product, cart, collection — Webcosa fait des sites vitrines. Voir Les absents ;
• pas de JavaScript dans assets/ — la liste des extensions est fermée, et c’est une mesure de sécurité. Voir Assets ;
• pas d’accès au disque, au réseau, ni aux variables d’environnement — {% render %} ne voit qu’une carte en mémoire. Voir Le bac à sable ;
• pas d’appel de fonction, pas d’eval — c’est Liquid, et c’est la raison d’être du langage.

#Pour aller plus loin