Drupal 8'de özel bir Düzen oluşturucu nasıl oluşturulur

Drupal 8, içerik yazarları için işleri çok daha kolay hale getiriyor. Layout Builder modülünün çekirdek Drupal 8'e eklenmesinin en önemli nedenlerinden biri.

Önceki makalemde, Drupal 8'in Layout oluşturucusunu kurmaya ve kullanmaya nasıl başlayabileceğinizi yazmıştım. Burada, benzersiz gereksinimler için bir düzen oluşturucuyu özelleştirme konusundaki bilgilerimi paylaşmak istiyorum.

drupal web siteniz birden çok bloklu birden çok bölüme ihtiyaç duyuyorsa, Drupal tarafından sağlanan varsayılan bölümleri kullanamazsınız. Bunun için kendi özel düzeninizi oluşturabilirsiniz.

Layout Builder'a Başlarken:

İlk olarak özel layout oluşturucumuz için özel bir layout oluşturucu modülü oluşturacağız. Klasörü custom_layout olarak adlandıracağız. Ardından bir info.yml dosyası oluşturacağız. Bunun için temel anahtarları belirtmeliyiz. drupal 8 içindeki özel düzen oluşturucu, düzen oluşturucu modülüne bağımlı olacaktır. Onu burada belirtelim.

 Kod:
isim: 'Özel Düzen'
tip: modül
açıklama: 'Bina düzeni için bir yol sağlar'
çekirdek: 8.x
paket: 'Özel'
bağımlılıklar:
 - layout_builder:layout_builder

Ardından, özel yerleşimimiz için bölgeleri belirtmek üzere layouts.yml dosyası oluşturacağız.

• custom_layout: özel düzen oluşturucu düzenimiz için anahtar.
• etiket: Özel düzen oluşturucu düzenimiz için etiket.
• kategori: Özel düzen oluşturucu düzenimiz için kategori.
• default_region: Varsayılan bölge, tüm yerleşim türlerinde varsayılan olan bölgelerdir.
• icon_map: Düzenimizi seçerken karşımıza çıkacak olan simge.

Örneğin:

Yukarıdaki simge haritasını oluşturmak için aşağıdaki adımları izlememiz gerekiyor.

1. İlk satır “Sol Başlık” ve “Sağ Başlık”
Belirttik - [ header_left, header_left, header_right ] - header_left
2 kez tanımlanır, böylece ekranın toplam genişliğinin 2 bölümünü alır, ardından header_right bölümün geri kalanını alır, böylece oran “%75/%25” olur.
2. İkinci satır “İçerik” ve “Kenar Çubuğu”
Belirttik - [ içerik, içerik, kenar çubuğu ] yukarıdaki mantığın aynısını burada da uyguladık.
3. Üçüncü satır “Sol Alt Bilgi” ve “Sağ Alt Bilgi”
Belirttik - [ footer_left, footer_right] - sadece 2 bölge olduğundan her biri %50 alacaktır.

• bölgeler: Düzenimiz için ihtiyaç duyduğumuz bölgeler. header_left, header_right, sidebar, content, footer_left, footer_right var.

Kod:

 custom_layout:
 etiket: 'Özel Düzen'
 kategori: 'Özel Düzenler'
 default_region: içerik
 icon_map:
   - [header_left, header_left, header_right]
   - [içerik, içerik, kenar çubuğu]
   - [içerik, içerik, kenar çubuğu]
   - [içerik, içerik, kenar çubuğu]
   - [footer_left, footer_right]

 bölgeler:
   header_left:
     etiket: Sol Başlık
   header_right:
     etiket: Başlık Sağ
   kenar çubuğu:
     etiket: Kenar çubuğu
   içerik:
     etiket: İçerik
   footer_left:
     etiket: Altbilgi Sol
   footer_right:
     etiket: Alt Bilgi Sağ

Ardından layoutumuz için bir html yapısı oluşturalım. Modülümüz içerisinde “layouts” adında bir klasör oluşturacağız. Klasörde “custom_layout” adında başka bir klasör oluşturacağız.

Ve bu klasör içerisinde “custom-layout.html.twig” adında bir twig dosyası oluşturacağız.

twig dosyasını layouts.yml'de belirtmeliyiz

• path: Html yapınızın hangi klasöre yazılacağını belirtir
• şablon: Yol altında bu yerleşim için hangi dal şablonunun kullanılacağını belirtir.

 Kod:

custom_layout:
 etiket: 'Özel Düzen'
 yol: layouts/custom_layout
 kategori: 'Özel Düzenler'
 şablon: özel düzen
 default_region: içerik
 icon_map:
   - [header_left, header_left, header_right]
   - [içerik, içerik, kenar çubuğu]
   - [içerik, içerik, kenar çubuğu]
   - [içerik, içerik, kenar çubuğu]
   - [footer_left, footer_right]

 bölgeler:
   header_left:
     etiket: Sol Başlık
   header_right:
     etiket: Başlık Sağ
   kenar çubuğu:
     etiket: Kenar çubuğu
   içerik:
     etiket: İçerik
   footer_left:
     etiket: Altbilgi Sol
   footer_right:
     etiket: Alt Bilgi Sağ

