Bootstrap 4 di Drupal 8/9 dengan Bootstrap Barrio

Kita akan menggunakan Bootstrap 4 di Drupal 8/9 dengan Bootstrap Barrio. Tema Bootstrap Barrio untuk Drupal 8/9 mengintegrasikan Bootstrap 4 (atau Bootstrap 5 jika Anda mau) dengan situs Drupal Anda.

Bootstrap adalah kerangka kerja yang sangat populer untuk membangun situs web. Ini memberi desainer dan pengembang bahasa yang sama untuk berkomunikasi, membuat proses pengembangan jauh lebih mudah.

Membuat subtema Barrio adalah proses yang mudah. Tutorial ini akan mengeksplorasi opsi konfigurasi dasar tema, yang dikelola melalui antarmuka pengguna grafis yang lengkap.

Teruslah membaca untuk mempelajari caranya!

Langkah # 1.- Instal tema

Sebelum memulai, pastikan situs Anda memiliki setidaknya satu artikel, sehingga Anda dapat membuat perbandingan setelah mengubah pengaturan tema. Tempatkan juga blok di dalam bilah sisi wilayah kedua (Struktur > Tata letak blok > Blok tempat).

• Buka aplikasi terminal sistem operasi Anda.
• Tempatkan kursor di root instalasi Drupal Anda.
• Ketik : komposer membutuhkan drupal/bootstrap_barrio

Ini akan mengunduh tema versi stabil terbaru ke: /web/themes/contrib/bootstrap_barrio

Langkah # 2.- Buat Subtema

• Tempatkan kursor pada direktori tema bootstrap_barrio
• Jenis :

 chmod +x scripts/create_subtheme.sh
 ./scripts/create_subtheme.sh

 chmod +x scripts/create_subtheme.sh
 ./scripts/create_subtheme.sh

Ini akan membuat skrip yang disebut create_subtheme di dalam folder skrip dapat dieksekusi, dan juga akan menjalankannya.

Skrip akan meminta nama mesin dan nama deskriptif untuk subtema khusus Anda.

Masukkan nilai yang paling sesuai untuk Anda. Ingat bahwa nama mesin harus huruf kecil dan tidak boleh mengandung spasi.

Langkah ini opsional:

• Buka direktori subtema Anda (/ web/tema/kustom/tema saya) di editor kode
• Ganti semua instance `Bootstrap Barrio` dengan `Name of your theme`
• Simpan semua file

Di sini, kami hanya mengubah teks deskriptif, jadi tidak akan ada masalah sama sekali jika Anda membiarkan ini apa adanya.

Langkah # 3.- Pengaturan Bootstrap Barrio

• Klik Penampilan di bagian belakang situs Drupal Anda
• Gulir ke bawah ke tema khusus Anda
• Klik Instal dan atur sebagai default

Setelah tema diinstal,

• Klik tautan Pengaturan tema

Anda akan melihat sekelompok tab vertikal di sisi kiri layar dengan opsi berikut:

1. Tata letak (tab aktif)
2. Komponen
3. Afiks
4. Gulir Spy
5. Font & ikon
6. warna

tata letak

Secara default adalah tab `Layout` aktif. Opsi pertama `Container` menentukan apakah elemen situs Anda akan memiliki lebar tetap, atau sebaliknya akan ditampilkan di seluruh ukuran layar. Biarkan opsi ini tidak tersentuh sekarang.

Dalam bagian `Wilayah`, dimungkinkan untuk menetapkan kelas CSS khusus ke wilayah situs.

• Tambahkan kelas khusus Anda sendiri ke wilayah tertentu

• Tutup bagian `Wilayah`
• Buka `Posisi bilah sisi`
• Ubah nilai `Sidebars position` ke Left
• Buka `Sidebar first layout` dan `Sidebar first layout`
• Ubah nilainya masing-masing menjadi 3 cols dan 2 cols

Komponen

• Klik tab vertikal `Komponen`
• Ubah elemen Button menjadi format outline
• Centang Terapkan gaya img-fluid ke semua gambar konten

Ini akan membuat gambar yang Anda masukkan melalui tombol gambar editor konten, responsif secara default. Gambar akan diperkecil agar sesuai dengan ukuran layar.

Bagian `Struktur Navbar` berkaitan dengan ukuran wadah navbar. Anda harus membedakan antara dua navbars (navbar-top dan navbar). Navbar adalah menu navigasi utama situs Anda.

• Ubah posisi Navbar ke bagian bawah Tetap dan warna tautan Navbar ke Gelap
• Centang Sliding navbar pada bagian `Navbar behavior`, untuk menampilkan menu utama geser pada layar kecil

3 bagian terakhir dari opsi konfigurasi `Komponen` mengacu pada posisi pesan yang dikirimkan oleh sistem pesan internal Drupal, tab untuk tugas lokal (seperti tab edit konten), dan tampilan elemen formulir. Biarkan opsi ini tidak tersentuh.

Afiks

Dengan afiks, dimungkinkan untuk memperbaiki suatu elemen, yaitu mengatur nilai properti posisi CSS menjadi tetap.

Scrollspy

Scrollspy digunakan untuk memperbarui tautan menu navigasi secara otomatis, berdasarkan posisi kursor, yaitu jika Anda menggulir ke atas atau ke bawah di situs. Topik ini akan dibahas dalam tutorial mendatang.

Font dan Ikon

Di sini Anda memiliki opsi untuk memilih antara kombinasi font Google Font yang berbeda untuk teks situs Anda. Selanjutnya, Anda dapat memilih antara set ikon yang telah ditentukan untuk digunakan pada posting Anda.

• Pilih kombinasi font dan set ikon yang Anda sukai

warna

Anda memiliki opsi di sini untuk menyesuaikan warna pesan internal Drupal. Ada opsi untuk menyesuaikan tabel situs, misalnya tabel yang dibuat dengan modul Views.

Jika Anda terus menggulir ke bawah, Anda akan menemukan `Skema warna` untuk subtema Anda. Anda dapat menyesuaikan teks dan warna latar belakang wilayah tema default.

Anda dapat menyesuaikan warna setiap elemen sesuai keinginan Anda dan memblokirnya, dengan menggunakan ikon kunci.

Tampilan Elemen Halaman, Gambar Logo, dan Favicon

Ini adalah opsi default di semua tema Drupal.

Muat Perpustakaan

Anda dapat memilih di antara beberapa perpustakaan Bootswatch online siap pakai untuk menyempurnakan tampilan dan nuansa tema Anda hanya dengan satu klik. Opsi-opsi ini layak untuk diperiksa.

Dimungkinkan untuk memilih di sini jika Anda ingin memuat Bootstrap (Bootstrap CSS dan JS) secara lokal atau melalui CDN. Konfigurasi ini tidak boleh diubah di sini. Jauh lebih baik untuk mengubah kode di file .info.yml .

• Klik Simpan konfigurasi

Lihatlah situs Anda. Tutorial ini tidak bermaksud untuk mengajari Anda desain UI, melainkan menjelaskan kemungkinan yang tersedia dengan tema Barrio.

Namun, Anda sekarang dapat memulai dari sebuah desain dan mencoba menyesuaikan tema dengannya.

Saya harap Anda menyukai tutorial ini. Terima kasih sudah membaca!