Estructura de carpetas de los temas en Drupal 8

Un tema es un conjunto de archivos que definen el nivel de presentación. También puedes crear uno o varios "subtemas" o variantes de tema. Solo se requiere un archivo .info.yml, pero la mayoría de los temas y subtemas usarán otros archivos además de este. En esta página se enumeran los archivos y carpetas que se encuentran en un tema o subtema típico.

Ubicación de los temas

Debes colocar los temas en la carpeta "themes" de tu instalación de Drupal. Ten en cuenta que los temas principales de Drupal, como Bartik y Seven, se encuentran en la carpeta core/themes de tu instalación.

Se recomienda colocar los temas añadidos en la subcarpeta «contrib», y tus propios temas en la carpeta «custom».

Cada tema individual reside en un directorio con el nombre del tema. Por ejemplo, fluffiness. El nombre debe estar en minúsculas, comenzar con una letra y usar el carácter de subrayado (_) en lugar de espacios.

La estructura (parcial) de tu instalación de Drupal podría verse así:

  |-core
  |  |-modules
  |  |-themes
  |  |  |-bartik
  |  |  |-seven
  ..
  |-modules
  |-themes
  |  |-contrib
  |  |  |-zen
  |  |  |-basic
  |  |  |-bluemarine
  |  |-custom
  |  |  |-fluffiness

Estructura de la carpeta del tema

Este es un ejemplo de archivos y carpetas que se encuentran en la estructura típica de la carpeta de un tema:

  |-fluffiness.breakpoints.yml
  |-fluffiness.info.yml
  |-fluffiness.libraries.yml
  |-fluffiness.theme
  |-config
  |  |-install
  |  |  |-fluffiness.settings.yml
  |  |-schema
  |  |  |-fluffiness.schema.yml
  |-css
  |  |-style.css
  |-js
  |  |-fluffiness.js
  |-images
  |  |-buttons.png
  |-logo.svg
  |-screenshot.png
  |-templates
  |  |-maintenance-page.html.twig
  |  |-node.html.twig

A continuación, se describen los archivos más comunes que puedes encontrar en un tema.

*.info.yml
El tema debe contener un archivo .info.yml para definir el tema. Entre otras cosas, los archivos .info.yml definen metadatos, bibliotecas y regiones de bloques. Este es el único archivo obligatorio en un tema.

*.libraries.yml
El archivo .libraries.yml se usa para definir las bibliotecas de JavaScript y CSS que el tema puede cargar.

*.breakpoints.yml
Los puntos de interrupción definen dónde debe cambiar el diseño adaptable para responder a diferentes dispositivos. Los puntos de interrupción se definen en un archivo .breakpoints.yml.

*.theme
El archivo .theme es un archivo PHP que contiene toda la lógica condicional y la preprocesación de datos. También puede extender las configuraciones principales del tema. Creación de configuraciones avanzadas del tema.

CSS/
Se recomienda guardar los archivos .css en la subcarpeta 'css'. Los temas principales de Drupal 8 organizan los archivos CSS siguiendo la guía de estilo SMACSS. Para que el tema cargue los archivos CSS, deben ser definidos en el archivo .libraries.yml y pueden ser sobrescritos o eliminados en el archivo .info.yml.

JS/
Los archivos JavaScript específicos del tema se almacenan en la carpeta 'js'. Para que el tema cargue los archivos JavaScript, estos deben ser definidos en el archivo .libraries.yml.

images/
Se recomienda almacenar las imágenes en la subcarpeta «images».

screenshot.png
Si el archivo screenshot.png está en la carpeta del tema, se usará en la página de "Apariencia". Además, puedes definir el screenshot en el archivo .info.yml.

logo.svg
Si un archivo vectorial SVG del logotipo del tema está en la carpeta del tema, puede usarse en el encabezado del sitio. Los logotipos también se pueden cargar desde la sección "Apariencia" > "Configuración".

templates/
Los templates proporcionan la estructura HTML y algo de lógica de presentación. A diferencia de Drupal 7, los archivos de plantillas en Drupal 8 (archivos *.html.twig) deben almacenarse en la subcarpeta 'templates'. Si sigues ciertas convenciones de nombres, Drupal reemplazará las plantillas predeterminadas principales por las que proporciones, lo que te permitirá sobrescribir la estructura predeterminada. También puedes organizar tus plantillas en subcarpetas, por ejemplo, todas las plantillas de bloques dentro de templates/blocks y todas las plantillas de vistas dentro de templates/views.

Tema principal Bartik: estructura de carpetas

Como ejemplo, observa la estructura de carpetas de Bartik, que se encuentra en core/themes/bartik:

  |-bartik.breakpoints.yml
  |-bartik.info.yml
  |-bartik.libraries.yml
  |-bartik.theme
  |-color
  |  |-color.inc
  |  |-preview.css
  |  |-preview.html
  |  |-preview.js
  |-config
  |  |-schema
  |  |  |-bartik.schema.yml
  |-css
  |  |-colors.css
  |  |-layout.css
  |  |-maintenance-page.css
  |  |-print.css
  |-images
  |  |-add.png
  |  |-required.svg
  |  |-tabs-border.png
  |-logo.svg
  |-screenshot.png
  |-templates
  |  |-block--search-form-block.html.twig
  |  |-block--system-branding-block.html.twig
  |  |-block--system-menu-block.html.twig
  |  |-block.html.twig
  |  |-comment.html.twig
  |  |-field--taxonomy-term-reference.html.twig
  |  |-maintenance-page.html.twig
  |  |-node.html.twig
  |  |-page.html.twig
  |  |-status-messages.html.twig

Más información

Estándares de codificación: organización de archivos CSS