Como criar um tema personalizado do Drupal 9 em 9 etapas simples

O Drupal 9 oferece aos desenvolvedores e proprietários de sites a flexibilidade de criar componentes personalizados que podem ser colocados juntos para criar experiências digitais atraentes. Temas são blocos de design do Drupal que representam a aparência visual de um site. O Drupal 9 vem com opções de temas centrais e temas de terceiros, sendo o mais popular o tema Bootstrap. No entanto, se nenhum dos temas do Drupal 9 servir para você, provavelmente você deve olhar para o desenvolvimento de temas customizados. Com os temas personalizados do Drupal 9, você pode ajustar seu design aos requisitos exatos.

O Drupal 9 fornece Bartik como o tema de front-end para o Drupal, mas se você precisa de um tema personalizado do Drupal 9, pode criar seu próprio desenvolvimento de tema do Drupal 9, melhorando assim suas habilidades com o tema do Drupal. A maneira mais fácil de realmente entender o desenvolvimento do tema Drupal 9 é praticar e criar um desde o início.

O Drupal 8 agora atingiu o EOL. Agora é a hora de migrar para o Drupal 9. No entanto, se você ainda está tentando criar um tema personalizado no Drupal 8, essas etapas funcionarão para uma configuração do Drupal 8 também.

Introdução ao desenvolvimento de temas personalizados do Drupal 9

Vamos começar criando um tema Drupal 9 para nosso site Drupal.
PASSO 1: Primeiro, precisamos criar um tema personalizado na pasta 'web / themes / custom' . Vamos nomear a pasta como custom_theme .

PASSO 2: Em seguida, precisaremos criar um arquivo info.yml . Precisamos especificar as chaves básicas para isso. Vamos especificá-lo aqui -

 CÓDIGO:
nome : Tema personalizado
tipo : tema
descrição : 'Tema personalizado para meu site'.
pacote : Outro
core_version_requirement : ^ 8 || ^ 9

PASSO 3 : Agora, vamos criar um arquivo libraries.yml para especificar todas as bibliotecas que precisamos (CSS E JS) para nosso tema Drupal 9 customizado. Também criaremos os diretórios CSS e JS e seus arquivos para vinculá-los aqui. Vamos nomear a biblioteca como de estilo global .

 CÓDIGO:
estilo global :
versão : 1.x
js :
js / script.js : {}
css :
tema :
css / style.css : {}

PASSO 4: Depois de criar o arquivo libraries.yml , precisamos vinculá-lo ao nosso tema. Para isso, vamos adicioná-lo ao arquivo info.yml que então o aplicará a todo o tema.

 CÓDIGO:
bibliotecas :
- custom_theme / global-styling

Portanto, a chave será as bibliotecas e o caminho será o nome do tema - ' custom_theme ' / nome da biblioteca - 'estilo global' .

PASSO 5: Em seguida, precisamos herdar o 'Tema Base'. Em nosso caso, herdaremos o tema ' elegante ', que é um tema central do Drupal. Portanto, a chave será o tema base em info.ym l.

 CÓDIGO:
tema básico : elegante

PASSO 6: Agora, vamos definir as 'regiões' para o nosso tema. Em info.yml , temos que defini-lo sob a chave 'regiões'.

 CÓDIGO:
regiões :
branding : branding
navegação : navegação principal
pesquisa : Pesquisa
destaque : destaque
conteúdo : Conteúdo
right_sidebar : barra lateral direita
footer_first : rodapé primeiro
footer_second : rodapé em segundo
footer_third : rodapé terceiro
footer_bottom : rodapé inferior

Na chave 'regiões', você pode definir suas regiões para o tema personalizado do Drupal. Aqui,
branding: é o id da região, que deve estar em letras minúsculas.
Identidade visual: é o nome da região, que pode estar em letras maiúsculas.

PASSO 7: Depois de definir nossas regiões para nosso tema Drupal personalizado, precisamos substituir page.html.twig para pegar nossas 'regiões' em vez das do tema elegante. Criaremos templates / diretório de sistema sob o qual criaremos o page.html.twig .

 CÓDIGO:
< header aria-label = "Site header" class = "header" id = "header" role = "banner" >
{{page.branding}}
{{page.navigation}}
{{page.search}}
</ header >
< section class = "destaque" id = "destaque" role = "complementar" >
{{page.featured}}
</ seção >
< section class = "main" id = "main" >
< main aria-label = "Conteúdo principal do site" class = "content" id = "content" role = "main" >
{{ Conteúdo da página }}
</ main >
< aparte class = "right - sidebar" id = "sidebar" role = "complementar" >
{{page.right_sidebar}}
</ aparte >
</ seção >
< footer aria-label = "Site footer" class = "footer" id = "footer" role = "contentinfo" >
< div class = "footer - top" >
{{page.footer_first}}
{{page.footer_second}}
{{page.footer_third}}
</ div >
< div class = "footer - bottom" >
{{page.footer_bottom}}
</ div >
</ rodapé >

Em page.html.twig, criaremos a estrutura HTML para nossas regiões. Como você pode ver em {{page.branding}} - Aqui,

página - é a chave para renderizar 'regiões' na página

branding- É a região que definimos no arquivo info.yml .

Agora, criamos nossas regiões e as renderizamos na página.

Etapa 8: Vá para Aparência em seu site Drupal. Você pode ver seu tema Drupal personalizado presente na seção de temas desinstalados .

Você precisa clicar na opção ' Instalar e definir como padrão ' para instalar o seu tema Drupal no site.

Depois de instalado, vá para Structure -> Block Layout . Seu tema personalizado aparecerá sob o Layout do bloco.

Você verá um link para ' Demonstrar regiões de bloco (tema personalizado) '. Clique no link. Você pode ver todas as regiões que você declarou no info.yml e adicionou em page.html.twig

Etapa 9: Agora você está quase terminando os temas do Drupal 9! Em seguida, você precisa aplicar estilos no CSS para cada região de acordo com seu design. Usaremos CSS neste caso; Você pode até usar o SCSS se desejar. Basta inspecionar a região de marca - você deve ver a classe da região e adicionar o CSS a essa classe.

 . header {
 display : flex ;
 justify-content : espaço entre ;
 preenchimento : 10 px ;
}


. cabeçalho . região {
 preenchimento : 5 px ;
}


. cabeçalho . region-branding {
 flex : 0 1 20 %;
}
		



. cabeçalho . region-navigation {
 flex : 0 1 50 %;
}


. cabeçalho . region-search {
 flex : 0 1 30 %;
}


. região . block-region {
 preenchimento : 15 px ;
}


. destaque {
 preenchimento : 40 px 20 px ;
 cor de fundo : vermelho - índio ;
}


. main {
 preenchimento : 50 px 0 ;
 display : flex ;
 justify-content : espaço entre ;
}


. principal . content {
 flex : 0 1 65 %;
}


. principal . direita - barra lateral {
 flex : 0 1 30 %;
}


. rodapé - topo {
 display : flex ;
 justify-content : espaço entre ;
 preenchimento : 10 px ;
}


. rodapé - topo . região {
 preenchimento : 5 px ;
}


. região-rodapé-primeiro ,. região-rodapé-segundo ,. região-rodapé-terceiro {
 flex : 0 1 30 %;
}

O resultado:

Seu tema personalizado Drupal 9 está pronto!

Se você precisar escrever quaisquer ganchos ou criar sugestões para seu arquivo twig, poderá adicionar o arquivo .theme em seu tema Drupal personalizado (mostrado abaixo).