Subtemas

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. Isso é o que dá aos subtemas um grande potencial.

Para criar um subtema, defina-o como qualquer outro tema e declare seu tema base usando a chave «base theme». (Observe que esta chave não tem um caractere de sublinhado.)

Exemplo de subtema: Fluffiness

Fluffiness é um exemplo de subtema que usa Classy como tema base.

Esta é a estrutura de pastas em que você obterá os seguintes arquivos:

themes/
└──  fluffiness/
     ├── fluffiness.info.yml
     └── fluffiness.libraries.yml

O arquivo de informações é chamado fluffiness.info.yml:

name: Fluffiness
type: theme
description: This is a fluffy sub theme of Classy
core: 8.x
# Defines the base theme
base theme: classy
# Defines libraries group in which we can add css/js.
libraries:
  - fluffiness/global-styling
# Regions
regions:
  header: Header
  featured: Featured
  content: Content
  sidebar_first: First sidebar
  sidebar_second: Second sidebar
  footer: Footer

Inclua o arquivo fluffiness.libraries.yml para adicionar css/js ao grupo de estilos globais definido acima na chave de biblioteca:

global-styling:
  css:
    component:
      css/style.css: {}

Saiba mais sobre como adicionar folhas de estilo (CSS) e JavaScript (JS) a um tema Drupal 8.

Se você quiser usar um nome diferente de «fluffiness», simplesmente substitua todas as ocorrências de «fluffiness» pelo seu nome («todas as ocorrências» também incluem o nome da pasta). Por exemplo:

themes/
└──  my_custom_theme/
     ├── my_custom_theme.info.yml
     └── my_custom_theme.libraries.yml

O texto que você insere na linha «name:» do arquivo info.yml é de forma livre e não precisa corresponder exatamente ao nome do arquivo do seu subtema. Por exemplo, pode ser assim:

name: My Custom Theme
# (all the other lines omitted for brevity)

Subtema de um subtema

Ao criar um subtema de um subtema, você deve especificar o subtema como o tema base.

• Fluffiness: o primeiro subtema de Classy

name: Fluffiness
type: theme
description: This is a fluffy sub theme of Classy
core: 8.x
# Defines the base theme
base theme: classy

• Shaved: um subtema de Fluffiness (um subtema de um subtema de Classy)

name: Shaved
type: theme
description: This is a reduced fluff sub theme of Fluffiness
core: 8.x
# Defines the base theme
base theme: fluffiness

Observe que o parâmetro base theme: é o nome da máquina do tema base, enquanto o parâmetro name: é o nome descritivo.

Herança de regiões de tema

As regiões de tema não são herdadas do tema base especificado. Se o parâmetro region: for deixado vazio no arquivo info.yml de seu subtema ou não contiver todas as regiões do tema base, então as regiões padrão no Drupal podem ser usadas como fallback para colocar blocos em seu subtema. Recomendamos fortemente copiar todas as regiões definidas em seu tema base para o arquivo info.yml de seu subtema.

# Because regions are not inherited, any region including standard
# Drupal regions as well as base theme regions must be defined in
# the sub-theme. This example demonstrates a sub-theme that leverages
# a subset of the standard Drupal regions (1), plus some custom
# regions defined in the base theme (2), and finally three
# "colophon"-related regions defined in this sub-theme.
regions:
  # 1. Standard Drupal regions (also defined and used by base theme).
  # 2. Regions copied from base theme.
  # 3. Additional custom sub-theme regions.
  header:             'Header'                    # 1
  primary_menu:       'Main menu'                 # 1
  secondary_menu:     'Secondary menu'            # 1
  highlighted:        'Highlighted'               # 1
  help:               'Help'                      # 1
  section_nav:        'Section Nav'               # 2
  breadcrumb:         'Breadcrumb'                # 1
  page_title:         'Page Title'                # 2
  local_tasks:        'Local Tasks'               # 2
  content:            'Content (Constrained)'     # 1
  content_fullwidth:  'Content (Edge-to-edge)'    # 2
  colophon_first:     'Colophon First Col'        # 3
  colophon_second:    'Colophon Second Col'       # 3
  colophon_third:     'Colophon Third Col'        # 3
  footer:             'Footer'                    # 1

Herança de posicionamento de blocos

No Drupal 8, os temas podem vir com uma pasta config/install/, onde as configurações de blocos pré-configuradas, incluindo posicionamento em regiões de tema, serão importadas quando o tema for habilitado. Drupal pode herdar essas configurações de bloco e posicionamento de região do tema base, mas se as regiões de tema definidas no arquivo info.yml de seu subtema não corresponderem àquelas disponíveis no tema base, pode haver posicionamento imprevisível em regiões aleatórias.

Herança de templates de blocos

Se o tema que está sendo estendido tem templates de bloco personalizados, eles não serão imediatamente herdados, porque o subtema cria cópias de todos os blocos no tema pai e os renomeia com o nome do subtema como prefixo. Os templates de bloco Twig são derivados do nome do bloco, portanto isso quebra a conexão entre esses templates e seu bloco. Corrigir esse problema atualmente requer um hook no subtema. Seguindo os exemplos acima, criaremos um arquivo chamado shaved.theme no diretório do subtema. Insira este hook nesse arquivo:

/**
 * Implements hook_theme_suggestions_HOOK_alter for blocks.
 */
function shaved_theme_suggestions_block_alter(&$suggestions, $variables) {

  // Load theme suggestions for blocks from parent theme.
  foreach ($suggestions as &$suggestion) {
    $suggestion = str_replace('shaved_', 'fluffiness_', $suggestion);
  }
}

Para seus próprios subtemas, substitua «shaved» pelo nome de seu subtema e «fluffiness» pelo nome de seu tema base.

Diferenças do Drupal 7

A diferença mais notável do Drupal 7 é que os arquivos .info se tornaram arquivos .info.yml, que usam sintaxe YAML.