Estruture seus temas Drupal de forma profissional.

Separação de código, templates e assets.

Classy é um tema principal do Drupal 8 e o tema base usado por Bartik e Seven. A marcação HTML encontrada em Classy (e seus subtemas) contém classes CSS estruturadas de forma semelhante às convenções de nomenclatura CSS BEM e SMACSS.

Embora as convenções de nomenclatura estilo BEM/SMACSS desenvolvidas por Classy sejam muito eficazes e ofereçam muitas vantagens, elas não são adequadas para todo projeto. Aqueles que não têm interesse nas classes CSS do Classy podem escolher um tema base diferente.

Subtemas, como qualquer outro tema, diferem em uma coisa: herdam os recursos do tema pai. Não há limitações nas possibilidades da cadeia que conecta os subtemas aos seus pais. Um subtema pode ser filho de outro subtema, e pode ser ramificado e organizado da forma que você achar adequado.

Templates Twig podem ser estendidos usando a seguinte sintaxe -

{% extends 'html.twig' %}

Leia mais em https://symfony.com/doc/current/templates.html#template-inheritance-and-layouts

A ideia geral no Drupal 8 é que você queira evitar criar HTML diretamente no código PHP do seu módulo personalizado. Você quer que isso vá para templates Twig. Para criar novos templates Twig no seu módulo, siga estas etapas.

Etapa #1: Defina hook_theme no arquivo .module
Crie um arquivo [module].module, se ainda não existir, e adicione código que defina cada um dos seus templates Twig. A chave de cada elemento no array é o que você precisará chamar do template mais tarde. Não use hífens no nome do arquivo.

Para fazer o tema do Drupal 8 o mais produtivo possível e oferecer mais oportunidades para a personalização da saída dos temas, o Drupal usa "funções de pré-processamento" e "funções de processamento".

Quando você define funções de pré-processamento Twig, você está adicionando novas variáveis que ficarão disponíveis no template.

Da documentação oficial do Twig: «Macros são semelhantes a funções regulares em linguagens de programação. Eles são úteis para reutilizar fragmentos de templates HTML comuns em uma forma reutilizável...»

Exemplo de uma macro em um template Twig:

Para incluir CSS (folhas de estilo) e JavaScript em sua biblioteca, você precisa ter um arquivo de biblioteca para sua tema ou módulo.

Um arquivo de biblioteca (.libraries.yml) especifica os arquivos CSS e JS a serem incluídos, bem como as dependências dessa biblioteca.

Exemplo de um arquivo classy.libraries.yml (que está localizado em themes/classy):

Twig é um mecanismo de template moderno, flexível e seguro para PHP. Drupal 8+ usa Twig como seu mecanismo de template padrão.

Por que o Drupal mudou para Twig?

Um tema em Drupal é uma coleção de arquivos (templates, stylesheets, scripts, etc.) que determinam a aparência e o comportamento de um site Drupal.

Drupal vem com temas padrão, como Classy, Bartik e Olivero. Você também pode criar seus próprios temas personalizados para obter a aparência desejada para seu site.

Um tema contém: