Estructura de archivos de un tema en drupal 8

En drupal 8 un tema es una coleccion de archivos que definen la capa de presentacion. Solamente los archivos .info.yml son requeridos sin embargo la mayoria de temas y subtemas utilizaran otros archivos. Este articulo lista los archivos y carpetas que encontraras dentro de un tema o subtema tipico.

Ubicacion de los temas en drupal 8

Debes colocar los temas en el directorio "themes" de tu instalacion de drupal 8. Dentro de este directorio se encuentran temas que vienen dentro del core tales como Bartik y Seven los cuales se encuentran en el directorio core/themes.

Es una buena practica colocar los temas de contribucion en una carpeta llamada "contrib" (este directorio debe ser creado manualmente) y tus propios temas dentro de una carpeta llamada "custom".

Los nombres de temas deben iniciar con letras minisculas y utilizar guion bajo en caso sean nombres compuestos ejemplo: mi_tema_personalizado

La estructura parcial de tu instalacion de drupal podria ser la siguiente:

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

Estructura de la carpeta de un tema

Este es un ejemplo de los archivos y directorios que encontraras tipicamente dentro 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.png
  |-screenshot.png
  |-templates
  |  |-maintenance-page.html.twig
  |  |-node.html.twig

*.info.yml

Cada tema debe contener un archivo  .info.yml. Sobre todo este archivo define metadatos, hojas de estilo (CSS) y regiones para bloques, es el unico archivo requerido dentro de un tema.

*.libraries.yml

Los archivos .libraries.yml son utilizados para definir las librerias CSS o JavaScript que podra cargar nuestro tema.

*.breakpoints.yml

 Los archivos .breakpoints.yml definen donde un tema responsive necesita adaptarse a diferentes dispositivos moviles. 

*.theme

 El archivo .theme es un archivo PHP que contiene todas la condiciones logicas y datos preprocesandola antes de mostrarla.

css/

 Es buena idea almacenar los archivos CSS en un subdirectorio 'css'. Los temas core de Drupal 8 organizan sus archivos CSS siguiendo la guia de estilos SMACSS. Para que un tema cargue archivos css deben ser definidos previamente en un archivo .libraries.yml y puede ser sobre-escrito o eliminado en el archivo .info.yml.

Haz clic aqui para leer mas acerca de la organizacion de archivos css en drupal 8

images/

Es una buena practica almacenar los archivos en un directorio 'images'

screenshot.png

 Si un archivo screenshot.png se encuentra dentro del tema se mostrara en la pagina 'Apariencia' ('Appearance'). Alternativamente este screenshot se puede definir en el archivo .info.yml.

logo.svg

 Si un archivo de vector para el logo de tu tema es encontrado aparecera en el header de tu sitio web. Los logos pueden subirse alternativamente en Apariencia > Configuracion (Appearance > Settings).

templates/

Los archivos template dentro de este directorio proveen marcado HTML y algo de logica de presentacion. En  drupal 8 los archivos templates (*.html.twig) deben ser almacenados en este directorio. Si sigues la convencion de nombres particular entonces drupal 8 reemplazara las plantillas core por las que tu proporciones, permitiendo sobre escribir el marcado por defecto.

Estructura core del tema Bartik

 Para darte un ejemplo de la estructura de un tema core que viene en drupal 8 puede apreciar en tu instalacion la estructura para el tema Bartik localizada en la siguiente ruta: 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