Introduction

Le composant Layout fournit une structure de page sémantique composée d'en-têtes personnalisés, de barres de navigation latérales (siders), de régions de contenu principal et de pieds de page. Il prend en charge le dimensionnement personnalisé de la barre latérale, la visibilité basée sur les points d'arrêt, le verrouillage de défilement épinglé (sticky) et les conteneurs remplissant le viewport.

Dans le CMS Page Builder, les auteurs de contenu et les développeurs peuvent configurer des panneaux structurels sémantiques en plaçant des cartes, des en-têtes, des stacks et des boutons dans des tableaux d'emplacements dédiés.

Utilisation

Ces exemples illustrent comment les éditeurs de contenu lient et structurent des modèles de page sémantiques.

1. Coque de page standard avec en-tête, contenu et pied de page

Une mise en page de document ou d'article standard avec des en-têtes sémantiques en haut et un panneau de pied de page en bas.

{
  "type": "layout",
  "header": [
    { "type": "heading", "text": "Site Brand Header", "as": "h4", "size": "sm" }
  ],
  "content": [
    { "type": "text", "content": "Main Article and Interactive Content" }
  ],
  "footer": [
    { "type": "text", "content": "© 2026 Acme Corp. All rights reserved.", "size": "xs" }
  ]
}

2. Coque de tableau de bord avec navigation latérale (Sider)

Ajoute un tiroir ou un rail de navigation à gauche de la région de contenu principal. Les siders peuvent avoir des largeurs personnalisées sm, md ou lg et être configurés pour se replier automatiquement sur les petits viewports mobiles.

{
  "type": "layout",
  "siderWidth": "sm",
  "siderHideBelow": "md",
  "header": [
    { "type": "heading", "text": "Dashboard System", "as": "h4", "size": "sm" }
  ],
  "sider": [
    {
      "type": "stack",
      "direction": "vertical",
      "gap": "2",
      "children": [
        { "type": "text", "content": "Analytics Overview", "size": "sm" },
        { "type": "text", "content": "Cloud Infrastructure", "size": "sm" }
      ]
    }
  ],
  "content": [
    { "type": "text", "content": "Cloud systems are operational. Latency is within normal bounds." }
  ]
}

3. Composition de layout imbriqué

Les layouts peuvent être imbriqués proprement à l'intérieur d'autres layouts. Cela est utile lorsque vous souhaitez un en-tête et un pied de page de site pleine largeur, mais que seul le contenu du corps central doit inclure une navigation latérale.

{
  "type": "layout",
  "header": [
    { "type": "heading", "text": "Global Full-Width Header", "as": "h3" }
  ],
  "content": [
    {
      "type": "layout",
      "siderWidth": "md",
      "sider": [
        { "type": "text", "content": "Nested Sidebar Rail" }
      ],
      "content": [
        { "type": "text", "content": "Nested Content Body" }
      ]
    }
  ],
  "footer": [
    { "type": "text", "content": "Global Full-Width Footer", "size": "xs" }
  ]
}

Propriétés

Notes pour les développeurs et accessibilité

• Règles d'imbrication et limite de profondeur : Sveltia CMS applique une limite d'imbrication visuelle d'environ quatre niveaux dans l'interface de l'éditeur. Cette limite de profondeur restreint ce qui peut être construit via l'UI, mais ne limite pas le compilateur de layouts — les modèles JSON rédigés manuellement peuvent imbriquer des layouts aussi profondément que nécessaire.
• Cartographie d'éléments sémantiques : Ce composant correspond directement à des éléments HTML5 valides et sémantiques : <header>, <aside>, <main> et <footer>.
• Compatibilité de navigation par saut : Lors de l'utilisation d'en-têtes et de pieds de page personnalisés, assurez-vous que les titres sont séquencés logiquement (p. ex. en commençant par un h1 sur la page) pour maintenir des scores d'accessibilité élevés.