Como criar um construtor de layout customizado no Drupal 8

Publicados: 2019-10-15

O Drupal 8 está tornando as coisas muito mais fáceis para os autores de conteúdo. Uma das razões mais importantes é a adição do módulo Layout Builder no núcleo do Drupal 8. Com uma interface fácil de arrastar e soltar, visualização e recursos de personalização, o construtor de layout está se tornando uma ferramenta favorita de criação de páginas e design.

Em meu artigo anterior, eu escrevi sobre como você pode começar a instalar e usar o construtor de layout do Drupal 8. Aqui, desejo compartilhar meu conhecimento sobre a personalização de um construtor de layout para requisitos exclusivos.

Se o seu site drupal precisa de várias seções com vários blocos, você não pode usar as seções padrão fornecidas pelo Drupal. Para isso, você pode criar seu próprio layout personalizado.

Introdução ao Layout Builder:

Criaremos primeiro um módulo construtor de layout customizado para nosso construtor de layout customizado. Nomearemos a pasta como custom_layout. A seguir, criaremos um arquivo info.yml. Devemos especificar as chaves básicas para isso. O construtor de layout customizado no drupal 8 terá uma dependência do módulo construtor de layout. Vamos especificá-lo aqui.

layout personalizado
 Código:
nome: 'Layout personalizado'
tipo: módulo
descrição: 'Oferece uma maneira de construir o layout'
núcleo: 8.x
pacote: 'Custom'
dependências:
 - layout_builder: layout_builder

Em seguida, criaremos o arquivo layouts.yml para especificar regiões para nosso layout personalizado.

  • custom_layout: chave para nosso layout de construtor de layout personalizado.
  • rótulo: rótulo para nosso layout de construtor de layout personalizado.
  • categoria: categoria para nosso layout de construtor de layout personalizado.
  • default_region: a região padrão são as regiões que são padrão em todos os tipos de layout.
  • icon_map: Ícone que será mostrado enquanto escolhemos nosso layout.

Por exemplo:

layout personalizado

Para criar o mapa de ícones acima, precisamos seguir as etapas abaixo.

1. A primeira linha é "Cabeçalho à esquerda" e "Cabeçalho à direita"
Nós especificamos - [ header_left, header_left, header_right ] - header_left é
definido 2 vezes para que ocupe 2 partes da largura total da tela, então header_right ocupará o resto da parte, então a proporção será “75% / 25%”.
2. A segunda linha é “Conteúdo” e “Barra lateral”
Especificamos - [ conteúdo, conteúdo, barra lateral ] mesma lógica acima aplicada aqui.
3. A terceira linha é "Rodapé à esquerda" e "Rodapé à direita"
Especificamos - [ footer_left, footer_right] - uma vez que existem apenas 2 regiões, cada uma levará 50%.

  • regiões: regiões que precisamos para nosso layout. Temos header_left, header_right, sidebar, content, footer_left, footer_right.
construtor de layout personalizado

Código:

 custom_layout:
 rótulo: 'Layout personalizado'
 categoria: 'Layouts personalizados'
 default_region: content
 icon_map:
   - [header_left, header_left, header_right]
   - [conteúdo, conteúdo, barra lateral]
   - [conteúdo, conteúdo, barra lateral]
   - [conteúdo, conteúdo, barra lateral]
   - [footer_left, footer_right]

 regiões:
   header_left:
     rótulo: Cabeçalho à esquerda
   header_right:
     rótulo: Cabeçalho à direita
   Barra Lateral:
     etiqueta: barra lateral
   contente:
     etiqueta: Conteúdo
   footer_left:
     etiqueta: Rodapé à Esquerda
   footer_right:
     rótulo: Rodapé à direita

A seguir, vamos criar uma estrutura html para nosso layout. Criaremos uma pasta chamada “layouts” em nosso módulo. Na pasta, iremos criar outra pasta chamada “custom_layout”

E dentro dessa pasta, vamos criar um arquivo twig chamado “custom-layout.html.twig”

construtor de layout personalizado


Temos que especificar o arquivo twig em layouts.yml

  • path: especifica em qual pasta sua estrutura html será gravada
  • template: especifica qual template de galho usar para este layout sob o caminho.

layout personalizado
 Código:

custom_layout:
 rótulo: 'Layout personalizado'
 caminho: layouts / custom_layout
 categoria: 'Layouts personalizados'
 template: custom-layout
 default_region: content
 icon_map:
   - [header_left, header_left, header_right]
   - [conteúdo, conteúdo, barra lateral]
   - [conteúdo, conteúdo, barra lateral]
   - [conteúdo, conteúdo, barra lateral]
   - [footer_left, footer_right]

 regiões:
   header_left:
     rótulo: Cabeçalho à esquerda
   header_right:
     rótulo: Cabeçalho à direita
   Barra Lateral:
     etiqueta: barra lateral
   contente:
     etiqueta: Conteúdo
   footer_left:
     etiqueta: Rodapé à Esquerda
   footer_right:
     rótulo: Rodapé à direita

