Cara membuat pembuat Tata Letak khusus di Drupal 8

Diterbitkan: 2019-10-15

Drupal 8 membuat segalanya lebih mudah bagi penulis konten. Salah satu alasan terpenting adalah penambahan modul Layout Builder di inti Drupal 8. Dengan antarmuka seret dan lepas yang mudah, kemampuan pratinjau dan penyesuaian, pembuat tata letak segera menjadi alat pembuatan dan perancangan halaman favorit.

Dalam artikel saya sebelumnya, saya menulis tentang bagaimana Anda bisa mulai menginstal dan menggunakan Layout builder Drupal 8. Di sini, saya ingin berbagi pengetahuan saya tentang menyesuaikan pembuat tata letak untuk persyaratan unik.

Jika situs web drupal Anda membutuhkan banyak bagian dengan banyak blok, maka Anda tidak dapat menggunakan bagian default yang disediakan oleh Drupal. Untuk ini, Anda dapat membuat tata letak khusus Anda sendiri.

Memulai dengan Layout Builder :

Pertama-tama kami akan membuat modul pembuat tata letak khusus untuk pembuat tata letak khusus kami. Kami akan menamai folder tersebut sebagai custom_layout. Selanjutnya, kita akan membuat file info.yml. Kita harus menentukan kunci dasar untuk itu. Pembuat tata letak khusus di drupal 8 akan memiliki ketergantungan pada modul pembuat tata letak. Mari kita tentukan di sini.

tata letak khusus
 Kode:
nama: 'Tata Letak Kustom'
jenis: modul
description: 'Menyediakan cara untuk membangun tata letak'
inti: 8.x
paket: 'Kustom'
dependensi:
 - layout_builder: layout_builder

Selanjutnya kita akan membuat file layouts.yml untuk menentukan wilayah untuk tata letak kustom kita.

  • custom_layout: kunci untuk tata letak pembuat tata letak khusus kami.
  • label: Label untuk tata letak pembuat tata letak khusus kami.
  • kategori: Kategori untuk tata letak pembuat tata letak khusus kami.
  • default_region: Wilayah default adalah wilayah yang menjadi default di semua jenis tata letak.
  • icon_map: Ikon yang akan ditampilkan saat kita memilih tata letak.

Misalnya:

tata letak khusus

Untuk membuat peta ikon di atas kita perlu mengikuti langkah-langkah di bawah ini.

1. Baris pertama adalah “Header Kiri” dan “Header Kanan”
Kami telah menentukan - [ header_left, header_left, header_right ] - header_left adalah
didefinisikan 2 kali sehingga akan mengambil 2 bagian dari total lebar layar kemudian header_right akan mengambil sisa bagian sehingga rasio akan menjadi "75%/25%".
2. Baris kedua adalah “Content” dan “Sidebar”
Kami telah menentukan - [ konten, konten, bilah sisi ] logika yang sama di atas diterapkan di sini.
3. Baris ketiga adalah “Footer Kiri” dan “Footer Kanan”
Kami telah menentukan - [ footer_left, footer_right] - karena hanya ada 2 wilayah, masing-masing akan membutuhkan 50%.

  • wilayah: Wilayah yang kita butuhkan untuk tata letak kita. Kami memiliki header_left, header_right, sidebar, konten, footer_left, footer_right.
pembuat tata letak khusus

Kode:

 tata letak_kustom:
 label: 'Tata Letak Kustom'
 kategori: 'Tata Letak Kustom'
 default_region: konten
 ikon_peta:
   - [tajuk_kiri, tajuk_kiri, tajuk_kanan]
   - [konten, konten, bilah sisi]
   - [konten, konten, bilah sisi]
   - [konten, konten, bilah sisi]
   - [kaki_kiri, kaki_kanan]

 wilayah:
   header_kiri:
     label: Tajuk Kiri
   header_kanan:
     label: Tajuk Kanan
   bilah sisi:
     label: Bilah Samping
   isi:
     label: Konten
   footer_kiri:
     label: Footer Kiri
   footer_right:
     label: Footer Kanan

Selanjutnya, mari kita buat struktur html untuk tata letak kita. Kami akan membuat folder bernama "tata letak" di dalam modul kami. Di dalam folder tersebut kita akan membuat folder lain dengan nama “custom_layout”

Dan di dalam folder itu, kita akan membuat file twig bernama “custom-layout.html.twig”

pembuat tata letak khusus


Kita harus menentukan file twig di layouts.yml

  • path: Ini menentukan di folder mana struktur html Anda akan ditulis
  • templat: Ini menentukan templat ranting mana yang akan digunakan untuk tata letak ini di bawah jalur.

