Drupal 8 için Menü Öğesi Ekstra Modülü Nasıl Kullanılır

Mega menüler artık bir tasarım trendi değil, haber veya e-ticaret ile ilgili web sitelerinin çoğunun önemli bir parçası.

Drupal 8 için Menü Öğesi Ekstralar modülü, site oluşturucunun menü öğelerine alanlar eklemesine izin vererek Drupal'daki varsayılan menü sistemini iyileştirir. Bu şekilde, birkaç basit adımla bir mega menü oluşturmak mümkündür.

Bu modülü nasıl kullanacağınızı öğrenmek için takip edin. Hadi başlayalım!

Adım 1: Gerekli Modülleri Kurun

Menü Öğesi Ekstraları modülüne ek olarak, Viewfield'ı kurmanız gerekecektir. Viewfield, bir Görünüme referans tutan ve alanı içeren varlık her görüntülendiğinde onu işleyen bir alan sağlar.

• PC'nizin terminal uygulamasını açın .
• Tür :
  • besteci drupal/viewfield gerektirir
  • besteci drupal/menu_item_extras gerektirir

İndirdikten sonra her iki modülü de etkinleştirin.

• Uzat'ı tıklayın .
• Her iki modülü de kontrol edin .
• Yükle'yi tıklayın .

Adım #2: Bir Taksonomi Sistemi Oluşturun

Belki de "sistem" kelimesi pek uygun değildir çünkü biz sadece on tane ilişkili terimle tek bir kelime dağarcığı oluşturacağız. Ancak, bu örnek temelleri açıklayacaktır, böylece gelecekte daha karmaşık sınıflandırma sistemleriyle çalışabilirsiniz.

• Yapı > Taksonomi > Sözcük ekle'ye tıklayın .
• “Konular” adını girin ve Kaydet'e tıklayın .
• Terim ekle'yi tıklayın ve aşağıda ayrıntıları verilen tüm terimleri tek tek ekleyin.
  • Konular
    • D8
    • senfoni
    • WP
    • magento
    • CSS
    • HTML
    • JS
    • PHP
    • piton
    • DevOps

Adım #3: İçerik Türlerini Oluşturun

Bu eğitimin amacı doğrultusunda, aşağıdaki alanlara sahip 2 içerik türü kullanacağız:

• Hizmetler
  • Servis Resmi / Resim / İzin verilen değer sayısı: 1
  • Giriş metni / Metin (biçimlendirilmiş) / İzin verilen değer sayısı: 1
  • Açıklama / Varsayılan alan

• Blog
  • Kategori / Taksonomi terimi / İzin verilen değer sayısı: sınırsız
  • Açıklama / Varsayılan alan

Taksonomi alanını oluştururken Referans türünü (Konular) seçtiğinizden emin olun.

4. Adım: İçerik Oluşturun

Hizmet türünde 3 düğüm oluşturacağız:

• öğreticiler
• videolar
• Kitabın

Bu düğümlerin her biri, mega menüdeki ikinci düzey bir öğeyle ilişkilendirilecektir. Öte yandan, kendileriyle ilişkili farklı terimlerle Blog türünde yaklaşık 10 düğüm oluşturacağız. 2 terimi (ör.: D8, WP) diğerlerinden daha sık kullandığınızdan emin olun.

İçerik ekranı bu işlemin sonuna aşağı yukarı aşağıdaki resimdeki gibi bakmalıdır.

Adım #5: Menü Öğelerini Oluşturun

Ana menünün ilk seviyesi aşağıdaki menü öğelerine sahip olacaktır:

• Ev
• Hakkında
• Kaynaklar
• Temas

Menü öğelerinin her biri ek (ekstra) bir alana sahip olacaktır. Bu alan menünün ikinci seviyesinde yani mega menüdeki kart öğelerinin her birinde ayarlanacaktır. Bu alan, görünüm bloklarının her birini sunmamıza izin verecektir.

• Yapı > Menüler'e tıklayın .
• Ana navigasyonu düzenlemek için Düzenle menüsüne tıklayın .

• Eksik birinci düzey menü öğelerini eklemek için Bağlantı ekle'yi 3 kez tıklayın .
• Her menü öğesi adı girdiğinizde Kaydet'e tıklayın .

Yalnızca bağlantı metnini görüntülemek için özel etiketi kullanın.

Menünüzün bağlantılarını oluşturup yeniden düzenledikten sonra,

• Menü öğelerine bir alan eklemek için Alanları yönet > Alan ekle'yi tıklayın .
• Görünüm Alanı türünde bir alan seçin .
• Ona uygun bir isim ve etiket verin.
• Kaydet ve devam et'i tıklayın .

• İzin verilen değer sayısını Sınırsız olarak ayarlayın .
• Alan ayarlarını kaydet'i tıklayın

Bu belirli alana varsayılan bir görünüm bağlama seçeneğiniz olacaktır. Bu alanları boş bırakın.

• Aşağı kaydırın ve Ayarları kaydet'i tıklayın
• Ekranı yönet'i tıklayın .

• Menü kartı etiketini gizleyin .
• Kaydet'i tıklayın .

Adım #6: Görünümleri Oluşturun

• Yapı > Görünümler > Görünüm ekle'ye tıklayın
• Hizmetler türünün İçeriğini Göster .
• Biçimlendirilmemiş bir alan listesi içeren bir blok oluşturun .
• Blok başına 3 öğe göstermeyi seçin .
• Kaydet ve düzenle'yi tıklayın .

• Hizmet resmi alanını ekleyin
• Görüntü stilini Küçük Resim olarak ayarlayın ve görüntüyü İçeriğe bağlayın.
• Uygula'yı tıklayın

• Giriş metin alanını da ekleyin .
• Alanları yeniden düzenleyin.
• Kaydet'i tıklayın .

• Yapı > Görünümler > Görünüm ekle'ye tıklayın
• Blog türünün İçeriğini Göster .
• Biçimlendirilmemiş bir alan listesi içeren bir blok oluşturun .
• Blok başına 1 öğe göstermeyi seçin .
• Kaydet ve düzenle'yi tıklayın .

• Kategori alanını ekleyin .
• Alanları ekle ve yapılandır'ı tıklayın .
• Çoklu alan ayarları'na tıklayın .
• Sırasız liste'yi seçin .
• Görüntülenecek değer sayısını 3 olarak ayarlayın .
• Uygula'yı tıklayın .

• Sıralama kriterini kaldır
• Uygula'yı tıklayın .
• Görünümü kaydetmek için Kaydet'e tıklayın .

Adım #7: Görünüm Bloklarını Menü Öğelerine Ekleyin

• Yapı > Menüler'e tıklayın
• Ana navigasyonu düzenleyin .
• Kaynaklar menü öğesini düzenleyin .
• 5. adımda oluşturduğunuz 2 bloğu ekleyin .
• Kaydet'i tıklayın .

Adım #8: CSS Stilleri

Bu öğreticinin kapsamı dışında olduğu için bu kodu ayrıntılı olarak açıklamayacağım. Ancak, bu makalede Drupal Görünümleri ve CSS Izgarası hakkında daha fazla araştırma yapabilirsiniz. Mega menülerle daha fazla pratik yapmak istiyorsanız, bu makaleye de bir göz atın.

 #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;
 }

Umarım bu öğreticiyi beğenmişsinizdir. Okuduğunuz için teşekkürler!