Creando nuestro primer tema básico

Ahora que hemos revisado los conceptos básicos de cómo se construye un tema, no hay mejor momento para crear nuestro primer tema base. Comenzaremos por crear un tema llamado twig que usaremos para explorar cómo funcionan Twig y el sistema Theme en Drupal 8.

Primer paso: crear una nueva carpeta

Crea una nueva carpeta en nuestra carpeta de temas y llámala twig, como se muestra en la imagen:

Paso dos: crea un archivo de información

Crea un nuevo archivo denominado twig.info.yml y agrega la siguiente información de configuración al archivo:

name: Twig
type: theme
description: 'A Twig theme for demonstrating TWIG syntax'
core: 8.x
base theme: false

Paso tres: copia las plantillas principales

Copia las plantillas html.html.twig y page.html.twig desde la carpeta core/modules/system/templates y pégalas en nuestra carpeta /themes/twig. Abre la página html.twig en nuestro editor y reemplaza la estructura HTML debajo de los comentarios con el siguiente código:

<h1>Welcome to Twig</h1>
{{ page.content }}

Paso cuatro: incluye una captura de pantalla

No siempre es un paso obligatorio, pero uno que definitivamente ayudará es incluir una captura de pantalla que muestra o representa nuestro tema dentro del administrador de Apariencia. En general, generaríamos una captura de pantalla basada en el tema finalizado, pero como recién estamos comenzando, podemos copiar una existente de nuestros archivos.

Comienza por navegar a la carpeta imágenes y copia el archivo screenshot.png en nuestra nueva carpeta themes/twig.

Paso cinco: instalar nuestro tema

A continuación, necesitaremos instalar nuestro nuevo tema navegando a /admin/apariencia y ubicando nuestro nuevo tema llamado Twig en la sección de temas desinstalados.

Haz clic en Instalar y configura como enlace predeterminado para instalar nuestro nuevo tema.

Paso seis: bienvenido a Twig

Hemos creado con éxito nuestro primer tema. Podemos obtener una vista previa de cómo se ve nuestro sitio web volviendo a la página de inicio de nuestra instancia de Drupal. Deberíamos ver nuestro nuevo tema mostrando un mensaje de bienvenida a Twig, como se ve en la imagen:

Con nuestro nuevo tema en su lugar, podemos comenzar a profundizar en Twig y todas las excelentes características que Drupal 8 nos presenta con este nuevo motor de plantillas.