Parliamo del progetto
Partitech Sonata Extra Bundle

Pacchetto Extra Sonata: configurare i layout di Sonata Page

Introduzione Configurare i layout di Sonata Page è un passo cruciale per creare un sito web ben strutturato e visivamente attraente. Questa guida ti aiuterà a comprendere il processo di configurazione del layout in Sonata Page. Prerequisiti Prima di contin...

Scritto da Géraud Bourdin 2 min di lettura

Introduzione

Configurare i layout di Sonata Page è un passo cruciale per creare un sito web ben strutturato e visivamente attraente. Questa guida ti aiuterà a comprendere il processo di configurazione del layout in Sonata Page.

Prerequisiti

Prima di continuare, assicuratevi di aver letto la documentazione principale di SonataPage: Leggere la documentazione di SonataPage

Fasi di configurazione

Fase 1: definire la configurazione del layout

Iniziate definendo il vostro layout in un file di configurazione YAML. Ecco un esempio:

partitech_index:
  path: 'demo_index.html.twig'
  name: 'Partitech Index'
  containers:
    logo:
      name: Logo
    header:
      name: Header
    recherche:
      name: Recherche
    content:
      name: Contenu
    footer:
      name: Footer
  matrix:
    layout: |
      LLHHHHHHHHHHHHHHHHRR
      CCCCCCCCCCCCCCCCCCCC
      CCCCCCCCCCCCCCCCCCCC
      CCCCCCCCCCCCCCCCCCCC
      CCCCCCCCCCCCCCCCCCCC
      CCCCCCCCCCCCCCCCCCCC
      CCCCCCCCCCCCCCCCCCCC
      FFFFFFFFFFFFFFFFFFFF
    mapping:
      L: logo
      H: header
      R: recherche
      C: content
      F: footer

Fase 2: configurare il modello principale

Definisci il percorso verso il tuo modello principale. Questo modello sarà utilizzato per rendere l'intera pagina:

  • Percorso : layout_partitech_index.html.twig

Fase 3: configurare i contenitori

Definite i contenitori nella configurazione. I contenitori sono segmenti nella vostra disposizione come il logo, l’intestazione, il contenuto, ecc.

  • Contenitori: Definisci i contenitori e assegna loro dei nomi per identificarli facilmente.

Fase 4: restituire i contenitori nel modello

Posizionate questi contenitori nel vostro template principale usando la seguente sintassi:

{{ sonata_block_render_event('breadcrumb', { 'context': 'logo', 'current_uri': app.request.requestUri }) }}
{{ sonata_block_render_event('breadcrumb', { 'context': 'header', 'current_uri': app.request.requestUri }) }}
{{ sonata_block_render_event('breadcrumb', { 'context': 'recherche', 'current_uri': app.request.requestUri }) }}
{{ sonata_block_render_event('breadcrumb', { 'context': 'content', 'current_uri': app.request.requestUri }) }}
{{ sonata_block_render_event('breadcrumb', { 'context': 'footer', 'current_uri': app.request.requestUri }) }}

Fase 5: configurare la matrice e il mapping

Configurate la matrice per rappresentare la disposizione del contenuto e mappate i codici di disposizione (L, H, R, C, F) ai rispettivi contenitori.

  • Matrice: Si tratta della rappresentazione visiva della disposizione del tuo modello, che aiuta a selezionare i contenitori nell'interfaccia di amministrazione di Sonata.
  • Mapping: Aiuta a collegare i codici di disposizione della matrice ai contenitori definiti.

img.png

Conclusione

Seguendo questi passaggi, avrai una configurazione di layout ben strutturata per il tuo SonataPage. Questa configurazione renderà non solo le tue pagine visivamente coerenti, ma snellirà anche il tuo flusso di lavoro nella gestione dei contenuti e del layout delle pagine.

Consiglio di manutenzione

Nominate i contenitori secondo il loro ruolo editoriale piuttosto che la loro posizione visiva. Una matrice stabile (header, main, aside, footer) resiste meglio alle evoluzioni grafiche e facilita il riutilizzo dei blocchi tra le pagine.

Condividi questo articolo