Instalasi Drupal 8 Theme

Berbeda dengan Drupal 7 yang hanya menggunakan PHP, Drupal 8 membawa Symfony sebagai dasarnya. Oleh karena itu, Drupal 8 menggunakan twig untuk pembuatan template.

Berikut ini akan saya jelaskan mengenai pembuatan theme di Drupal 8.

Membuat .info.yml

File ini harus ada ketika Anda membuat suatu theme. File ini berfungsi sebagai:

  • Untuk memberitahu Drupal tentang adanya tema custom.
  • Deklarasi file global yang nantinya dipanggil disemua halaman website.
  • Untuk memberitahu Drupal tentang region apa saja yang digunakan dalam tampilan website.

Contoh: sebuah theme Hello World, memiliki file hello_world.info.yml yang berisi informasi sebagai berikut:

https://gist.github.com/andreas-wijaya/4ad0940a87e57523c7dbb940497752f4

Pada contoh di atas untuk bagian name, type dan core harus ada agar sebuah theme dapat dikenali. Variable penting lain yang biasanya ada di dalam file tersebut adalah libraries dan regions.

Libraries digunakan untuk deklarasi file javascript dan css yang akan digunakan secara global. penjabaran mengenai libraries ini akan dijelaskan di file .libraries.yml.

Regions digunakan untuk deklarasi block yang akan digunakan dalam website tersebut. Block ini berisi konten HTML yang ingin ditempelkan di suatu halaman ataupun beberapa halaman, contohnya seperti search box, menu, dan produk lain-lain.

Membuat .libraries.yml

File ini digunakan untuk memasang css dan javascript yang diperlukan di theme. Silahkan pasang css dan javascript yang akan dipanggil di semua halaman di global-styling dan global-js. Anda juga dapat memasang file yang hanya dibutuhkan di halaman tertentu saja disini dan dipanggil melalui .theme atau template.

Contoh : Memasang global styling dan javascript untuk theme Hello World.

https://gist.github.com/andreas-wijaya/1349b8df2b52610f8b18798a4b32692f

Selain untuk deklarasi global file yang dipanggil di semua halaman, file ini digunakan untuk memasang file khusus di halaman tertentu, yang nantinya dapat dipanggil melalui file .theme atau melalui page.html.twig.

Contoh :

Membuat .theme

File ini digunakan untuk memodifikasi fungsi Drupal dalam menampilkan template. Theme memiliki banyak fungsi dalam modifikasi fungsi Drupal, seperti memasang javascript khusus untuk halaman tertentu, memasang custom template hanya untuk halaman tertentu, dan menambah custom variable untuk halaman tertentu.

Contoh: Memasang tampilan custom untuk halaman about us pada theme Hello World.

https://gist.github.com/andreas-wijaya/6d3cd2d5e434e3fa262733293211f9c1

Setelah membuat 3 file penting ini, theme Anda telah tampil dan bisa Anda aktifkan di website. Namun untuk membuat tampilan yang sesuai dengan keinginan Anda untuk website tersebut, Anda perlu menyiapkan template tambahan seperti page.html.twig dan node.html.twig.

Penjelasan lebih lanjut mengenai templating Drupal 8 ini, akan saya jelaskan di artikel saya selanjutnya. :)

Salam Ganteng,

Andreas Wijaya