Cara Membuat Tema Drupal 9 Kustom dalam 9 Langkah Sederhana

Drupal 9 memberi pengembang dan pemilik situs fleksibilitas untuk membuat komponen yang dapat dipesan lebih dahulu yang dapat disatukan untuk membangun pengalaman digital yang menarik. Tema adalah blok desain Drupal yang mewakili tampilan visual situs web. Drupal 9 hadir dengan pilihan tema inti dan tema pihak ketiga dengan yang paling populer adalah tema Bootstrap. Namun, jika tidak ada tema Drupal 9 yang cocok untuk Anda, Anda mungkin harus melihat pengembangan tema khusus. Dengan tema khusus Drupal 9, Anda dapat menyesuaikan desain Anda dengan persyaratan yang tepat.

Drupal 9 menyediakan Bartik sebagai tema frontend untuk Drupal, tetapi jika Anda memerlukan tema kustom Drupal 9 maka Anda dapat membuat pengembangan tema Drupal 9 Anda sendiri, sehingga meningkatkan keterampilan tema Drupal Anda. Cara termudah untuk benar-benar memahami pengembangan tema Drupal 9 adalah dengan berlatih dan membuatnya dari awal.

Drupal 8 kini telah mencapai EOL. Sekarang saatnya untuk bermigrasi ke Drupal 9. Namun, jika Anda masih mencoba membuat tema khusus di Drupal 8, langkah-langkah ini juga akan berfungsi untuk pengaturan Drupal 8.

Memulai dengan Pengembangan Tema Drupal 9 Kustom

Mari kita mulai membuat tema Drupal 9 untuk situs web Drupal kita.
LANGKAH 1: Pertama, kita perlu membuat tema khusus di bawah folder 'web/tema/kustom' . Kami akan memberi nama folder tersebut sebagai custom_theme .

LANGKAH 2: Selanjutnya, kita perlu membuat file info.yml . Kita perlu menentukan kunci dasar untuk itu. Mari kita tentukan di sini -

 KODE:
nama : Tema Kustom
jenis : tema
description : 'Tema Kustom untuk Situs Web Saya.'
paket : Lainnya
core_version_requirement : ^8 || ^9

LANGKAH 3 : Sekarang, mari kita buat file library.yml untuk menentukan semua perpustakaan yang kita butuhkan (CSS DAN JS) untuk tema Drupal 9 kustom kita. Kami juga akan membuat direktori CSS dan JS dan file-filenya untuk menautkannya di sini. Kami akan menamai perpustakaan sebagai global-styling .

 KODE:
gaya global :
versi : 1.x
js :
js/script.js : {}
css :
tema :
css/style.css : {}

LANGKAH 4: Setelah membuat file library.yml , kita perlu menautkannya ke tema kita. Untuk ini, kita akan menambahkannya di file info.yml yang kemudian akan menerapkannya ke seluruh tema.

 KODE:
perpustakaan :
- custom_theme/global-styling

Jadi, kuncinya adalah perpustakaan dan jalurnya adalah nama tema - ' custom_theme ' / nama perpustakaan - 'global-styling' .

LANGKAH 5: Selanjutnya, kita perlu mewarisi 'Tema Dasar'. Dalam kasus kita, kita akan mewarisi tema ' berkelas ' yang merupakan tema inti Drupal. Jadi, kuncinya akan menjadi tema dasar di info.ym l.

 KODE:
tema dasar : berkelas

LANGKAH 6: Sekarang, kita akan mendefinisikan 'wilayah' untuk tema kita. Di info.yml , kita harus mendefinisikannya di bawah kunci 'regions'.

 KODE:
wilayah :
merek : merek
navigasi : Navigasi utama
cari : Cari
unggulan : unggulan
konten : Konten
right_sidebar : Bilah sisi kanan
footer_first : Footer Pertama
footer_second : Footer Detik
footer_third : Footer Ketiga
footer_bottom : Footer Bawah

Di bawah kunci 'wilayah', Anda dapat menentukan wilayah Anda untuk tema Drupal khusus. Di Sini,
branding: Apakah id wilayah yang harus huruf kecil.
Branding : Adalah nama daerah yang bisa huruf besar.

