#Réglages globaux

Les réglages globaux valent pour le thème entier : les couleurs, la largeur du contenu, la typographie, l’arrondi des angles. Ils se lisent partout avec settings.<id> — dans la coquille, dans une section, dans une section de pied de page.

Deux fichiers, et la distinction entre les deux est toute la page : config/settings_schema.json déclare ce qui est réglable, config/settings_data.json valorise ces réglages pour ce site.

#settings_schema.json — déclarer

Un tableau de groupes. Chaque groupe porte un name — l’intertitre du panneau — et un tableau settings aux mêmes seize types que les schémas de section, segmented et icone compris.

[
  {
    "name": "Couleurs",
    "settings": [
      { "type": "color", "id": "papier", "label": "Fond de page", "default": "#ffffff" },
      { "type": "color", "id": "encre", "label": "Texte", "info": "Le texte courant, sur le papier comme sur la crème.", "default": "#2b1b12" },
      { "type": "color", "id": "creme", "label": "Crème", "info": "Le fond des bandes claires — la carte, une bande sur deux.", "default": "#fdf4e6" },
      { "type": "header", "content": "L'accent" },
      { "type": "color", "id": "accent", "label": "Accent", "default": "#9a4508" }
    ]
  },
  {
    "name": "Mise en page",
    "settings": [
      {
        "type": "range",
        "id": "largeur",
        "label": "Largeur du contenu",
        "min": 960,
        "max": 1440,
        "step": 40,
        "unit": "px",
        "default": 1160
      }
    ]
  }
]

Les huit thèmes d’origine déclarent tous ces trois groupes, dans cet ordre, et ça vaut la peine de copier le découpage :

#settings_data.json — valoriser

Un objet, avec une clé current. Tout ce qui est sous current devient un réglage global — sauf une clé réservée, sections.

{
  "current": {
    "encre": "#15171c",
    "papier": "#ffffff",
    "voile": "#f5f5f7",
    "accent": "#3a55cf",
    "accent_texte": "#ffffff",
    "police_titres": "inter",
    "police_texte": "inter",
    "echelle": 100,
    "casse_titres": "normale",
    "casse_surtitres": "capitales",
    "largeur": 1160,
    "arrondi": 12,
    "densite": 100,
    "boutons": "pilule",
    "filets": 1,
    "edition": "origo",
    "sections": {
      "annonce": { "settings": { "texte": "Devis gratuit sous 48 h" } },
      "entete": { "settings": { "allure": "barre", "cta_label": "Nous contacter", "cta_href": "/contact" } },
      "pied": { "settings": { "mentions": true } }
    }
  }
}

#La clé sections — les sections de la coquille

L’en-tête et le pied ne sont dans aucun template : ils apparaissent sur toutes les pages. Leurs réglages n’ont donc nulle part où aller, sinon ici.

"sections": {
  "entete": {
    "settings": { "cta_label": "Nous contacter", "cta_href": "/contact" }
  },
  "pied": {
    "settings": { "mentions": true },
    "blocks": [
      { "type": "reseau", "settings": { "reseau": "Instagram", "href": "https://instagram.com/atelier" } }
    ]
  }
}

La clé est le nom de la section, celui du {% section 'entete' %} de la coquille — donc le nom du fichier. Chaque entrée accepte settings et blocks.

Les default du schéma de la section sont bien appliqués sous ces valeurs : une section de coquille qu’on ne renseigne pas du tout rend avec ses défauts.

#Lire un réglage global

Partout, avec settings.<id>. La forme canonique est de les convertir en variables CSS dans la coquille, et nulle part ailleurs.

<style>
  :root {
    --encre: {{ settings.encre }};
    --papier: {{ settings.papier }};
    --accent: {{ settings.accent }};
    --accent-sombre: {{ settings.accent | teinte: -18 }};
    --accent-clair: {{ settings.accent | teinte: 88 }};
    --largeur: {{ settings.largeur }}px;
    --arrondi: {{ settings.arrondi }}px;
    --bouton-rayon: {% case settings.boutons %}{% when 'droit' %}0px{% when 'doux' %}8px{% else %}999px{% endcase %};
  }
</style>

Aucune section n’a alors besoin de connaître une couleur : elles héritent toutes de :root, et assets/theme.css reste un fichier CSS ordinaire, sans une ligne de Liquid.

#Ce qui se passe quand le JSON est cassé

Concrètement, un JSON invalide donne settings vide et sections vide. Deux conséquences distinctes :

• les réglages globaux retombent sur… rien. Il n’y a pas de fusion avec settings_schema.json : les default déclarés là ne sont jamais appliqués. {{ settings.accent }} rend une chaîne vide, et la variable CSS --accent: devient invalide — donc les couleurs du navigateur ;
• les sections de coquille, elles, retombent bien sur les default de leur propre {% schema %}, qui est lu séparément.

Une parade utile dans la coquille, tant que l’oubli reste possible :

--accent: {{ settings.accent | default: '#3a55cf' }};

#Les deux fichiers, côte à côte

#Ce qui vaut la peine d’être un réglage global

Ce qui doit changer partout d’un coup : couleurs, largeur, typographie, arrondi. Le test est simple — si le régler section par section serait une corvée, il est global.

Ce qui n’en est pas un : les titres, les textes, les images. Ils appartiennent à une section, et un réglage global qui ne sert qu’à un endroit est un réglage qu’on cherchera dans le mauvais panneau.

Les huit thèmes d’origine déclarent de quinze réglages globaux porteurs de valeur (forge) à trente et un (aplomb) — on ne compte ici que les entrées qu’un template peut lire, les header et les paragraph n’étant que des intertitres du panneau. Plus la liste s’allonge, moins le client la remplit jusqu’au bout — et c’est précisément à quoi sert le filtre teinte : dériver les nuances d’une couleur au lieu de les demander une par une.

#Pages voisines