Grav - Varlık Yöneticisi

Bu bölümde şunun hakkında çalışalım Asset Manager. Asset Manager, benzer varlıkları eklemek ve yönetmek için arayüzü birleştirmek için Grav 0.9.0'da tanıtıldı.JavaScript ve CSS. Bu varlıkları temalardan ve eklentilerden eklemek, aşağıdaki gibi gelişmiş yetenekler sağlayacaktır:ordering ve Asset Pipeline. Asset Pipeline varlıkları küçültmek ve sıkıştırmak için kullanılır, böylece tarayıcının gereksinimlerini azaltır ve ayrıca varlıkların boyutunu azaltır.

Asset Manager bir sınıftır ve Grav'da eklenti olay kancaları aracılığıyla kullanılabilir. Twig çağrılarını kullanarak Asset Manager sınıfını doğrudan temalarda da kullanabilirsiniz.

Yapılandırma

Varlık Yöneticisi, bir dizi yapılandırma seçeneğinden oluşur. system.yamldosya varsayılan değerleri içerir; bu değerleri geçersiz kılabilirsiniz.user/config/system.yaml dosya.

assets:                     # Configuration for Assets Manager (JS, CSS)
   css_pipeline: false      # The CSS pipeline is the unification of multiple CSS resources into one file
   css_minify: true         # Minify the CSS during pipelining
   css_rewrite: true        # Rewrite any CSS relative URLs during pipelining
   js_pipeline: false       # The JS pipeline is the unification of multiple JS resources into one file
   js_minify: true          # Minify the JS during pipelining

Temalardaki Varlıklar

Grav'ı yüklediğinizde antimadde teması varsayılan tema olarak gelir. CSS dosyalarının nasıl ekleneceğine dair bir örnek gösterir.base.html.twig Bu temada bulunan dosya.

{% block stylesheets %}
   {% do assets.addCss('theme://css/pure-0.5.0/grids-min.css', 103) %}
   {% do assets.addCss('theme://css-compiled/nucleus.css',102) %}
   {% do assets.addCss('theme://css-compiled/template.css',101) %}
   {% do assets.addCss('theme://css/custom.css',100) %}
   {% do assets.addCss('theme://css/font-awesome.min.css',100) %}
   {% do assets.addCss('theme://css/slidebars.min.css') %}

   {% if browser.getBrowser == 'msie' and browser.getVersion == 10 %}
      {% do assets.addCss('theme://css/nucleus-ie10.css') %}
   {% endif %}
   {% if browser.getBrowser == 'msie' and browser.getVersion >= 8 and browser.getVersion <= 9 %}
      {% do assets.addCss('theme://css/nucleus-ie9.css') %}
      {% do assets.addJs('theme://js/html5shiv-printshiv.min.js') %}
   {% endif %}
{% endblock %}
{{ assets.css() }}

Yukarıdaki kod aşağıda kısaca açıklanmıştır.

• İçinde tanımlanan bölge block twig etiketi, birini genişleten şablonlarda değiştirilebilir veya eklenebilir ve sayısını görebilirsiniz. do assets.addCss() bu bloğun içindeki çağrılar.

• {% do %} etiketi, Twig'in kendisinde yerleşik olan herhangi bir çıktı olmadan değişkenleri işlemenizi sağlar.

• CSS varlıkları kullanılarak Varlık Yöneticisine eklenebilir addCss()yöntem. İkinci parametre olarak sayısal bir değer ileterek stil sayfalarının önceliğini ayarlayabilirsiniz. ÇağrıaddCss() yöntemi, HTML etiketlerini CSS öğelerinden oluşturur.

JavaScript varlıkları, CSS varlıkları ile aynı şekilde kullanılır. İçindeki JavaScript varlıklarıblock etiketleri aşağıda gösterildiği gibi daldırın.

{% block javascripts %}
   {% do assets.addJs('jquery',101) %}
   {% do assets.addJs('theme://js/modernizr.custom.71422.js',100) %}
   {% do assets.addJs('theme://js/antimatter.js') %}
   {% do assets.addJs('theme://js/slidebars.min.js') %}
   {% do assets.addInineJs('alert(\'This is inline!\')') %}
{% endblock %}
{{ assets.js() }}

Varlık Ekleme

Aşağıdaki tablo, farklı ekleme yöntemlerini listeler -

Sr.No.	Yöntem ve Açıklama
1	add(asset, [options]) Dosya uzantısına bağlı olarak, addyöntem varlıkla eşleşir. CSS veya JS için doğrudan yöntemlerden birini çağırmak için uygun bir yöntemdir. Kullanabilirsinizoptionsönceliği ayarlamak için. Bir varlığın kombinasyon / küçültme ardışık düzenine dahil edilip edilmeyeceği, ardışık düzen özelliği tarafından kontrol edilir.
2	addCss(asset, [options]) Bu yöntemi kullanarak CSS varlıklarına varlıklar ekleyebilirsiniz. İkinci parametrede belirlenen önceliğe göre, varlık listede sıralanır. Öncelik ayarlanmadıysa, varsayılan olarak 10 ayarlanır. Bir varlığın kombinasyon / küçültme ardışık düzenine dahil edilip edilmeyeceği, ardışık düzen özelliği tarafından kontrol edilir.
3	addDirCss(directory) Bu yöntemi kullanarak, alfabetik sıraya göre düzenlenecek CSS varlıklarından oluşan bir varlık dizini ekleyebilirsiniz.
4	addInlineCss(css, [options]) Bu yöntemi kullanarak satır içi stil etiketinin içinde bir CSS dizisi sağlayabilirsiniz.
5	addJs(asset, [options]) Bu yöntemi kullanarak, JS varlıklarına varlıklar ekleyebilirsiniz. Öncelik ayarlanmadıysa, varsayılan önceliği 10 olarak ayarlar. Ardışık düzen özniteliği, bir varlığın birleşim / küçültme ardışık düzenine dahil edilip edilmeyeceğini belirler.
6	addInlineJs(javascript, [options]) Bu yöntem, satır içi komut dosyası etiketinin içine bir JS dizesi eklemenize olanak tanır.
7	addDirJs(directory) Bu yöntemi kullanarak, alfabetik sıraya göre düzenlenecek olan JS varlıklarından oluşan bir varlık dizini ekleyebilirsiniz.
8	registerCollection(name, array) Bu yöntem, bir adla CSS veya JS varlıklarından oluşan bir diziyi kaydetmenize olanak tanır, böylece daha sonra add()yöntem. Birden fazla tema veya eklenti kullanıyorsanız, bu yöntem çok kullanışlıdır.