LANGKAH 7 : Setelah kita mendefinisikan wilayah kita untuk tema Drupal kustom kita, kita perlu mengganti page.html.twig untuk mengambil 'wilayah' kita daripada tema berkelas. Kami akan membuat direktori template/sistem di mana kami akan membuat page.html.twig .

 KODE:
< header aria-label ="Site header" class ="header" id ="header" role ="banner" >
{{ halaman.merek }}
{{ halaman.navigasi }}
{{ halaman.penelusuran }}
</ tajuk >
< bagian class ="featured" id ="featured" role ="complementary" >
{{ halaman.fitur }}
</ bagian >
< bagian kelas ="utama" id ="utama" >
< main aria-label ="Konten utama situs" class ="content" id ="content" role ="main" >
{{ halaman.konten }}
</ utama >
< selain class ="right--sidebar" id ="sidebar" role ="pelengkap" >
{{ page.right_sidebar }}
</ ke samping >
</ bagian >
< footer aria-label ="Site footer" class ="footer" id ="footer" role ="contentinfo" >
< div class ="footer--top" >
{{ halaman.footer_first }}
{{ halaman.footer_second }}
{{ halaman.footer_third }}
</ div >
< div class ="footer--bottom" >
{{ halaman.footer_bottom }}
</ div >
</ footer >

Di page.html.twig, kita akan membuat struktur HTML untuk wilayah kita. Seperti yang Anda lihat di {{ page.branding }} – Di sini,

halaman - Apakah kunci untuk merender 'wilayah' di halaman

branding- Apakah wilayah yang telah kita definisikan dalam file info.yml .

Jadi sekarang, kami telah membuat wilayah kami dan merendernya di halaman.

Langkah 8 : Buka Penampilan di situs Drupal Anda. Anda dapat melihat tema Drupal khusus Anda ada di bagian Tema yang dihapus.

Anda perlu mengklik opsi ' Instal dan setel sebagai default ' untuk menginstal tema Drupal Anda di situs.

Setelah terinstal, buka Structure -> Block Layout . Tema Kustom Anda akan muncul di bawah Tata Letak Blok.

Anda akan melihat tautan untuk ' Peragakan daerah blok (Tema Kustom) '. Klik tautan tersebut. Anda dapat melihat semua wilayah yang telah Anda nyatakan di info.yml dan ditambahkan di page.html.twig

Langkah 9 : Anda sekarang hampir selesai dengan tema di Drupal 9! Selanjutnya, Anda perlu menerapkan gaya di CSS untuk setiap wilayah sesuai desain Anda. Kami akan menggunakan CSS dalam hal ini; Anda bahkan dapat menggunakan SCSS jika Anda mau. Cukup periksa wilayah pencitraan merek - Anda akan melihat kelas wilayah dan kemudian menambahkan CSS ke kelas itu.

 . kepala {
 tampilan : fleksibel ;
 justify-content : spasi-antara ;
 bantalan : 10 piksel ;
}


. tajuk . wilayah {
 bantalan : 5 piksel ;
}


. tajuk . branding wilayah {
 fleksibel : 0 1 20 %;
}


. tajuk . navigasi wilayah {
 fleksibel : 0 1 50 %;
}


. tajuk . pencarian wilayah {
 fleksibel : 0 1 30 %;
}


. wilayah . blok-wilayah {
 bantalan : 15 piksel ;
}


. unggulan {
 bantalan : 40 px 20 px ;
 background-warna : indiared ;
}


. utama {
 bantalan : 50 piksel 0 ;
 tampilan : fleksibel ;
 justify-content : spasi-antara ;
}


. utama . konten {
 fleksibel : 0 1 65 %;
}
		



. utama . bilah sisi kanan {
 fleksibel : 0 1 30 %;
}


. footer--atas {
 tampilan : fleksibel ;
 justify-content : spasi-antara ;
 bantalan : 10 piksel ;
}


. footer--atas . wilayah {
 bantalan : 5 piksel ;
}


. region-footer-first , . region-footer-second , . region-footer-ketiga {
 fleksibel : 0 1 30 %;
}

Hasil:

Tema Kustom Drupal 9 Anda sudah siap!

Jika Anda perlu menulis kait atau membuat saran untuk file twig Anda, Anda dapat menambahkan file .theme di tema Drupal kustom Anda (ditunjukkan di bawah).