Cara Menggunakan Modul Ekstra Item Menu untuk Drupal 8

Menu mega bukan lagi tren desain, tetapi merupakan bagian penting dari sebagian besar situs web yang terkait dengan berita atau eCommerce.

Modul Menu Item Extras untuk Drupal 8 meningkatkan sistem menu default di Drupal, dengan mengizinkan pembuat situs menambahkan bidang ke item menu. Dengan begitu, dimungkinkan untuk membuat menu mega dengan beberapa langkah sederhana.

Ikuti bersama untuk mempelajari cara menggunakan modul ini. Ayo mulai!

Langkah #1: Instal Modul yang Diperlukan

Selain modul Menu Item Extras, Anda perlu menginstal Viewfield. Viewfield menyediakan bidang yang menyimpan referensi ke View dan merendernya setiap kali entitas yang berisi bidang tersebut ditampilkan.

• Buka aplikasi terminal PC Anda.
• Jenis :
  • komposer membutuhkan drupal/bidang tampilan
  • komposer membutuhkan drupal/menu_item_extras

Aktifkan kedua modul setelah mengunduh.

• Klik Perpanjang.
• Periksa kedua modul.
• Klik Instal.

Langkah #2: Buat Sistem Taksonomi

Mungkin kata “sistem” kurang tepat karena kita hanya akan membuat satu kosakata dengan sepuluh istilah terkait. Namun, contoh ini akan menjelaskan dasar-dasarnya, sehingga Anda dapat bekerja dengan sistem taksonomi yang lebih rumit di masa mendatang.

• Klik Struktur > Taksonomi > Tambahkan kosakata.
• Masukkan nama “Topik” dan klik Simpan.
• Klik Tambahkan istilah dan tambahkan semua istilah yang dirinci di bawah ini satu per satu.
  • Topik
    • D8
    • simfoni
    • WP
    • Magento
    • CSS
    • HTML
    • JS
    • PHP
    • Python
    • DevOps

Langkah #3: Buat Jenis Konten

Untuk tujuan tutorial ini, kita akan menggunakan 2 tipe konten dengan bidang berikut:

• Jasa
  • Gambar Layanan / Gambar / Jumlah nilai yang diizinkan: 1
  • Teks pengantar / Teks (diformat) / Jumlah nilai yang diizinkan: 1
  • Deskripsi / Bidang default

• Blog
  • Kategori / Istilah taksonomi / Jumlah nilai yang diizinkan: tidak terbatas
  • Deskripsi / Bidang default

Pastikan Anda memilih jenis Referensi (Topik) saat membuat bidang Taksonomi.

Langkah #4: Buat Konten

Kami akan membuat 3 node tipe Service:

• tutorial
• Video
• Buku

Masing-masing node ini akan dikaitkan dengan elemen tingkat kedua di menu mega. Di sisi lain, kita akan membuat sekitar 10 node tipe Blog dengan berbagai istilah yang terkait dengannya. Pastikan Anda menyertakan 2 istilah (mis.: D8, WP) dengan frekuensi lebih banyak dari yang lain.

Layar Konten harus melihat akhir dari proses ini kurang lebih seperti gambar di bawah ini.

Langkah #5: Buat Item Menu

Tingkat pertama dari menu utama akan memiliki item menu berikut:

• Rumah
• Tentang
• Sumber daya
• Kontak

Masing-masing item menu akan memiliki bidang tambahan (ekstra). Bidang ini akan diatur pada tingkat kedua dari menu, yaitu setiap item kartu dalam menu mega. Bidang ini akan memungkinkan kita untuk menampilkan masing-masing blok tampilan.

• Klik Struktur > Menu.
• Klik menu Edit, untuk mengedit navigasi Utama.

• Klik Tambahkan tautan 3 kali untuk menambahkan item menu tingkat pertama yang hilang.
• Klik Simpan setiap kali Anda memasukkan nama item menu.

Gunakan tag khusus untuk hanya menampilkan teks tautan.

Setelah Anda membuat dan mengatur ulang tautan menu Anda,

• Klik Kelola bidang > Tambahkan bidang, untuk menambahkan bidang ke item menu.
• Pilih bidang tipe Viewfield.
• Beri nama dan label yang tepat.
• Klik Simpan dan lanjutkan.

• Setel jumlah nilai yang Diizinkan ke Tidak Terbatas.
• Klik Simpan pengaturan bidang

Anda akan memiliki opsi untuk menautkan tampilan default ke bidang khusus ini. Biarkan bidang ini kosong.

• Gulir ke bawah dan klik Simpan pengaturan
• Klik Kelola tampilan.

• Sembunyikan label kartu menu.
• Klik Simpan.

Langkah #6: Buat Tampilan

• Klik Struktur > Tampilan > Tambahkan tampilan
• Tampilkan Konten dari jenis Layanan.
• Buat blok dengan daftar bidang yang tidak diformat.
• Pilih untuk menampilkan 3 item per blok.
• Klik Simpan dan edit.

