Drupal 9 Layout Builder'da Uzmanlaşmak: Web Sitenizin Tasarımını Zahmetsizce Özelleştirmek için Kapsamlı Bir Kılavuz

Sayfa oluşturma söz konusu olduğunda, site oluşturucular, içerik yazarları ve içerik editörleri sürekli olarak sorunsuz, kullanıcı dostu bir deneyim arayışındadır. Sayfaları tasarlamak ve oluşturmak istediklerinde sürükle bırak ve CKEditor teknolojilerini kullanmayı beklerler. Bu özdeş deneyim, Drupal Layout Builder'ın Drupal çekirdeğindeki basit sayfa oluşturma işlevi tarafından sağlanır.

Ayırt edici Drupal Layout Builder, içerik yazarlarının içeriğin sunulma şeklini değiştirmesine izin veren güçlü bir görsel tasarım aracı sunar. En son sürümünde Drupal çekirdeğine eklenen Layout Builder, Drupal 9, içeriği çeşitli düzenler kullanarak göstermek için bölümler eklemenize/kaldırmanıza ve sayfalarınızı ihtiyacınıza göre özelleştirmenize olanak tanır. Drupal 9'un Mizanpaj Oluşturucu Modülü ile, tamamen benzersiz bir sayfa oluşturmak için bu bölümleri karıştırabilirsiniz.

Drupal 9 Layout Builder'ı kullanmanın iki farklı yolu vardır: Layout Defaults (içerik türünün tüm içeriği için bir mizanpaj tasarlamak için) ve Layout Overrides (belirli içerik öğesi için bir mizanpaj tasarlamak için). Bu blogun yardımıyla Drupal 9 Layout Builder modülü hakkında daha fazla bilgi edinebilir ve kullanmaya başlayabilirsiniz.

Görünüm modu kalıplarını uygulamak için düzen oluşturucuyu ve Ctools modülünü kullanmaya başlayacağımız bu serideki bir sonraki makalemize dikkat edin!

Mizanpaj Oluşturucu Tanıtımı

Drupal 9 Layout Builder modülünü kullanarak içerik türleri, taksonomiler, kullanıcılar ve daha fazlası gibi varlıkların görünümünü değiştirebilirsiniz. Site oluşturucular, bu özelliği kullanarak blokları, alanları ve diğer öğeleri kolayca sürükleyip yerlerine bırakabilir.

Düzenlerinizi tasarlarken yapılan değişikliklerin bir önizlemesini sağlayarak, Drupal 9'daki düzen oluşturucu modülü düzen oluşturma sürecini kolaylaştırır. Drupal 9'daki düzen oluşturucu, kullanıcıların düzende yaptıkları her küçük değişikliği kaydetmelerini ve ardından ön uçta aramalarını gerektirmek yerine, sorunsuz bir düzen oluşturma deneyimi için yapılan değişikliklerin önizlemelerini sağlar.

Düzen oluşturucunun iki modülü vardır:

Düzen Keşfi - Düzenleri kaydetmek için modüllere veya temalara bir araç sağlar.

Düzen Oluşturucu - Kullanıcıların içerik üzerinde blokları ve içerik alanlarını doğrudan eklemesine ve düzenlemesine olanak tanır.

Bir düzen tasarlarken, Layout Builder iki temel fikir kullanır:

Bölümler - Blokların yerleştirilebileceği sütunlar veya kaplar. Örneğin, 2 sütunlu bir düzen veya 3 sütunlu bir düzen vb. olabilir.

Bloklar - Bölümlere yerleştirilebilen içerik öğeleri.

Layout Builder modülünün kurulumu ve konfigürasyonu

Drupal 9 layout builder modülünü kurmak ve yapılandırmak için Extend'e gidin ve Layout Builder ve Layout Discovery modüllerini etkinleştirin.

İçerik Türünü ve Sınıflandırmayı Değiştirin

Modül kurulduktan sonra Yapı, İçerik türleri'ne gidin ve herhangi bir içerik türü için "Görüntüyü yönet"i seçin. Bu örnek için "makale" içerik türünü kullanacağız.

"Düzen Oluşturucuyu Kullan"ı seçmek için alttaki Düzen seçenekleri açılır menüsünü tıklayın ve ardından Kaydet'i tıklayın.

Görünüm modunda Mizanpaj Oluşturucu etkinleştirildikten sonra, alan biçimlendiricilerin yerini "Düzeni yönet" seçeneği alır. Mevcut görünüm modlarının her biri Layout Builder ile kullanılabilir.

"Düzeni yönet"i tıkladığınızda makale içerik türü düzenine yönlendirileceksiniz.

Düzene Bölümler Ekleme

Düzen oluşturucuya başka bölüm eklemeden önce varsayılan bölümü kaldırın. "Kapat" düğmesini seçin (aşağıdaki ekran görüntüsünde gösterildiği gibi). Ayrıca, varsayılan bölümü kaldırmak için ekranınızın sağ tarafında bir düğme de kullanımınıza sunulacaktır. Ardından "Kaldır"ı seçin.

