9 Basit Adımda Özel Drupal 9 Teması Nasıl Oluşturulur

Drupal 9, geliştiricilere ve site sahiplerine, çekici dijital deneyimler oluşturmak için bir araya getirilebilecek ısmarlama bileşenler oluşturma esnekliği sağlar. Temalar, bir web sitesinin görsel görünümünü temsil eden Drupal'ın tasarım bloklarıdır. Drupal 9, en popüleri Bootstrap teması olan temel temalar ve üçüncü taraf tema seçenekleriyle birlikte gelir. Ancak, Drupal 9 temalarından hiçbiri sizin için uygun değilse, muhtemelen özel tema geliştirmeye bakıyor olmalısınız. Drupal 9 özel temaları ile tasarımınızı tam gereksinimlere göre uyarlayabilirsiniz.

Drupal 9, Drupal için ön uç teması olarak Bartik'i sağlar, ancak bir Drupal 9 özel temasına ihtiyacınız varsa, kendi Drupal 9 tema geliştirmenizi oluşturabilir, böylece Drupal tema becerilerinizi geliştirebilirsiniz. Drupal 9 tema geliştirmeyi gerçekten anlamanın en kolay yolu, pratik yapmak ve sıfırdan bir tema oluşturmaktır.

Drupal 8 şimdi EOL'ye ulaştı. Şimdi Drupal 9'a geçme zamanı. Ancak, hala Drupal 8'de özel bir tema oluşturmaya çalışıyorsanız, bu adımlar Drupal 8 kurulumu için de işe yarayacaktır.

Özel Drupal 9 Tema Geliştirmeye Başlarken

Drupal web sitemiz için bir Drupal 9 teması oluşturmaya başlayalım.
ADIM 1: Öncelikle 'web/themes/custom' klasörü altında özel bir tema oluşturmamız gerekiyor. Klasörü custom_theme olarak adlandıracağız .

ADIM 2: Ardından, bir info.yml dosyası oluşturmamız gerekecek. Bunun için temel anahtarları belirtmemiz gerekiyor. Burada belirtelim -

 KOD:
isim : Özel Tema
tip : tema
açıklama : 'Web Sitem için Özel Tema.'
paket : Diğer
core_version_requirement : ^8 || ^9

ADIM 3 : Şimdi oluşturalım özel Drupal 9 temamız için ihtiyacımız olan tüm kitaplıkları (CSS VE JS) belirtmek için bir library.yml dosyası. Ayrıca buraya bağlamak için CSS ve JS dizini ve dosyalarını oluşturacağız. Kütüphaneyi global-styling olarak adlandıracağız .

 KOD:
küresel stil :
sürüm : 1.x
js :
js/script.js : {}
css :
tema :
css/style.css : {}

ADIM 4 : library.yml dosyasını oluşturduktan sonra temamıza linklememiz gerekiyor. Bunun için info.yml dosyasına ekleyeceğiz. bu daha sonra tüm temaya uygulayacaktır.

 KOD:
kütüphaneler :
- custom_theme/global-styling

Bu nedenle, anahtar kitaplıklar ve yol tema adı - ' custom_theme ' / kitaplık adı - 'global-styling' olacaktır .

ADIM 5 : Ardından, 'Temel Temayı' devralmamız gerekiyor. Bizim durumumuzda, bir Drupal çekirdek teması olan ' klas ' temayı devralacağız. Yani anahtar, info.ym l'deki temel tema olacaktır.

 KOD:
temel tema : klas

ADIM 6 : Şimdi temamız için 'bölgeler' tanımlayacağız. info.yml'de bunu 'regions' anahtarının altında tanımlamamız gerekiyor.

 KOD:
bölgeler :
markalaşma : Markalaşma
navigasyon : Ana navigasyon
arama: Arama
özellikli : Öne çıkan
içerik : İçerik
right_sidebar : Sağ kenar çubuğu
footer_first : Önce Altbilgi
footer_second : Altbilgi Saniye
footer_third: Altbilgi Third
footer_bottom : Altbilgi Alt

'Bölgeler' anahtarının altında, özel Drupal teması için bölgelerinizi tanımlayabilirsiniz. Burada,
branding: Küçük harflerle yazılması gereken bölgenin kimliğidir.
Branding: Bölgenin büyük harfle yazılabilen adıdır.

