#Les templates

Un template est un fichier JSON de templates/ qui compose une page : quelles sections, avec quels réglages, dans quel ordre. Il ne contient pas une ligne de HTML — le balisage est dans les sections, le template ne fait que les assembler.

C’est la séparation qui permet à un client de réorganiser sa page d’accueil sans ouvrir un fichier Liquid, et à un thème de servir sept gabarits avec les mêmes trente-cinq sections.

#La forme

{
  "sections": {
    "hero": {
      "type": "hero",
      "settings": { "titre": "Un travail soigné, tenu dans les délais" },
      "blocks": {
        "b1": { "type": "argument", "settings": { "texte": "Devis gratuit" } },
        "b2": { "type": "argument", "settings": { "texte": "Intervention sous 48 h" } }
      },
      "block_order": ["b1", "b2"]
    },
    "prestations": {
      "type": "prestations",
      "settings": { "colonnes": "3", "fond": "voile" }
    }
  },
  "order": ["hero", "prestations"]
}

Deux clés à la racine, et c’est tout.

#Ce qu’une instance peut porter

#L’ordre de résolution — trois niveaux

Une page du CMS demande un gabarit. Le moteur cherche, dans cet ordre :

1. templates/<nom>.json

   Le gabarit dédié. Une page « Contact » avec templates/contact.json obtient exactement la composition prévue pour elle.

2. templates/page.json

   Le gabarit générique des pages libres. C’est le maillon qui compte, et il est expliqué ci-dessous.

3. templates/index.json

   Le dernier recours. Il est requis dans tout thème, donc ce niveau répond toujours — sauf si son JSON est cassé.

Si aucun des trois ne répond, la page rend une chaîne vide et l’erreur Aucun template pour « <nom> ».

#Ce que page.json répare

D’où la forme d’un page.json : une tête neutre et un corps vide, prêts à recevoir du contenu.

{
  "sections": {
    "tete": {
      "type": "hero-sobre",
      "settings": { "surtitre": "", "titre": "", "texte": "" }
    },
    "corps": {
      "type": "texte",
      "settings": {},
      "blocks": {
        "b1": {
          "type": "paragraphe",
          "settings": {
            "texte": "Cette page attend son contenu. Ajoutez-y les sections que vous voulez depuis l'éditeur."
          }
        }
      },
      "block_order": ["b1"]
    }
  },
  "order": ["tete", "corps"]
}

Les titres sont volontairement vides : la section hero-sobre masque ce qui est blank, la page affiche donc une tête sobre sans texte parasite, et non « Un travail soigné, tenu dans les délais » sur la page « Mentions légales ».

#Les gabarits des quatre thèmes

Les quatre déclarent au minimum index, page, contact et a-propos : ce sont les pages qu’un site vitrine a toujours. origo va plus loin parce qu’il vise tous les métiers.

{
  "sections": {
    "tete": {
      "type": "hero-sobre",
      "settings": {
        "surtitre": "Écrivez-nous",
        "titre": "Nous contacter",
        "texte": "On vous répond sous 48 h, toujours par une personne."
      }
    },
    "contact": { "type": "contact", "settings": { "surtitre": "", "titre": "", "texte": "" } },
    "acces": {
      "type": "acces",
      "settings": { "fond": "voile" },
      "blocks": {
        "b1": { "type": "info", "settings": { "intitule": "Adresse", "detail": "12 rue de l'Exemple\n69000 Lyon" } },
        "b2": { "type": "info", "settings": { "intitule": "Téléphone", "detail": "04 00 00 00 00" } }
      },
      "block_order": ["b1", "b2"]
    }
  },
  "order": ["tete", "contact", "acces"]
}

Deux choses à noter. La section contact reçoit des titres vides parce que la tête les a déjà écrits : deux « Nous contacter » à la suite, c’est ce qu’on obtient quand on laisse les défauts partout. Et "detail" contient \n — dans un fichier JSON, l’échappement standard fonctionne ; c’est dans une chaîne Liquid qu’il ne fonctionnerait pas.

#La même section, deux fois sur une page

C’est tout l’intérêt d’indexer par identifiant plutôt que par type :

{
  "sections": {
    "services-particuliers": {
      "type": "prestations",
      "settings": { "titre": "Pour les particuliers", "colonnes": "2" }
    },
    "services-pros": {
      "type": "prestations",
      "settings": { "titre": "Pour les professionnels", "colonnes": "3", "fond": "voile" }
    }
  },
  "order": ["services-particuliers", "services-pros"]
}

Chaque instance reçoit son propre section.id, ce qui permet à la section de fabriquer des ancres uniques.

#Ce qui n’est pas dans un template

L’en-tête, le pied, la barre d’annonce. Ils apparaissent sur toutes les pages, donc c’est la coquille qui les pose avec {% section %}, et leurs valeurs vivent dans config/settings_data.json sous current.sections. Voir La coquille.

Les réglages globaux. Couleurs, largeur, typographie : ils valent pour le thème entier. Voir Réglages globaux.

#Ce qui se passe quand le JSON est cassé

lireTemplate rend null, et la page rend une chaîne vide avec l’erreur Aucun template pour « <nom> ». La coquille n’est même pas rendue.

Un template dont le JSON est valide mais auquel il manque la clé sections est traité de la même façon : null, page vide. La clé order, elle, est facultative.

#Le rendu, dans l’ordre

1. Les instances sont sélectionnées

   order est parcouru, chaque identifiant est cherché dans sections. Les absents sont écartés, les disabled aussi.

2. Les blocs sont ordonnés

   Pour chaque instance, block_order — ou l’ordre des clés — donne le tableau section.blocks.

3. Les sections sont rendues en parallèle

   Chacune avec son propre section, et le contexte complet du site. Une section ne voit ni les autres, ni ce qu’elles ont produit.

4. Les HTML sont concaténés, puis la coquille est rendue

   Les résultats sont joints par un saut de ligne, et cette chaîne devient content_for_layout.

#Pages voisines