Ardından “custom-layout.html.twig” dosyasına bölgelerimiz için html yapısını yazacağız.
Sınıfları "layout" ve "layout--custom-layout" olarak ayarlayacağız ve tüm içeriği bunun içine saracağız.
layouts.yml içinde tanımlı bölgeleri belirleyeceğiz, “{{ content.header_left }}” gibi bölgelere erişebiliriz.

Kod:

{% set sınıfları = [
'Yerleşim',
'düzen--özel-düzen',
] %}
{% eğer içerik %}
<div{{ öznitelikler.addClass(sınıflar) }}>
{% if content.header_left %}
<div {{ zone_attributes.header_left.addClass('layout__region', 'layout__region--header_left') }}>
{{ content.header_left }}
</div>
{% endif %}
{% if content.header_right %}
<div {{ zone_attributes.header_right.addClass('layout__region', 'layout__region--header_right') }}>
{{ content.header_right }}
</div>
{% endif %}
{% if content.content %}
<div {{ zone_attributes.content.addClass('layout__region', 'layout__region--content') }}>
{{ içerik.içerik }}
</div>
{% endif %}
{% if content.sidebar %}
<div {{ zone_attributes.sidebar.addClass('layout__region', 'layout__region--sidebar') }}>
{{içerik.yan çubuğu }}
</div>
{% endif %}
{% if content.footer_left %}
<div {{ bölge_attributes.footer_left.addClass('layout__region', 'layout__region--footer_left') }}>
{{ content.footer_left }}
</div>
{% endif %}
{% if content.footer_right %}
<div {{ zone_attributes.footer_right.addClass('layout__region', 'layout__region--footer_right') }}>
{{ content.footer_right }}
</div>
{% endif %}
</div>
{% endif %}

Html yapısı yazıldıktan sonra her bölge için css yazmamız gerekecek. Şimdi özel modülümüzde library.yml oluşturacağız.

Kod:

 custom_layout:
sürüm: VERSİYON
css:
   tema:
     css/custom_layout.css: {}

Bu kütüphaneyi layouts.yml içerisinde tanımlayacağız.

Kod:

 custom_layout:
 etiket: 'Özel Düzen'
 yol: layouts/custom_layout
 kategori: 'Özel Düzenler'
 şablon: özel düzen
 kitaplık: custom_layout/custom_layout
 default_region: içerik
 icon_map:
   - [header_left, header_left, header_right]
   - [içerik, içerik, kenar çubuğu]
   - [içerik, içerik, kenar çubuğu]
   - [içerik, içerik, kenar çubuğu]
   - [footer_left, footer_right]

 bölgeler:
   header_left:
     etiket: Sol Başlık
   header_right:
     etiket: Başlık Sağ
   kenar çubuğu:
     etiket: Kenar çubuğu
   içerik:
     etiket: İçerik
   footer_left:
     etiket: Altbilgi Sol
   footer_right:
     etiket: Alt Bilgi Sağ

Şimdi bölge bloğumuzu şekillendirmeye başlayalım. Her bölge için yapıyı aşağıdaki gibi belirleyeceğiz-

Kod:

 .layout--özel düzen {
 ekran: -webkit-kutusu;
 ekran: -ms-flexbox;
 ekran: esnek;
 -ms-flex-sarma: sarma;
 esnek sarma: sarma;
}

@medya ekranı ve (min-width: 40em) {
 .layout--özel-düzen .layout__region--header_left {
   -webkit-box-flex: 0;
   -ms-flex: 0 1 %70;
   esnek: 0 1 %70;
 }

 .layout--özel-düzen .layout__region--header_right {
   -webkit-box-flex: 0;
   -ms-flex: 0 1 %30;
   esnek: 0 1 %30;
 }

 .layout--özel-düzen .layout__region--içerik {
   -webkit-box-flex: 0;
   -ms-flex: 0 1 %70;
   esnek: 0 1 %70;
 }

 .layout--özel-düzen .layout__region--kenar çubuğu {
   -webkit-box-flex: 0;
   -ms-flex: 0 1 %30;
   esnek: 0 1 %30;
 }

 .layout--özel-düzen .layout__region--footer_left {
   -webkit-box-flex: 0;
   -ms-flex: 0 1 %50;
   esnek: 0 1 %50;
 }

 .layout--özel-düzen .layout__region--footer_right {
   -webkit-box-flex: 0;
   -ms-flex: 0 1 %50;
   esnek: 0 1 %50;
 }
}

Ardından, özel modülümüzü etkinleştirelim

Yapı -> İçerik türleri'ne gidelim ve herhangi bir içerik türü için “ Ekranı yönet ” seçeneğine tıklayalım . Şimdilik ' makale ' içerik türünü kullanacağız.

Özel düzenimizi seçtikten sonra-