Grav - Kustomisasi Tema

Dalam bab ini, mari kita pelajari Theme Customization. Ada beberapa cara untuk menyesuaikan tema Anda. Grav menyediakan banyak fitur dan beberapa fungsi untuk menyesuaikan tema Anda dengan mudah.

CSS Kustom

Anda bisa menyediakan sendiri custom.cssfile untuk menyesuaikan tema Anda. Tema Antimateri mengacu padacss/custom.css mengajukan melalui penggunaan Asset Manager. Jika tidak ada referensi ke file CSS yang ditemukan, maka fileAsset Managertidak akan menambahkan referensi ke HTML. Membuat file CSS di Antimatter'scss/folder akan menimpa CSS default. Misalnya -

custom.css

body a {
   color: #FFFF00;
}

Warna tautan default diganti dan disetel ke kuning.

SCSS Kustom / KURANG

Cara lain untuk menyediakan file CSS khusus adalah dengan menggunakan custom.scssmengajukan. The SCSS (Sintaksis mengagumkan Style Sheets) adalah preprocessor CSS yang memungkinkan Anda untuk membangun CSS efisien melalui penggunaan operator, variabel, struktur bersarang, impor, parsial dan campuran-ins. Antimateri ditulis menggunakan SCSS.

Untuk menggunakan SCSS, Anda memerlukan compiler SCSS. Anda dapat menggunakan alat baris perintah dan aplikasi GUI untuk menginstal kompiler SCSS pada platform apa pun. Antimateri menggunakanscss/ folder untuk menempatkan semua file .scssfile. File yang dikompilasi disimpan dicss-compiled/ map.

Itu SCSS file harus diawasi untuk setiap pembaruan yang dapat dilakukan dengan menggunakan perintah berikut -

scss --watch scss:css-compiled

Perintah di atas memberi tahu compiler SCSS untuk mengawasi direktori bernama scss dan kapan pun file css-compiled folder diperbarui compiler SCSS harus mengkompilasinya.

Anda dapat menyimpan kode SCSS kustom Anda scss/template/_custom.scssmengajukan. Ada banyak keuntungan menyimpan kode Anda di file ini.

Setiap pembaruan dari file SCSS dan file CSS lainnya dikompilasi menjadi css-compiled/template.css mengajukan
Anda dapat mengakses SCSS mana pun yang digunakan dalam tema Anda dan memanfaatkan semua variabel dan campuran yang tersedia untuk itu.
Untuk pengembangan yang lebih mudah, Anda diberikan akses ke semua fitur dan fungsi SCSS standar.

Contoh dari _custom.scss file ditampilkan di bawah -

body {
   a {
      color: darken($core-accent, 20%);
   }
}

Saat Anda meningkatkan tema Anda, semua css khusus akan diganti. Ini adalah kelemahan utama dalam memilih cara menyesuaikan tema ini. Ini dapat diselesaikan dengan menggunakan pewarisan tema.

Pewarisan Tema

Theme Inheritanceadalah cara terbaik untuk mengubah atau menyesuaikan tema dan dapat dilakukan dengan beberapa pengaturan. Ide dasarnya adalah bahwa sebuah tema didefinisikan sebagai tema dasar yang Anda warisi, dan hanya beberapa bit yang dapat dimodifikasi dan sisanya ditangani oleh tema dasar. Keuntungan menggunakan pewarisan tema adalah tema yang diwariskan yang disesuaikan tidak akan langsung terpengaruh setiap kali tema dasar diperbarui. Untuk mencapai ini, Anda perlu mengikuti langkah-langkah berikut.

Untuk menyimpan tema baru Anda, buat folder baru bernama mytheme/ dalam /user/themes/ map.
Selanjutnya Anda perlu membuat file YAML tema baru bernama mytheme.yaml di bawah yang baru dibuat /user/themes/mytheme/ folder dengan konten berikut.

streams:
   schemes:
      theme:
         type: ReadOnlyStream
         prefixes:
            '':
               - user/themes/mytheme
               - user/themes/antimatter

Buat file YAML bernama blueprints.yaml di bawah /user/themes/mytheme/ folder dengan konten berikut.

name: MyTheme
version: 1.0.0
description: "Extending Antimatter"
icon: crosshairs
author:
   name: Team Grav
   email: [email protected]
   url: http://getgrav.org

Sekarang kita akan mengerti bagaimana mendefinisikan sebuah tema blueprints.yamlyang terdiri dari elemen dasar. Detail selengkapnya dapat diberikan untuk definisi formulir untuk mengontrol fungsionalitas formulir Anda. Itublueprints.yaml file dapat diperiksa untuk lebih jelasnya tentang ini.

Dalam Anda user/config/system.yaml edit file pages: theme: pilihan untuk mengubah tema default Anda menjadi tema baru seperti yang ditunjukkan di bawah ini.

pages:
   theme: mytheme

Sekarang tema baru dibuat dan Antimateri akan menjadi tema dasar untuk yang baru ini mythemetema. Jika Anda ingin memodifikasi SCSS tertentu, kami perlu mengkonfigurasi compiler SCSS agar terlihat seperti milik Andamytheme tema pertama dan kedua tema Antimateri.

Ini menggunakan pengaturan berikut -

Pertama, salin template.scss file yang ditempatkan di antimatter/scss/ folder dan tempel di mytheme/scss/map. File ini akan berisi semua@import panggilan untuk berbagai file seperti template/_custom.scss dan sub file.
Itu load-path menunjuk ke antimatter/scss/folder yang berisi file SCSS dalam jumlah besar. Untuk menjalankan compiler SCSS, Anda perlu menyediakanload-path to it as shown below.

scss --load-path ../antimatter/scss --watch scss:css-compiled

Sekarang, buat file bernama _custom.scss dibawah mytheme/scss/template/. File ini akan berisi semua modifikasi Anda.

Ketika file SCSS kustom diubah, secara otomatis semua file SCSS akan di-compile lagi menjadi template.css yang terletak di bawah mytheme/css-compiled/ folder dan kemudian Grav mereferensikan ini secara akurat.