Menguasai Drupal 9 Layout Builder: Panduan Komprehensif untuk Menyesuaikan Desain Situs Web Anda dengan Mudah

Dalam hal pembuatan halaman, pembuat situs, penulis konten, dan editor konten selalu mencari pengalaman yang lancar dan ramah pengguna. Saat mereka ingin mendesain dan membangun halaman, mereka berharap untuk menggunakan teknologi drag-and-drop dan CKEditor. Pengalaman identik ini disediakan oleh fungsionalitas konstruksi halaman sederhana Drupal Layout Builder di inti Drupal.

Pembuat Tata Letak Drupal yang khas menawarkan alat desain visual yang kuat untuk membiarkan penulis konten mengubah cara konten disajikan. Pembuat Tata Letak, yang ditambahkan ke inti Drupal dalam versi terbarunya, Drupal 9 memungkinkan Anda menambah/menghapus bagian untuk menampilkan konten menggunakan berbagai tata letak dan menyesuaikan halaman Anda sesuai dengan yang Anda butuhkan. Dengan Modul Pembuat Tata Letak Drupal 9, Anda dapat menggabungkan bagian-bagian ini untuk membuat halaman yang benar-benar unik.

Ada dua cara berbeda untuk menggunakan Drupal 9 Layout Builder: Layout Defaults (untuk mendesain layout untuk semua konten dari tipe konten) dan Layout Overrides (untuk mendesain layout untuk item konten tertentu). Anda dapat mempelajari lebih lanjut dan mulai menggunakan modul Drupal 9 Layout Builder dengan bantuan blog ini.

Nantikan artikel kami selanjutnya di seri ini di mana kami mendalami penggunaan layout builder dan modul Ctools untuk menerapkan pola mode tampilan!

Memperkenalkan Pembuat Tata Letak

Anda dapat mengubah tampilan entitas seperti tipe konten, taksonomi, pengguna, dan lainnya dengan menggunakan modul Drupal 9 Layout Builder. Pembuat situs dapat dengan mudah menyeret dan melepaskan blok, bidang, dan elemen lain ke tempatnya menggunakan fitur ini.

Dengan menyediakan pratinjau perubahan yang dibuat saat Anda mendesain tata letak, modul pembuat tata letak di Drupal 9 memfasilitasi proses pembuatan tata letak. Pembangun tata letak di Drupal 9 memungkinkan pratinjau perubahan yang dibuat untuk pengalaman pembuatan tata letak yang mulus daripada mengharuskan pengguna untuk menyimpan setiap modifikasi kecil yang mereka buat pada tata letak dan kemudian mencarinya di ujung depan.

Pembuat tata letak memiliki dua modul:

Penemuan Tata Letak - Memberikan modul atau tema sarana untuk mendaftarkan tata letak.

Pembuat Tata Letak - Memungkinkan pengguna untuk secara langsung menambah dan mengatur blok dan bidang konten pada konten.

Saat mendesain tata letak, Pembuat Tata Letak menggunakan dua gagasan utama:

Bagian - Kolom atau wadah tempat blok dapat ditempatkan. Misalnya, bisa berupa tata letak 2 kolom atau tata letak 3 kolom, dll.

Blok - Elemen konten yang dapat ditempatkan dalam beberapa bagian.

Instalasi dan konfigurasi modul Layout Builder

Buka Perpanjang dan aktifkan modul Layout Builder dan Layout Discovery untuk menginstal dan mengonfigurasi modul pembuat tata letak Drupal 9.

Ubah Jenis Konten dan Taksonomi

Setelah modul dipasang, buka Struktur, Jenis konten, dan pilih "Kelola tampilan" untuk semua jenis konten. Untuk contoh ini, kami akan menggunakan tipe konten "artikel".

Klik menu tarik-turun Opsi tata letak di bagian bawah untuk memilih "Gunakan Pembuat Tata Letak", lalu klik Simpan.

Pemformat bidang diganti dengan opsi "Kelola tata letak" setelah Pembuat Tata Letak diaktifkan dalam mode tampilan. Setiap mode tampilan yang tersedia dapat digunakan dengan Layout Builder.

Anda akan dibawa ke tata letak tipe konten artikel ketika Anda mengklik "Kelola tata letak."

Sisipkan Bagian ke dalam Tata Letak

Hapus bagian default sebelum menambahkan yang lain ke pembuat tata letak. Pilih tombol "tutup" (seperti yang digambarkan pada tangkapan layar di bawah). Juga, tombol untuk menghapus bagian default akan tersedia untuk Anda di sisi kanan layar Anda. Kemudian pilih "Hapus."

Dengan memilih opsi "Tambahkan Bagian", mari tambahkan beberapa bagian ke tata letak kita. Di sisi kanan layar, opsi juga akan ditawarkan kepada Anda sehingga Anda dapat memilih tata letak untuk bagian Anda. Untuk saat ini, mari pilih "Bagian Dua Kolom".