A seguir, escreveremos a estrutura html para nossas regiões no arquivo “custom-layout.html.twig”.
Vamos definir as classes como “layout” e “layout - custom-layout” e embrulharemos todo o conteúdo dentro delas.
Especificaremos regiões que foram definidas em layouts.yml, podemos acessar essas regiões como “{{content.header_left}}”

construtor de layout

Código:

{% definir classes = [
'layout',
'layout - custom-layout',
]%}
{% if content%}
<div {{attribute.addClass (classes)}}>
{% if content.header_left%}
<div {{region_attributes.header_left.addClass ('layout__region', 'layout__region - header_left')}}>
{{content.header_left}}
</div>
{% fim se %}
{% if content.header_right%}
<div {{region_attributes.header_right.addClass ('layout__region', 'layout__region - header_right')}}>
{{content.header_right}}
</div>
{% fim se %}
{% if content.content%}
<div {{region_attributes.content.addClass ('layout__region', 'layout__region - content')}}>
{{content.content}}
</div>
{% fim se %}
{% if content.sidebar%}
<div {{region_attributes.sidebar.addClass ('layout__region', 'layout__region - sidebar')}}>
{{content.sidebar}}
</div>
{% fim se %}
{% if content.footer_left%}
<div {{region_attributes.footer_left.addClass ('layout__region', 'layout__region - footer_left')}}>
{{content.footer_left}}
</div>
{% fim se %}
{% if content.footer_right%}
<div {{region_attributes.footer_right.addClass ('layout__region', 'layout__region - footer_right')}}>
{{content.footer_right}}
</div>
{% fim se %}
</div>
{% fim se %}

Depois que a estrutura html for escrita, teremos que escrever css para cada região. Agora vamos criar libraries.yml em nosso módulo customizado.

construtor de layout

Código:

 custom_layout:
versão: VERSION
css:
   tema:
     css / custom_layout.css: {}

Vamos definir essa biblioteca em layouts.yml

construtor de layout

Código:

 custom_layout:
 rótulo: 'Layout personalizado'
 caminho: layouts / custom_layout
 categoria: 'Layouts personalizados'
 template: custom-layout
 biblioteca: custom_layout / custom_layout
 default_region: content
 icon_map:
   - [header_left, header_left, header_right]
   - [conteúdo, conteúdo, barra lateral]
   - [conteúdo, conteúdo, barra lateral]
   - [conteúdo, conteúdo, barra lateral]
   - [footer_left, footer_right]

 regiões:
   header_left:
     rótulo: Cabeçalho à esquerda
   header_right:
     rótulo: Cabeçalho à direita
   Barra Lateral:
     etiqueta: barra lateral
   contente:
     etiqueta: Conteúdo
   footer_left:
     etiqueta: Rodapé à Esquerda
   footer_right:
     rótulo: Rodapé à direita

Agora vamos começar estilizando nosso bloco de regiões. Iremos especificar a estrutura para cada região conforme abaixo -

construtor de layout

Código:

 .layout - custom-layout {
 exibir: -webkit-box;
 display: -ms-flexbox;
 display: flex;
 -ms-flex-wrap: embrulhar;
 flex-wrap: wrap;
}

@media screen e (min-width: 40em) {
 .layout - custom-layout .layout__region - header_left {
   -webkit-box-flex: 0;
   -ms-flex: 0 1 70%;
   flex: 0 1 70%;
 }

 .layout - layout personalizado .layout__region - header_right {
   -webkit-box-flex: 0;
   -ms-flex: 0 1 30%;
   flex: 0 1 30%;
 }

 .layout - custom-layout .layout__region - content {
   -webkit-box-flex: 0;
   -ms-flex: 0 1 70%;
   flex: 0 1 70%;
 }

 .layout - custom-layout .layout__region - sidebar {
   -webkit-box-flex: 0;
   -ms-flex: 0 1 30%;
   flex: 0 1 30%;
 }

 .layout - custom-layout .layout__region - footer_left {
   -webkit-box-flex: 0;
   -ms-flex: 0 1 50%;
   flex: 0 1 50%;
 }

 .layout - layout personalizado .layout__region - footer_right {
   -webkit-box-flex: 0;
   -ms-flex: 0 1 50%;
   flex: 0 1 50%;
 }
}

A seguir, vamos habilitar nosso módulo personalizado

layout-builder-module

Vamos para Estrutura -> Tipos de conteúdo e clique em “ Gerenciar exibição ” para qualquer tipo de conteúdo. Por enquanto, usaremos o tipo de conteúdo ' artigo '.

edit-layout-builder

Depois de escolher nosso layout personalizado,

layout personalizado