ADIM 7 : Özel Drupal temamız için bölgelerimizi tanımladıktan sonra, klas temalar yerine 'bölgelerimizi' almak için page.html.twig'i geçersiz kılmamız gerekiyor. altında page.html.twig oluşturacağımız şablonlar/sistem dizini oluşturacağız.

 KOD:
< header aria-label ="Site başlığı" class ="header" id ="header" rolü ="banner" >
{{ sayfa.markalama }}
{{ sayfa.navigasyon }}
{{ sayfa.arama }}
</ başlık >
< bölüm sınıfı ="özellikli" id ="özellikli" rol ="tamamlayıcı" >
{{ sayfa.özellikli }}
</ bölüm >
< bölüm sınıfı ="main" kimliği ="main" >
< main aria-label ="Site ana içeriği" class ="content" id ="content" rolü ="main" >
{{ sayfa içeriği }}
</ ana >
< bir kenara sınıf ="sağ--yan çubuğu" kimliği ="kenar çubuğu" rolü ="tamamlayıcı" >
{{ page.right_sidebar }}
</ kenara >
</ bölüm >
< footer aria-label ="Site footer" class ="footer" id ="footer" role ="contentinfo" >
< div class ="footer--top" >
{{ page.footer_first }}
{{ sayfa.footer_saniye }}
{{ sayfa.footer_üçüncü }}
</ div >
< div class ="footer--bottom" >
{{ page.footer_bottom }}
</ div >
</ altbilgi >

page.html.twig'de bölgelerimiz için HTML yapısını oluşturacağız. {{ page.branding }}'de gördüğünüz gibi – Burada,

page - Sayfada 'bölgeler' oluşturmanın anahtarı mı

branding- info.yml dosyasında tanımladığımız bölgedir .

Şimdi bölgelerimizi oluşturduk ve sayfada render ettik.

Adım 8 : Drupal sitenizde Görünüm'e gidin. Özel Drupal temanızın, Kaldırılan temalar bölümünde mevcut olduğunu görebilirsiniz.

Drupal temanızı siteye yüklemek için ' Yükle ve varsayılan olarak ayarla ' seçeneğine tıklamanız gerekir.

Kurulduktan sonra Structure -> Block Layout'a gidin . Özel Temanız Blok Düzeni altında görünecektir.

' Blok bölgeleri göster (Özel Tema) ' için bir bağlantı göreceksiniz. Bağlantıya tıklayın. Sen info.yml beyan ve page.html.twig ilave ettiğini tüm bölgeleri görebilirsiniz

Adım 9 : Drupal 9'da tema oluşturma işlemini neredeyse bitirdiniz! Ardından, tasarımınıza göre her bölge için CSS'de stiller uygulamanız gerekir. Bu durumda CSS kullanacağız; İsterseniz SCSS bile kullanabilirsiniz. Sadece markalama bölgesini inceleyin - bölge sınıfını görmeli ve ardından CSS'yi o sınıfa eklemelisiniz.

 . başlık {
 ekran : esnek ;
 justify-content : boşluk-arasında ;
 dolgu : 10 piksel ;
}


. başlığı. bölge {
 dolgu : 5 piksel ;
}


. başlığı. bölge markası {
 esnek : 0 1 20 %;
}
		



. başlığı. bölge navigasyonu {
 esnek : 0 1 50 %;
}


. başlığı. bölge arama {
 esnek : 0 1 30 %;
}


. bölge . blok bölge {
 dolgu : 15 piksel ;
}


. özellikli {
 dolgu : 40 piksel 20 piksel ;
 arka plan rengi : kızılderili ;
}


. ana {
 dolgu : 50 piksel 0 ;
 ekran : esnek ;
 justify-content : boşluk-arasında ;
}


. ana . içerik {
 esnek : 0 1 65 %;
}


. ana . sağ kenar çubuğu {
 esnek : 0 1 30 %;
}


. altbilgi--üst {
 ekran : esnek ;
 justify-content : boşluk-arasında ;
 dolgu : 10 piksel ;
}


. altbilgi - üst . bölge {
 dolgu : 5 piksel ;
}


. bölge-altbilgi-önce , . bölge-altbilgi-saniye , . bölge-altbilgi-üçüncü {
 esnek : 0 1 30 %;
}

Sonuç:

Drupal 9 Özel Temanız hazır!

Dal dosyanız için herhangi bir kanca yazmanız veya öneriler oluşturmanız gerekirse, .theme dosyasını özel Drupal temanıza ekleyebilirsiniz (aşağıda gösterilmiştir).