Anda akan diberi opsi untuk memilih lebar "Tata Letak Dua Kolom". Untuk saat ini, mari pilih "67%/33%". Selanjutnya, pilih "Tambahkan bagian".

Setelah ditambahkan, setiap wilayah bagian harus menampilkan tautan "Tambahkan Blok".

Sisipkan Blok ke dalam Wilayah Bagian

Anda dapat menambahkan blok ke area Anda setelah memilihnya untuk tata letak. Cukup klik "Tambahkan Blok" dan opsi "Pilih blok" akan meluncur keluar dari kanan saat Anda ingin menambahkan blok.

Memilih blok

Cukup mengklik blok di kolom kanan akan memilihnya. Dengan menggunakan bidang teks "Filter menurut nama blok", Anda bahkan dapat menemukan blok dengan memfilter pencarian berdasarkan namanya.
Untuk saat ini, kami akan memilih bidang konten "Badan".

Pemformat bidang akan memungkinkan Anda untuk membuat perubahan saat Anda mengeklik blok yang ingin Anda tambahkan. Klik "Tambahkan Blok" setelah mengonfigurasi pemformat.

Di sisi kiri blok, akan ada area konten "Body".

Bidang "Tubuh" telah ditambahkan; sekarang simpan perubahan Anda. Dengan memilih "Simpan Tata Letak" dari menu di bagian atas halaman tata letak Drupal 9, Anda dapat menyimpan semua perubahan yang telah Anda buat pada bagian Anda.

Untuk lebih mempersonalisasi pembuat tata letak kami, mari coba tambahkan beberapa bidang lagi ke desain kami.

Saat Anda mengunjungi halaman dengan tipe konten artikel setelah menyimpan tata letak ini, Anda akan dapat melihat pratinjau tata letak yang baru saja Anda buat.

Penggantian Tata Letak:

Tata letak yang baru saja kita buat akan berfungsi untuk semua artikel. Drupal memiliki sejumlah pengaturan yang harus diaktifkan untuk membuat tata letak khusus untuk artikel tertentu. Untuk melakukannya, pilih "Izinkan setiap item konten disesuaikan tata letaknya" .

Jika Anda mengunjungi artikel setelah mengaktifkan opsi ini, tombol tab Tata Letak akan terlihat.

Dengan antarmuka yang sama, tata letak sekarang dapat diubah. Namun, ini hanya akan mengubah desain konten yang satu ini.

Sekarang mari tambahkan blok ke halaman ini. Buat bagian satu kolom baru dan klik tombol "Tambah Blok". Pertimbangkan kasus ketika kami ingin menampilkan konten yang baru diedit dari pengguna lain di halaman ini, Saring blok "Konten terbaru" saat menambahkan blok baru, lalu sesuaikan dengan kebutuhan Anda sebelum menyimpan tata letak.

Akhirnya, ketika kami telah memasukkan blok artikel terbaru, halaman kami akan muncul seperti ini.

Penting: Jika Anda telah mengubah tata letak satu entitas, Anda tidak akan dapat menonaktifkan Pembuat Tata Letak.

Anda hanya dapat memperbarui opsi tata letak setelah Anda mengatur ulang semua tata letak yang diubah ke pengaturan aslinya.

Pembuat Tata Letak dari Kode

Dalam hal manajemen GUI, Drupal Layout Builder tidak diragukan lagi luar biasa. Namun, masalah pemrograman yang Anda hadapi saat menggunakan alat ini secara teratur mungkin sedikit lebih sulit. Sekarang, Anda mungkin bertanya bagaimana cara menggunakan Layout Builder menggunakan kode.

Ternyata cukup mudah untuk mengaktifkan dan menonaktifkan template untuk satu entitas.

Cukup muat tampilan menggunakan kode berikut:

 $entityViewDisplay = \Drupal::entityTypeManager- >getStorage('entity_view_display')- >load('ENTITY_TYPE.ENTITY_BUNDLE.VIEW_MODE');

Ini kemudian akan mengembalikan objek bertipe LayoutBuilderEntityViewDisplay , yang kemudian harus Anda ubah sebagai berikut:

 $entityViewDisplay->enableLayoutBuilder();

Jika Anda ingin menyetel bendera tambahan atau mengaktifkan Pembuat Tata Letak untuk mode tampilan tertentu:

 $entityViewDisplay->setOverridable(TRUE);

untuk mengaktifkan pembuatan tata letak unik untuk satu entitas.

Setelah itu, Anda harus menyimpan semuanya.

 $entityViewDisplay->save();

Apa yang sebenarnya terjadi di latar belakang adalah modul Layout Builder menambahkan layout_builder_key ke third_party_settings dari tipe entitas tertentu, dengan nilai untuk parameter yang dijelaskan di atas (diaktifkan, izinkan kustom) , lalu menyimpan layout default untuk tipe entitas ini di bawah bagian.