tata letak khusus
 Kode:

tata letak_kustom:
 label: 'Tata Letak Kustom'
 jalur: layout/custom_layout
 kategori: 'Tata Letak Kustom'
 templat: tata letak khusus
 default_region: konten
 ikon_peta:
   - [tajuk_kiri, tajuk_kiri, tajuk_kanan]
   - [konten, konten, bilah sisi]
   - [konten, konten, bilah sisi]
   - [konten, konten, bilah sisi]
   - [kaki_kiri, kaki_kanan]

 wilayah:
   header_kiri:
     label: Tajuk Kiri
   header_kanan:
     label: Tajuk Kanan
   bilah sisi:
     label: Bilah Samping
   isi:
     label: Konten
   footer_kiri:
     label: Footer Kiri
   footer_right:
     label: Footer Kanan

Selanjutnya kita akan menulis struktur html untuk wilayah kita di file “custom-layout.html.twig”.
Kami akan mengatur kelas memiliki "layout" dan "layout--custom-layout" dan kami akan membungkus seluruh konten di dalamnya.
Kami akan menentukan wilayah yang telah ditentukan di layouts.yml , kami dapat mengakses wilayah tersebut seperti "{{ content.header_left }}"

pembuat tata letak

Kode:

{% set kelas = [
'tata letak',
'tata letak--tata letak khusus',
] %}
{% jika konten %}
<div{{ atribut.addClass(kelas) }}>
{% if content.header_left %}
<div {{ region_attributes.header_left.addClass('layout__region', 'layout__region--header_left') }}>
{{ content.header_left }}
</div>
{% berakhir jika %}
{% jika content.header_right %}
<div {{ region_attributes.header_right.addClass('layout__region', 'layout__region--header_right') }}>
{{ content.header_right }}
</div>
{% berakhir jika %}
{% jika konten.konten %}
<div {{ region_attributes.content.addClass('layout__region', 'layout__region--content') }}>
{{ konten.konten }}
</div>
{% berakhir jika %}
{% jika content.sidebar %}
<div {{ region_attributes.sidebar.addClass('layout__region', 'layout__region--sidebar') }}>
{{ konten.sidebar }}
</div>
{% berakhir jika %}
{% if content.footer_left %}
<div {{ region_attributes.footer_left.addClass('layout__region', 'layout__region--footer_left') }}>
{{ content.footer_left }}
</div>
{% berakhir jika %}
{% jika content.footer_right %}
<div {{ region_attributes.footer_right.addClass('layout__region', 'layout__region--footer_right') }}>
{{ content.footer_right }}
</div>
{% berakhir jika %}
</div>
{% berakhir jika %}

Setelah struktur html ditulis, kita harus menulis css untuk setiap wilayah. Sekarang kita akan membuat library.yml di modul kustom kita.

pembuat tata letak

Kode:

 tata letak_kustom:
versi: VERSI
css:
   tema:
     css/custom_layout.css: {}

Kami akan mendefinisikan perpustakaan itu di layouts.yml

pembuat tata letak

Kode:

 tata letak_kustom:
 label: 'Tata Letak Kustom'
 jalur: layout/custom_layout
 kategori: 'Tata Letak Kustom'
 templat: tata letak khusus
 perpustakaan: custom_layout/custom_layout
 default_region: konten
 ikon_peta:
   - [tajuk_kiri, tajuk_kiri, tajuk_kanan]
   - [konten, konten, bilah sisi]
   - [konten, konten, bilah sisi]
   - [konten, konten, bilah sisi]
   - [kaki_kiri, kaki_kanan]

 wilayah:
   header_kiri:
     label: Tajuk Kiri
   header_kanan:
     label: Tajuk Kanan
   bilah sisi:
     label: Bilah Samping
   isi:
     label: Konten
   footer_kiri:
     label: Footer Kiri
   footer_right:
     label: Footer Kanan

Sekarang mari kita mulai dengan menata blok wilayah kita. Kami akan menentukan struktur untuk setiap wilayah seperti di bawah ini-

pembuat tata letak

Kode:

 .layout--custom-layout {
 tampilan: -webkit-box;
 tampilan: -ms-flexbox;
 tampilan: fleksibel;
 -ms-flex-wrap: bungkus;
 bungkus fleksibel: bungkus;
}

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

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

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

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

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

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

Selanjutnya, mari kita aktifkan modul khusus kita

layout-builder-modul

Mari kita pergi ke Struktur -> Jenis konten dan klik " Kelola tampilan " untuk jenis konten apa pun. Untuk saat ini kita akan menggunakan tipe konten ' artikel '.

edit-layout-builder

Setelah kami memilih tata letak khusus kami-

tata letak khusus