"Add Section" seçeneğini işaretleyerek layoutumuza birkaç bölüm ekleyelim. Ekranın sağ tarafında, bölümünüz için bir düzen seçebilmeniz için size seçenekler de sunulacaktır. Şimdilik "İki Sütunlu Bölüm"ü seçelim.

Size "İki Sütun Düzeni" genişliğini seçme seçeneği sunulacak. Şimdilik "%67/%33" olarak bir seçim yapalım. Ardından, "Bölüm ekle"yi seçin.

Eklendikten sonra, her bölüm bölgesi bir "Blok Ekle" bağlantısını göstermelidir.

Kesit Bölgelerine Blok Ekleme

Düzen için seçtikten sonra alanınıza bloklar ekleyebilirsiniz. "Blok Ekle"ye tıklamanız yeterlidir ve bir blok eklemek istediğinizde "Blok seç" seçeneği sağdan dışarı kayar.

blok seçme

Sadece sağ sütundaki bloklara tıklamak onları seçecektir. "Blok adına göre filtrele" metin alanını kullanarak, adlarına göre aramayı filtreleyerek blokları bile bulabilirsiniz.
Şimdilik "Body" içerik alanını seçeceğiz.

Alan biçimlendirici, eklemek istediğiniz bloğa tıkladığınızda değişiklik yapmanıza izin verecektir. Biçimlendiriciyi yapılandırdıktan sonra "Blok Ekle"ye tıklayın.

Bloğun sol tarafında bir "Gövde" içerik alanı olacaktır.

"Gövde" alanı eklendi; şimdi değişikliklerinizi kaydedin. Drupal 9 mizanpaj sayfasının üst kısmındaki menüden "Düzeni Kaydet"i seçerek, bölümünüz üzerinde yaptığınız tüm değişiklikleri kaydedebilirsiniz.

Düzen oluşturucumuzu daha da kişiselleştirmek için tasarımımıza birkaç alan daha eklemeyi deneyelim.

Bu düzeni kaydettikten sonra makale içerik türüne sahip bir sayfayı ziyaret ettiğinizde, az önce oluşturduğunuz düzenin bir önizlemesini görebileceksiniz.

Düzen Geçersiz Kılmalar:

Az önce oluşturduğumuz düzen, tüm makaleler için çalışacaktır. Drupal, belirli bir makale için özel bir düzen oluşturmak üzere etkinleştirilmesi gereken bir dizi ayara sahiptir. Bunu yapmak için "Her içerik öğesinin düzeninin özelleştirilmesine izin ver"i seçin.

Bu seçeneği etkinleştirdikten sonra bir makaleyi ziyaret ederseniz, bir Düzen sekmesi düğmesi görünecektir.

Aynı arayüz ile artık düzen değiştirilebilir. Ancak bu, yalnızca bu tek parça içeriğin tasarımını değiştirecektir.

Şimdi bu sayfaya bir blok ekleyelim. Yeni bir tek sütunlu bölüm oluşturun ve "Blok Ekle" düğmesini tıklayın. Bu sayfadaki diğer kullanıcılara ait yakın zamanda düzenlenen içeriği göstermek istediğimiz durumu düşünün, yeni bir blok eklerken "Son içerik" bloğunu filtreleyin ve ardından düzeni kaydetmeden önce bunu ihtiyaçlarınıza göre özelleştirin.

Sonunda, en son makale bloğunu dahil ettiğimizde, sayfamız bu şekilde görünecektir.

Önemli: Tek bir varlığın düzenini değiştirdiyseniz, Düzen Oluşturucuyu devre dışı bırakamazsınız.

Düzen seçeneklerini yalnızca, değiştirilen tüm düzenleri orijinal ayarlarına sıfırladıktan sonra güncelleyebilirsiniz.

Code'dan Düzen Oluşturucu

GUI yönetimi söz konusu olduğunda, Drupal Layout Builder şüphesiz harikadır. Aracı düzenli olarak kullanırken karşılaştığınız programlama sorunları yine de biraz daha zor olabilir. Şimdi, Layout Builder'ı kod kullanarak nasıl kullanacağınızı sorabilirsiniz.

Tek bir varlık için şablonları etkinleştirmenin ve devre dışı bırakmanın oldukça basit olduğu ortaya çıktı.

Aşağıdaki kodu kullanarak ekranı yüklemeniz yeterlidir:

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

Daha sonra LayoutBuilderEntityViewDisplay türünde bir nesne döndürür ve bunu aşağıdaki gibi değiştirmeniz gerekir:

 $entityViewDisplay->enableLayoutBuilder();

Ek olarak bayrağı ayarlamak veya belirli bir görünüm modu için Mizanpaj Oluşturucuyu etkinleştirmek isterseniz:

 $entityViewDisplay->setOverridable(TRUE);

tek bir varlık için benzersiz düzenlerin oluşturulmasını sağlamak için.

Bundan sonra, her şeyi kaydetmelisin.

 $entityViewDisplay->save();