Bidang entitas baru bernama layout_builder__layout dibuat dan digunakan untuk menyimpan tata letak yang diperbarui untuk entitas khusus ini jika opsi setOverridable disetel ke TRUE .

Sebaliknya, dibutuhkan lebih banyak usaha untuk membuat bagian menggunakan kode dan mengisinya dengan konten yang relevan.

Mulai dari awal, mari tambahkan bagian baru. Parameter layout_id , yang berfungsi sebagai pengidentifikasi tata letak, harus disertakan saat membuat instance baru dari kelas \Drupal\layout_builder\Section untuk mencapai hal ini.

Protip: Modul penemuan tata letak berisi template default. Tata letak didefinisikan dalam file *.layouts.yml . Untuk informasi lebih detail, silahkan baca artikel berikut tentang cara membuat custom layout di drupal.

Kemudian, menambahkan elemen baru langsung ke bagian tersebut akan menjadi tindakan yang paling sederhana. Untuk melakukannya, gunakan metode appendComponent , yang menerima turunan dari kelas \Drupal\layout_builder\SectionComponent sebagai argumen. Namun demikian, sebelum Anda dapat mengembangkan komponen bagian seperti itu, Anda harus mengatur beberapa hal terlebih dahulu. Untuk memulai, Anda memerlukan:

• uuid dari elemen yang disematkan,
• nama daerah pada bagian
• konfigurasi plugin.

Dalam tutorial ini, kami akan menyematkan node sampel di bagian kolom tunggal menggunakan plugin yang disediakan oleh Entity Blocks :

 $section = new Section('layout_onecol'); $uuid = $node->uuid(); $region = 'content'; $pluginConfiguration = [ 'id' => 'entity_block:node', 'provider' => 'entity_block', 'label_display' => FALSE, 'view_mode' => 'default', 'entity' => $node->id(), ]; $component = new SectionComponent($uuid, $region, $pluginConfiguration); $section->appendComponent($component);

Ingatlah selalu bahwa tata letak disimpan di pengaturan atau bidang pihak ketiga; oleh karena itu, untuk menyimpan bagian tersebut, Anda harus melakukannya di salah satu lokasi ini.

Dalam kasus kami, bidang sedang digunakan, jadi:

 $entity->layout_builder__layout->setValue($section); $entity->save();

Anda sekarang telah menambahkan bagian kolom tunggal ke entitas dan menampilkan simpul contoh di dalamnya dengan mengikuti semua langkah ini.

Anda juga mungkin tertarik untuk Meningkatkan Pengalaman Pembuat Tata Letak Drupal.

Pro dan Kontra Pembuat Tata Letak

Kami telah menyusun daftar singkat dari beberapa keuntungan dan kerugian dari Layout Builder di bawah ini:

Kelebihan:

• Penerapannya sederhana karena tidak perlu menambahkan tipe entitas baru karena modul sudah termasuk dalam inti.
• UI yang ramah pengguna dengan kemampuan drag-and-drop.
• Pilihan untuk kustomisasi entitas individual.
• Metode sederhana untuk menggabungkan bidang dengan entitas lain tanpa perlu menambahkan lebih banyak bidang referensi.
• Metode sederhana memanfaatkan blok entitas untuk menyematkan entitas yang ada.

Kontra:

• Jenis entitas baru dan elemen yang dapat disematkan menambah ukuran situs web, yang secara signifikan memperpanjang waktu yang diperlukan untuk memuat semua item.
• Modul ini berfokus pada UI, jadi membuat tata letak baru mungkin lebih sederhana. Saat ini, kita harus menulis kode untuk menghasilkan file dan template .yml.
• Menyeret elemen antar bagian bisa sedikit menantang ketika ada banyak bagian dalam tata letak.
• Nama ranting diakhiri dengan uuid, membuatnya menantang untuk merender bagian tertentu dan membatasi akses ke bagian.

Pikiran Akhir

Pembuat Tata Letak Drupal membuka kita ke berbagai kemungkinan menarik untuk mengelola tata letak melalui antarmuka pengguna dan kode. Apakah ini akan menggantikan semua solusi saat ini?
Ini adalah alat yang ideal, menurut saya, untuk menangani masalah tata letak dalam skala besar. Sepertinya tindakan terbaik adalah menggunakan modul yang banyak digunakan seperti Paragraphs dan Field Group untuk membuat komponen tertutup, lalu Layout Builder untuk membuat layout siap pakai yang terdiri dari komponen-komponen ini.

Layout Builder memiliki tujuan yang unik, seperti setiap modul Drupal lainnya. Akibatnya, itu akan selalu tampil lebih baik dalam beberapa situasi sementara tampil jauh lebih buruk pada orang lain. Lihat sendiri!

Jika Anda mencari pakar untuk membantu Anda dengan Drupal apa pun, kami hanya berjarak satu email!