Grav - Tema Özelleştirme

Bu bölümde, bunun hakkında çalışalım Theme Customization. Temanızı özelleştirmenin birkaç yolu vardır. Grav, temanızı kolayca özelleştirmek için birçok özellik ve birkaç işlev sunar.

Özel CSS

Kendiniz temin edebilirsiniz custom.csstemanızı özelleştirmek için dosya. Antimadde teması,css/custom.css kullanarak dosya Asset Manager. CSS dosyasına herhangi bir referans bulunmazsa,Asset Managerreferansı HTML'ye eklemeyecektir. CSS dosyasını Antimadde'de oluşturmacss/klasörü varsayılan CSS'yi geçersiz kılar. Örneğin -

custom.css

body a {
   color: #FFFF00;
}

Varsayılan bağlantı rengi geçersiz kılınır ve sarıya ayarlanır.

Özel SCSS / LESS

Özel CSS dosyası sağlamanın başka bir yolu da custom.scssdosya. SCSS (Sözdizimsel Müthiş Style Sheets) Eğer operatörler, değişkenler, iç içe yapılar, ithalat, partials kullanımı yoluyla verimli CSS inşa etmek ve karıştırmak-ins sağlayan bir CSS önişlemci olduğunu. Antimadde SCSS kullanılarak yazılmıştır.

SCSS'yi kullanmak için SCSS derleyicisine ihtiyacınız vardır. SCSS derleyicilerini herhangi bir platforma yüklemek için komut satırı araçlarını ve GUI uygulamalarını kullanabilirsiniz. Antimadde,scss/ tüm yerleştirmek için klasör .scssDosyalar. Derlenen dosyalar şurada saklanır:css-compiled/ Klasör.

SCSS dosyalar aşağıdaki komut kullanılarak yapılabilecek herhangi bir güncelleme için izlenmelidir -

scss --watch scss:css-compiled

Yukarıdaki komut, SCSS derleyicisine scss adlı dizini ve her ne zaman css-compiled klasör güncellenir, SCSS derleyicisinin derlemesi gerekir.

Özel SCSS kodunuzu şurada tutabilirsiniz: scss/template/_custom.scssdosya. Kodunuzu bu dosyada tutmanın birçok avantajı vardır.

SCSS dosyalarından ve diğer CSS dosyalarından yapılan herhangi bir güncelleme şu şekilde derlenir: css-compiled/template.css dosya
Temanızda kullanılan herhangi bir SCSS'ye erişebilir ve bunun için mevcut tüm değişkenleri ve karışımları kullanabilirsiniz.
Daha kolay geliştirme için, standart SCSS'nin tüm özelliklerine ve işlevlerine erişim sağlanır.

Bir örnek _custom.scss dosya aşağıda gösterilmektedir -

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

Temanızı yükselttiğinizde, tüm özel css geçersiz kılınacaktır. Bu, bir temayı özelleştirmek için bu yolu seçmenin en büyük dezavantajıdır. Bu, tema kalıtımı kullanılarak çözülebilir.

Tema Kalıtımı

Theme Inheritancebir temayı değiştirmenin veya özelleştirmenin en iyi yoludur ve birkaç kurulumla gerçekleştirilebilir. Temel fikir, temanın miras aldığınız temel tema olarak tanımlanması ve yalnızca bazı bitlerin değiştirilebilmesi ve geri kalan şeylerin temel tema tarafından ele alınmasıdır. Tema kalıtımını kullanmanın avantajı, özelleştirilmiş miras alınan temanın, temel tema her güncellendiğinde doğrudan etkilenmemesidir. Bunu başarmak için aşağıdaki adımları izlemeniz gerekir.

Yeni temanızı saklamak için adlı yeni bir klasör oluşturun. mytheme/ içeride /user/themes/ Klasör.
Ardından, adında yeni bir tema YAML dosyası oluşturmanız gerekir. mytheme.yaml yeni oluşturulan altında /user/themes/mytheme/ aşağıdaki içeriğe sahip klasör.

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

Adlı bir YAML dosyası oluşturun blueprints.yaml altında /user/themes/mytheme/ aşağıdaki içeriğe sahip klasör.

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

Şimdi bir temanın nasıl tanımlanacağını anlayacağız blueprints.yamltemel unsurlardan oluşur. Form işlevlerinizi kontrol etmek için form tanımları için daha fazla ayrıntı sağlanabilir. blueprints.yaml dosya bununla ilgili daha fazla ayrıntı için incelenebilir.

Senin içinde user/config/system.yaml dosya düzenleme pages: theme: Varsayılan temanızı aşağıda gösterildiği gibi yeni temayla değiştirme seçeneği.

pages:
   theme: mytheme

Şimdi yeni tema oluşturuldu ve Antimadde bu yeni için temel tema olacak mythemetema. Belirli SCSS'yi değiştirmek istiyorsanız, SCSS derleyicisini sizinmytheme tema ilk ve ikinci olarak Antimadde teması.

Aşağıdaki ayarları kullanır -

İlk önce template.scss yerleştirilen dosya antimatter/scss/ klasörüne yapıştırın ve mytheme/scss/Klasör. Bu dosya tüm@import gibi çeşitli dosyalar için çağrılar template/_custom.scss ve alt dosyalar.
load-path noktalar antimatter/scss/çok sayıda SCSS dosyası içeren klasör. SCSS derleyicisini çalıştırmak için şunları sağlamanız gerekir:load-path to it as shown below.

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

Şimdi adlı bir dosya oluşturun _custom.scss altında mytheme/scss/template/. Bu dosya tüm değişikliklerinizi içerecektir.

Özel SCSS dosyası değiştirildiğinde, tüm SCSS dosyaları otomatik olarak yeniden derlenecektir. template.css altında bulunan mytheme/css-compiled/ klasör ve daha sonra Grav bunu doğru bir şekilde referans verir.