Agregar regiones a un tema

Agregar regiones a un tema requiere:

• Agregar metadatos de la región en el archivo THEMENAME.info.yml.
• Editar el archivo page.html.twig e imprimir las nuevas regiones.

Nota. Si declaras alguna región en tu tema, incluso solo una, las regiones predeterminadas ya no se aplicarán y tú serás responsable de declarar todas las áreas que quieras usar.

Cualquier bloque que estuviera en regiones que ya no existen (porque no las definiste) ahora estará deshabilitado; especialmente si editas THEMENAME.info.yml y reconstruyes la caché con drush cr, verás un mensaje como este para cada uno:

El bloque themename_breadcrumbs estaba asignado a una región inválida breadcrumb y fue deshabilitado.

Si visitas /admin/structure/block, todos los bloques deshabilitados aparecerán en la parte superior con un indicador (deshabilitado). Puedes arrastrarlos o usar el menú desplegable "Región" para reasignarlos, o eliminar los bloques que ya no necesites.

Asegúrate de conservar las regiones page_top y page_bottom. Estas son áreas "ocultas" usadas para la estructura en la parte superior e inferior de la página, como analíticas o la barra de administración. No necesitas listarlas en THEMENAME.info.yml, solo no las elimines del template html.html.twig. Módulos pueden depender de su presencia.

Agregar regiones en tu archivo de información

Comienza declarando cualquier región nueva en el archivo THEMENAME.info.yml. Las regiones se declaran como hijos de la clave regions así:

regions:
  header: 'Encabezado'
  content: 'Contenido'
  footer: 'Pie de página'

Las claves de región deben ser alfanuméricas y pueden contener guiones bajos (_). Las claves deben comenzar con una letra. La clave es el nombre de máquina (usado en código), y el valor es la versión legible para mostrar en la interfaz administrativa.

Agregar regiones en tus plantillas

Para que las regiones muestren cualquier contenido asignado, asegúrate de que tus nuevas regiones también estén agregadas en tu archivo page.html.twig. Las regiones se presentan como variables Twig, cuyo nombre coincide con la clave usada en THEMENAME.info.yml precedida por la cadena page.

Ejemplo:

header: 'Encabezado' 

...se vuelve:

{{ page.header }} 

Se comportan como cualquier otra variable Twig y pueden envolver cualquier marcado que se adapte a tu caso de uso.

(La sintaxis para áreas ocultas por defecto es diferente, véase abajo.)

Regiones por defecto

Consulta la documentación de page.html.twig para la lista de regiones por defecto.

• page.header
• page.primary_menu
• page.secondary_menu
• page.highlighted
• page.help (texto dinámico de ayuda, principalmente para páginas administrativas)
• page.content (contenido principal de la página actual)
• page.sidebar_first
• page.sidebar_second
• page.footer
• page.breadcrumb

Si tu tema no declara regiones, Drupal usará este conjunto de valores por defecto.

Estas áreas corresponden a lo que espera el archivo por defecto core/modules/system/templates/page.html.twig, junto con dos áreas ocultas page_top y page_bottom — no necesitas declararlas si sobrescribes los valores por defecto, sin embargo, las variables Twig {{ page_top }} y {{ page_bottom }} deben conservarse en el template html.html.twig.