lifelong learner — urip iku urup, currently working on accenture.

Cara membuat tema custom pada drupal 8 – 2. Struktur file dan folder

0
Degananda.com -

Setelah pada bagian sebelumnya kita membuat theme.info.yml yang berfungsi untuk mendaftarkan tema yang kita miliki agar dapat dikenali oleh drupal maka langkah selanjutnya adalah menuliskan tema custom yang akan kita buat. Tentunnya didalamnya pasti terdapat berbagai file mulai dari yml yang berfungsi sebagai konfigurasi, css untuk styling , js(javascript) untuk membuat interaksi pada browser , twig untuk melakukan templating dan terahir php sebagai controller.

Jika anda belum familiar dengan beberapa istilah diatas tidak perlu khawatir cukup ikuti ulasan ini dan melihat contoh pengaplikasiannya.

untuk mengaplikasikan file-file tersebut kita akan membuat struktur folder dan file yang dibutuhkan dalam membuat custom theme pada drupal yakni

folder

  1. folder “js” untuk menyimpan file javascript
  2. folder “css” untuk menyimpan file css sebagai styling

file

  1. file.libraries.yml  terkait dengan manajemen library yang kita gunakan, contohnya untuk mengakomodasi css dan js yang terdapat di folder “js” dan “css” kita dapat mengaturnya melalui file.libraries.yml

penamaan file yml harus diawali dengan nama tema. Tema yang kami buat adalah vividgray maka nama file librariesnya adalah vividgray.libraries.yml.

Sebenarnya terdapat beberapa file lain seperti breakpoint.yml , themes.yml yang juga dapat kita gunakan untuk mengkonfigurasi tema namun untuk pembahasan kali ini hanya berfokus pada hal-hal dasar yakni info.yml dan libraries.yml

Sehingga sturktur project dari custom theme drupal ini adalah sebagai berikut ini

Menggunakan css dan js

untuk dapat menggunakan style.css dan vivid.js yang telah kita buat maka kita harus melakukan konfigurasi pada vividgray.libraries.yml serta vividgray.info.yml.  Perubahan-perubahan tersebut dilakukan agar drupal dapat mengetahui bahwa tema kita akan menggunakan file style.css dan vivid.js

tuliskan kode dibawah ini agar drupal dapat mengetahui bahwa tema kita akan menggunakan custom css dan javascript.

libraries:
  - vividgray/vividgray-styling

sesuaikan dengan konfigurasi tema anda. Sehingga hasil ahir file vividgray.info.yml yang kita buat adalah sebagai berikut ini

name: vividgray
description: custom theme drupal that use gray as base color.
package: custom
type: theme
core: 8.x
libraries:
  - vividgray/vividgray-styling

format penulisan libraries adalah

nama_folder_tema/nama_styling

nama styling ini akan kita gunakan dalam menetukan lokasi libraries kita pada file vividgray.libraries.yml.

kita dapat memiliki lebih dari satu style yang dapat diaplikasikan ke berbagai komponen lain baik itu tema ataupun module.

Menambahkan libraries pada vividgray.info.yml

tambahkan line dibawah ini untuk mendaftarkan folder yang kita gunakan untuk menyimpan libraries.

menentukan lokasi file css dan js yang digunakan tema

untuk menentukan lokasi file css dan js yang kita gunakan pada tema maka buka file vividgray.libraries.yml dan tuliskan baris kode berikut ini

vividgray-styling:
  version: 1.x
  css:
    theme:
      css/style.css: {}
  js:
    js/vivid.js: {}

tentunnya silahkan sesuaikan dengan konfigurasi tema yang anda inginkan. Terdapat beberapa catatan disini

  1. curly brakcet (“{}”) berfungsi untuk opsi yang kita gunakan saat memanggil file js ataupun css tersebut. Misalkan kita ingin menonaktifkan preprocessing terhadap kedua file tersebut kita dapat tambahkan opsi : preprocess : false. Namun untuk saat ini kita tidak perlu memberikan opsi apapun didalam curly brakcet tersebut
  2. “vividgray-styling” kita dapatkan dari nilai libraries yang ada pada file vividgray.info.yml