JSON templates

Um JSON template é o blueprint de uma página ou região de layout: declara quais sections são renderizadas, em que ordem, com quais settings pré-carregados e quais blocos contêm. O Brand Editor lê esse blueprint para apresentar a página ao usuário e permitir que ele a reorganize sem tocar no código.

Tipos de template

Há duas variantes, com a mesma estrutura JSON, mas renderizadas em regiões distintas:

Estrutura do arquivo

{
  "sections": {
    "<section-id>": {
      "type": "<nombre del archivo en sections/>",
      "settings": { ... },
      "blocks": {
        "<block-id>": {
          "type": "<nombre del archivo en blocks/>",
          "settings": { ... },
          "blocks": { ... },
          "block_order": [ ... ]
        }
      },
      "block_order": [ "<block-id>", ... ]
    }
  },
  "order": [ "<section-id>", ... ]
}

Chaves t: em settings

Os valores de settings podem ser chaves t: que se resolvem a partir dos arquivos *.schema.json em translations/. Isso permite que os valores padrão do template apareçam no idioma do usuário no editor.

"settings": {
  "text": "t:defaults.slide.heading",
  "label": "t:defaults.slide.button"
}

A resolução de chaves t: ocorre no momento de renderizar a UI do editor, usando os arquivos <locale>.schema.json.

Exemplo completo

Fragmento de templates/pages/home.json:

{
  "sections": {
    "slideshow": {
      "type": "slideshow",
      "settings": {
        "section_width": "full",
        "height": 400,
        "autoplay": true
      },
      "blocks": {
        "slide_1": {
          "type": "slide",
          "blocks": {
            "heading": {
              "type": "heading",
              "settings": { "text": "t:defaults.slide.heading", "size": "h1" }
            },
            "text": {
              "type": "text",
              "settings": { "text": "t:defaults.slide.description" }
            },
            "button": {
              "type": "button",
              "settings": { "label": "t:defaults.slide.button" }
            }
          },
          "block_order": ["heading", "text", "button"]
        }
      },
      "block_order": ["slide_1"]
    }
  },
  "order": ["slideshow"]
}

O que este exemplo ilustra:

• sections é um dicionário; order controla a ordem de renderização.
• Cada section tem type (coincide com um arquivo em sections/), settings e blocks opcionais.
• Os blocks podem aninhar outros blocks: o block slide contém heading, text e button.
• block_order controla a sequência de renderização dentro de cada pai.
• Os valores t: em settings se resolvem a partir das traduções de schema.

Layout templates

templates/layout/header.json e templates/layout/footer.json seguem exatamente o mesmo formato, mas são renderizados nas regiões de header e footer em vez de <main>. Essas regiões são compartilhadas entre todas as páginas do site.

A partir de layouts/layout.tpl:

{% layout_template 'header' %}

<main id="MainContent" class="main-content main-container" role="main">
  {{ page_template_content }}
</main>

{% layout_template 'footer' %}

As sections declaradas em templates/layout/header.json (como header.tpl e announcement-bar.tpl) são renderizadas em todas as páginas sem necessidade de incluí-las em cada page template individual.