Arka planda gerçekte olan şey, Layout Builder modülünün layout_builder_key'i belirli bir varlık tipinin Third_party_settings'ine , yukarıda açıklanan parametreler için değerlerle (etkin, özel izin ver) eklemesi ve ardından bu tür varlık için varsayılan düzeni altında depolamasıdır. bölümler.

setOverridable seçeneği TRUE olarak ayarlanmışsa layout_builder__layout adlı yeni bir varlık alanı oluşturulur ve bu özel varlık için güncellenmiş düzeni tutmak için kullanılır.

Aksine, kod kullanarak bir bölüm oluşturmak ve onu ilgili içerikle doldurmak biraz daha fazla çalışma gerektirir.

Başlamak için yeni bir bölüm ekleyelim. Bunu gerçekleştirmek için \Drupal\layout_builder\Section sınıfının yeni bir örneğini oluştururken, düzen tanımlayıcısı olarak hizmet veren layout_id parametresi dahil edilmelidir.

Protip: Düzen bulma modülü, varsayılan şablonları içerir. Düzenler *.layouts.yml dosyalarında tanımlanır. Daha ayrıntılı bilgi için lütfen drupal'da özel düzenlerin nasıl oluşturulacağı ile ilgili aşağıdaki makaleye göz atın.

Ardından, doğrudan bölüme yeni bir öğe eklemek en basit eylem şekli olacaktır. Bunu yapmak için, \Drupal\layout_builder\SectionComponent sınıfının bir örneğini bağımsız değişken olarak kabul eden appendComponent yöntemini kullanın. Bununla birlikte, böyle bir bölüm bileşeni geliştirmeden önce birkaç şeyi ayarlamanız gerekir. Başlamak için ihtiyacınız olacak:

• gömülü öğenin uuid'si,
• bölümünde bölgenin adı,
• eklenti yapılandırması.

Bu öğreticide, Entity Blocks tarafından sağlanan eklentiyi kullanarak tek sütunlu bir bölüme örnek bir düğüm yerleştireceğiz :

 $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);

Düzenlerin üçüncü taraf ayarlara veya bir alana kaydedildiğini her zaman aklınızda bulundurun; bu nedenle, bölümü kaydetmek için bu konumlardan birinde yapmanız gerekir.

Bizim durumumuzda, bir alan kullanılıyor, yani:

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

Artık bir varlığa tek bir sütun bölümü eklediniz ve tüm bu adımları izleyerek bunun içinde örnek bir düğüm gösterdiniz.

Drupal'ın Mizanpaj Oluşturucu Deneyimini Geliştirme konusu da ilginizi çekebilir.

Düzen Oluşturucu Artıları ve Eksileri

Layout Builder'ın bazı avantaj ve dezavantajlarının kısa bir listesini aşağıda derledik:

Artıları:

• Modül zaten çekirdeğe dahil olduğundan yeni varlık türleri eklemeye gerek olmadığı için dağıtım basittir.
• Sürükle ve bırak özelliklerine sahip kullanıcı dostu kullanıcı arabirimi.
• Bireysel varlık özelleştirme seçenekleri.
• Daha fazla referans alanı eklemeye gerek kalmadan alanları diğer varlıklarla birleştirmek için basit bir yöntem.
• Mevcut varlıkları gömmek için varlık bloklarından yararlanmanın basit bir yöntemi.

Eksileri:

• Yeni varlık türleri ve gömülebilir öğeler web sitesinin boyutunu artırır ve bu da tüm öğelerin yüklenmesi için gereken süreyi önemli ölçüde uzatır.
• Modül, kullanıcı arayüzü odaklıdır, bu nedenle yeni düzenler oluşturmak daha basit olabilir. Şu anda, create.yml dosyaları ve şablonları için kod yazmamız gerekiyor.
• Düzende birçok parça olduğunda, bölümleri bölümler arasında sürüklemek biraz zor olabilir.
• Twig'in adlarının sonuna uuid eklenir, bu da belirli bir bölümün işlenmesini zorlaştırır ve bölümlere erişimi kısıtlar.

Son düşünceler

Drupal Layout Builder, hem kullanıcı arabirimi hem de kod yoluyla mizanpajları yönetmek için bizi çok çeşitli ilgi çekici olanaklara açıyor. Mevcut tüm çözümlerin yerini alacak mı?
Bence, düzen sorununu büyük ölçekte ele almak için ideal bir araçtır. En iyi hareket tarzı, kapalı bileşenler oluşturmak için Paragraflar ve Alan Grubu gibi yaygın olarak kullanılan modülleri kullanmak ve ardından bu bileşenlerden oluşan önceden hazırlanmış düzenler oluşturmak için Layout Builder'ı kullanmak gibi görünüyor.

Layout Builder, diğer tüm Drupal modülleri gibi benzersiz bir amaca sahiptir. Sonuç olarak, bazı durumlarda her zaman daha iyi performans gösterirken diğerlerinde önemli ölçüde daha kötü performans gösterecektir. Kendiniz kontrol edin!

Drupal ile ilgili herhangi bir konuda size yardımcı olacak uzmanlar arıyorsanız, size bir e-posta kadar yakınız!