• Tambahkan bidang gambar Layanan
• Atur gaya gambar ke Thumbnail dan tautkan gambar ke Konten.
• Klik Terapkan

• Tambahkan bidang teks Intro juga.
• Atur ulang bidang.
• Klik Simpan.

• Klik Struktur > Tampilan > Tambahkan tampilan
• Tampilkan Konten bertipe Blog.
• Buat blok dengan daftar bidang yang tidak diformat.
• Pilih untuk menampilkan 1 item per blok.
• Klik Simpan dan edit.

• Tambahkan kategori bidang.
• Klik Tambahkan dan konfigurasikan bidang.
• Klik pengaturan beberapa bidang.
• Pilih Daftar tidak berurutan.
• Atur jumlah nilai yang akan ditampilkan ke 3.
• Klik Terapkan.

• Hapus kriteria Sortir
• Klik Terapkan.
• Klik Simpan untuk menyimpan tampilan.

Langkah #7: Tambahkan Blok Tampilan ke Item Menu

• Klik Struktur > Menu
• Edit navigasi Utama.
• Edit item menu Sumberdaya.
• Tambahkan 2 blok yang Anda buat di langkah # 5.
• Klik Simpan.

Langkah #8: Gaya CSS

Saya tidak akan menjelaskan kode ini secara rinci karena di luar cakupan tutorial ini. Namun, Anda dapat meneliti lebih lanjut tentang Tampilan Drupal dan Grid CSS di artikel ini. Jika Anda ingin berlatih lebih banyak dengan menu mega, lihat juga artikel ini.

 #block-bartik-main-menu a,
 #block-bartik-main-menu li span {
 background: transparent;
 text-shadow: unset;
 color: whitesmoke;
 }

 #block-bartik-main-menu .menu-level-0 {
 display: grid;
 grid-template-columns: repeat(4, 1fr);
 }

 #block-bartik-main-menu .field--name-field-menu-card .field__items {
 display: flex;
 }

 #block-bartik-main-menu .menu-dropdown-0 {
 position: absolute;
 left: 0;
 top: 166px;
 width: 100%;
 z-index: 10;
 }

 #block-bartik-main-menu a,
 #block-bartik-main-menu li span {
 background: transparent;
 text-shadow: unset;
 color: whitesmoke;
 }

 #block-bartik-main-menu .menu-item {
 display: grid;
 align-content: center;
 justify-content: center;
 }

 #block-bartik-main-menu .menu-level-0 {
 display: grid;
 grid-template-columns: repeat(4, 1fr);
 }

 #block-bartik-main-menu .menu-dropdown-0 {
 position: absolute;
 left: 0;
 width: 100%;
 padding-top: 16px;
 background-color: rgba(141,139,132, 0.9);
 }

 .view-tutorials .view-content {
 display: grid;
 grid-template-columns: repeat(3, 1fr);
 }

 .view-tutorials .views-row {
 display: grid;
 justify-items: center;
 }

 .view-tutorials .views-row span > a {
 font-size: 1.3rem
 }

 .view-tutorials .views-row .views-field-field-intro-text {
 font-size: 1rem;
 }

 #block-bartik-main-menu a,
 #block-bartik-main-menu li span {
 background: transparent;
 text-shadow: unset;
 color: whitesmoke;
 }

 #block-bartik-main-menu .menu-level-0 {
 display: grid;
 grid-template-columns: repeat(4, 1fr);
 }

 #block-bartik-main-menu .field--name-field-menu-card .field__items {
 display: flex;
 }

 #block-bartik-main-menu .menu-dropdown-0 {
 position: absolute;
 left: 0;
 top: 166px;
 width: 100%;
 z-index: 10;
 }

 #block-bartik-main-menu a,
 #block-bartik-main-menu li span {
 background: transparent;
 text-shadow: unset;
 color: whitesmoke;
 }

 #block-bartik-main-menu .menu-item {
 display: grid;
 align-content: center;
 justify-content: center;
 }

 #block-bartik-main-menu .menu-level-0 {
 display: grid;
 grid-template-columns: repeat(4, 1fr);
 }

 #block-bartik-main-menu .menu-dropdown-0 {
 position: absolute;
 left: 0;
 width: 100%;
 padding-top: 16px;
 background-color: rgba(141,139,132, 0.9);
 }

 .view-tutorials .view-content {
 display: grid;
 grid-template-columns: repeat(3, 1fr);
 }

 .view-tutorials .views-row {
 display: grid;
 justify-items: center;
 }

 .view-tutorials .views-row span > a {
 font-size: 1.3rem
 }

 .view-tutorials .views-row .views-field-field-intro-text {
 font-size: 1rem;
 }

Saya harap Anda menyukai tutorial ini. Terima kasih sudah membaca!