Seçenekler

Aşağıda gösterildiği gibi açıklanan varlık dizisini geçirmek için birçok seçenek vardır -

CSS için

• priority - Bir tamsayı değeri alır ve varsayılan değer 100 olacaktır.

• pipeline - Bir varlık boru hattına dahil edilmediğinde, şu şekilde ayarlanır: falsedeğer. Ve varsayılan değer şu şekilde ayarlanmıştır:true.

JS için

• priority - Tamsayı değeri alır ve varsayılan değer 100 olur.

• pipeline - Bir varlık boru hattına dahil edilmediğinde, falseayarlandı. Ve varsayılan değer şu şekilde ayarlanmıştır:true.

• loading - Bu seçenek aşağıdaki gibi 3 değeri destekler empty, async ve defer.

• group- Bir grup için benzersiz ad belirten bir dizeden oluşur. Ve varsayılan değer şu şekilde ayarlanmıştır:true.

Example

{% do assets.addJs('theme://js/example.js', 
{'priority':101, 'pipeline':true, 'loading':'async', 'group':'top'}) %}

Varlıkları Oluşturma

CSS ve JS varlıklarının mevcut durumu aşağıdakiler kullanılarak oluşturulabilir -

css ()

Varlık Yöneticisine eklenen tüm CSS varlıklarına bağlı olarak, css()yöntemi, HTML CSS bağlantı etiketlerinden oluşan bir liste oluşturur. Ardışık düzen özniteliğine bağlı olarak liste, küçültülmüş dosya ve tekil / birleşik varlık içerebilir.

js ()

Varlık Yöneticisine gönderilen tüm JS varlıklarına göre, js()yöntemi, HTML JS bağlantı etiketlerinden oluşan bir liste oluşturur. Ardışık düzen özniteliğine bağlı olarak liste, küçültülmüş dosya ve tekil / birleşik varlık içerebilir.

Adlandırılmış Varlıklar

Grav, bir adla birlikte CSS ve JS varlıklarından oluşan bir koleksiyon kaydetmenize olanak tanır, böylece addvarlıkları kayıtlı adı kullanarak Varlık Yöneticisine. Bu, Grav'da adı verilen bir özellik kullanılarak gerçekleştirilebilir.named assets. Bu özel koleksiyonlar şurada tanımlanır:system.yaml; koleksiyonlar herhangi bir tema veya eklenti tarafından kullanılabilir.

assets:
   collections:
      jquery: system://assets/jquery/jquery-2.1.3.min.js
      bootstrap:
         - https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css
         - https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css
         - https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js

registerCollection() yöntem, aşağıdaki kodla programlı olarak kullanılabilir -

$assets = $this->Grav['assets'];
   $bootstrapper_bits = [https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css,
      https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css,
      https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js];
   $assets->registerCollection('bootstrap', $bootstrap_bits);
$assets->add('bootstrap', 100);

Gruplanmış Varlıklar

Grav 0.9.43 adında yeni bir özellikle tanıtıldı Grouped Assetsisteğe bağlı seçeneklerden oluşan seçenekler dizisini geçmenizi sağlar groupVarlıklar eklerken. Bu özellik, sayfanın belirli bir bölümünde bazı JS dosyalarına veya satır içi JS'ye ihtiyacınız olduğunda çok kullanışlıdır.

Seçenekler sözdizimini kullanarak, varlığı eklerken aşağıda gösterildiği gibi grubu belirtmeniz gerekir.

{% do assets.addJs('theme://js/example.js', {'priority':102, 'group':'bottom'}) %}

Bir varlık için grup ayarlanmadıysa, o zaman headvarsayılan grup olarak ayarlanmıştır. Bu varlıkların alt grupta görüntülenmesini istiyorsanız, temanıza aşağıdakileri eklemelisiniz.

{{ assets.js('bottom') }}

Statik Varlıklar

Varlık Yöneticisi'ni kullanmadan varlıkları önermek istediğinizde, o zaman url()yardımcı yöntem. Örneğin, temadan bir resme başvurmak istediğinizde, aşağıdaki sözdizimini kullanabilirsiniz.

<img src = "{{ url("theme://" ~ widget.image) }}" alt = "{{ widget.text|e }}" />

url() helper method isteğe bağlı olarak ikinci parametreyi kullanarak URL'nin etki alanını ve şemayı içermesini sağlar. true veya falsedeğerler. Varsayılan olarak değer şu şekilde ayarlanmıştır:false yalnızca göreli URL'yi görüntüleyen.

Example

url("theme://somepath/mycss.css", true)