Hablemos de su proyecto
Partitech Sonata Extra Bundle

Paquete Extra de Sonata: configurar los diseños de Sonata Page

Introducción Configurar los diseños de Sonata Page es un paso crucial para crear un sitio web bien estructurado y visualmente atractivo. Esta guía le ayudará a comprender el proceso de configuración del diseño en Sonata Page. Requisitos previos Antes de co...

Escrito por Géraud Bourdin 2 min de lectura

Introducción

Configurar los diseños de Sonata Page es un paso crucial para crear un sitio web bien estructurado y visualmente atractivo. Esta guía le ayudará a comprender el proceso de configuración del diseño en Sonata Page.

Requisitos previos

Antes de continuar, asegúrese de haber leído la documentación principal de SonataPage : Leer la documentación de SonataPage

Pasos de configuración

Paso 1: definir la configuración de su diseño

Comience por definir su diseño en un archivo de configuración YAML. Aquí hay un ejemplo:

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

Paso 2: configurar la plantilla principal

Defina la ruta a su modelo principal. Este modelo se usará para renderizar toda la página:

  • Camino : layout_partitech_index.html.twig

Paso 3: configurar los contenedores

Defina los contenedores en la configuración. Los contenedores son segmentos en su diseño como el logo, el encabezado, el contenido, etc.

  • Contenedores: Defina los contenedores y asígneles nombres para identificarlos fácilmente.

Paso 4: devolver los contenedores en la plantilla

Coloque estos contenedores en su plantilla principal usando la siguiente sintaxis:

{{ 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 }) }}

Paso 5: configurar la matriz y el mapeo Configure la matriz para representar la disposición del contenido y mapee los códigos de disposición (L, H, R, C, F) a los contenedores respectivos.

  • Matriz: Se trata de la representación visual de la disposición de su modelo, lo que ayuda a seleccionar los contenedores en la interfaz de administración de Sonata.
  • Mapeo: Ayuda a vincular los códigos de disposición de la matriz con los contenedores definidos.

img.png

Conclusión

Siguiendo estos pasos, tendrá una configuración de diseño bien estructurada para su SonataPage. Esta configuración no solo hará que sus páginas sean visualmente coherentes, sino que también agilizará su flujo de trabajo en la gestión del contenido y del diseño de las páginas.

Consejo de mantenimiento

Nombre los contenedores según su función editorial en lugar de su posición visual. Una matriz estable (header, main, aside, footer) resiste mejor a las evoluciones gráficas y facilita la reutilización de los bloques entre páginas.

Compartir este artículo