6.2. De qué se compone un tema en Drupal 8. Descripción general del tema Stark.

04/05/2025, by Ivan

En Drupal 7, podías crear rápida y fácilmente un subtema basado en Zen y comenzar a construir tu sitio web. Desde Drupal 8 también hay varios temas base para crear tus propios temas. Pero antes de hacer un subtema sobre ellos, primero necesitas entender un poco qué hay y dónde está ubicado.

Los desarrolladores de Drupal proponen que consideremos el tema de ejemplo Stark. Este tema ha sido añadido a Drupal precisamente para familiarizarse con cómo está estructurado un tema. Veamos qué hay dentro de este tema:

Archivo Stark.info.yml

Comenzamos la revisión con el archivo stark.info.yml. Antes, en Drupal 7, los datos del tema se almacenaban en archivos .info. En Drupal 8 se usa YML en todas partes, por lo tanto, el archivo .info ahora es info.yml en formato YML. En YML, las claves y los valores están separados por dos puntos.

Nombre del tema:

name: Stark

El tipo de proyecto puede ser un tema o un módulo. En este caso es un tema.

type: theme

Descripción mostrada en la página del tema:

description: 'Un tema intencionalmente simple sin estilos para demostrar el HTML y CSS predeterminado de Drupal. Aprende cómo construir un tema personalizado a partir de Stark en la Guía de Temas.'

Agrupación de proyectos de Drupal para mayor comodidad, por ejemplo, cuando se incluyen módulos, se agruparán en pestañas:

package: Core

La versión para módulos contrib se define automáticamente, así que aquí está la variable VERSION, y la línea está comentada. De hecho, la versión se especifica más abajo:

# version: VERSION

La versión del core de Drupal también está comentada y se agrega automáticamente por drupal.org:

Para Drupal 8.8 y superior:

core: 8.x
core_version_requirement: ^8 || ^9

Para Drupal 8.8 e inferior:

# core: 8.x

Si usa o no un tema base; false significa que no lo usa:

base theme: false

El bloque con la versión del tema y el core se inserta automáticamente por drupal.org:

# Información añadida por el script de empaquetado de Drupal.org el 2016-02-03
version: '8.0.3'
core: '8.x'
project: 'drupal'
datestamp: 1454490380

Archivo stark.libraries.yml

Aquí incluimos los archivos CSS y JS del tema:

global-styling:
  version: VERSION
  css:
    base:
      css/layout.css: {}

También podemos incluir archivos JavaScript:

global-styling:
  version: VERSION
  css:
    base:
      css/layout.css: {}
  js:
    js/custom.js: {}

También es importante notar que jQuery ahora es opcional y puede que no se cargue en la página. Si usas jQuery en tu script personalizado, debes agregarlo al tema:

global-styling:
  version: VERSION
  css:
    base:
      css/layout.css: {}
  js:
    js/custom.js: {}
  dependencies:
    - core/jquery

Además, puedes especificar para los archivos CSS cuáles deben mostrarse siempre y cuáles solo en la versión de impresión:

global-styling:
  version: VERSION
  css:
    base:
      css/layout.css: {}
      css/style.css: {}
      css/colors.css: {}
      css/print.css: { media: print }
  js:
    js/custom.js: {}
  dependencies:
    - core/jquery

Archivos de descripción README.txt, screenshot.png

Estos archivos muestran cómo se ve el tema y cómo instalarlo, si existen características particulares de instalación o uso.

Archivo logo.svg

El archivo del logo se conecta automáticamente al diseño del tema si está en la raíz del sitio. También puedes subir tu logo desde la configuración del tema.

Carpeta config y archivo stark.schema.yml

Otro archivo YML del tema donde se almacenan las configuraciones del tema. Para el tema Stark, aquí solo se define el título de la página de configuración del tema.

Carpetas css, js

Estas carpetas contienen los archivos CSS y JavaScript personalizados. No olvides que no basta con colocar el archivo en la carpeta para incluirlo. Cada archivo debe ser incluido manualmente a través de stark.libraries.yml.

Archivo stark.breakpoints.yml

Este archivo define los tamaños de pantalla para las versiones móviles del sitio. Es una nueva funcionalidad de Drupal, la abordaremos en detalle en uno de los próximos artículos.

stark.mobile:
  label: mobile
  mediaQuery: '(min-width: 0px)'
  weight: 0
  multipliers:
    - 1x
stark.narrow:
  label: narrow
  mediaQuery: 'all and (min-width: 480px) and (max-width: 959px)'
  weight: 1
  multipliers:
    - 1x
stark.wide:
  label: wide
  mediaQuery: 'all and (min-width: 960px)'
  weight: 2
  multipliers:
    - 1x

Este es un tema para familiarizarse con Stark. En el próximo artículo, veremos cómo crear tu propio tema basado en el tema Stable.

Extra Block Types (EBT) - Nueva experiencia con Layout Builder❗

❗Extra Paragraph Types (EPT) - Nueva experiencia con Paragraphs