Grav - Manajer Aset

Dalam bab ini mari kita pelajari Asset Manager. Asset Manager diperkenalkan di Grav 0.9.0 untuk menyatukan antarmuka untuk menambahkan dan mengelola aset sepertiJavaScript dan CSS. Menambahkan aset ini dari tema dan plugin akan memberikan kemampuan lanjutan sepertiordering dan Asset Pipeline. ItuAsset Pipeline digunakan untuk mengecilkan dan mengompresi aset sehingga mengurangi persyaratan browser dan juga mengurangi ukuran aset.

Asset Manager adalah sebuah kelas dan tersedia untuk digunakan di Grav melalui plugin event hooks. Anda juga dapat menggunakan kelas Asset Manager secara langsung di tema dengan menggunakan panggilan Twig.

Konfigurasi

Asset Manager terdiri dari serangkaian opsi konfigurasi. Itusystem.yamlfile berisi nilai default; Anda dapat mengganti nilai ini diuser/config/system.yaml mengajukan.

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

Aset dalam Tema

Tema antimateri hadir sebagai tema default saat Anda menginstal Grav. Ini menunjukkan contoh bagaimana menambahkan file CSS di filebase.html.twig file yang berada di tema ini.

{% 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() }}

Kode di atas dijelaskan secara singkat di bawah ini.

  • Wilayah yang ditentukan di block tag ranting dapat diganti atau ditambahkan ke dalam template yang memperpanjang satu dan Anda dapat melihat jumlahnya do assets.addCss() panggilan di dalam blok ini.

  • Itu {% do %} tag memungkinkan Anda menangani variabel tanpa keluaran apa pun yang dibangun ke dalam Twig itu sendiri.

  • Aset CSS dapat ditambahkan ke Asset Manager dengan menggunakan addCss()metode. Anda dapat menyetel prioritas stylesheet dengan meneruskan nilai numerik sebagai parameter kedua. Panggilan keaddCss() metode merender tag HTML dari aset CSS.

Aset JavaScript digunakan dengan cara yang sama seperti aset CSS. Aset JavaScript di dalamblock tag ranting seperti yang ditunjukkan di bawah ini.

{% 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() }}

Menambahkan Aset

Tabel berikut mencantumkan berbagai jenis metode penambahan -

Sr.No. Metode & Deskripsi
1

add(asset, [options])

Berdasarkan ekstensi file, file addmetode cocok dengan aset. Ini adalah metode yang tepat untuk memanggil salah satu metode langsung untuk CSS atau JS. Anda bisa memanfaatkanoptionsuntuk mengatur prioritas. Apakah suatu aset harus disertakan dalam kombinasi / minify pipeline atau tidak, dikontrol oleh atribut pipeline.
2

addCss(asset, [options])

Dengan menggunakan metode ini, Anda dapat menambahkan aset ke aset CSS. Berdasarkan prioritas yang ditetapkan di parameter kedua, aset diurutkan dalam daftar. Jika tidak ada prioritas yang ditetapkan, maka secara default 10 ditetapkan. Apakah suatu aset harus disertakan dalam kombinasi / minify pipeline atau tidak, dikontrol oleh atribut pipeline.
3

addDirCss(directory)

Dengan menggunakan metode ini, Anda dapat menambahkan direktori entitas yang terdiri dari aset CSS yang akan diatur dalam urutan abjad.
4

addInlineCss(css, [options])

Anda dapat memberikan string CSS di dalam tag gaya sebaris dengan menggunakan metode ini.
5

addJs(asset, [options])

Dengan menggunakan metode ini, Anda dapat menambahkan aset ke aset JS. Jika prioritas tidak ditetapkan, maka prioritas default ditetapkan ke 10. Atribut pipeline menentukan apakah aset harus disertakan dalam kombinasi / minify pipeline atau tidak.
6

addInlineJs(javascript, [options])

Metode ini memungkinkan Anda untuk menambahkan string JS di dalam tag skrip sebaris.
7

addDirJs(directory)

Dengan menggunakan metode ini, Anda dapat menambahkan direktori entitas yang terdiri dari aset JS, yang akan disusun dalam urutan abjad.
8

registerCollection(name, array)

Metode ini memungkinkan Anda untuk mendaftarkan array yang terdiri dari aset CSS atau JS dengan sebuah nama sehingga dapat digunakan nanti dengan menggunakan add()metode. Jika Anda menggunakan banyak tema atau plugin, maka metode ini sangat berguna.

Pilihan

Ada banyak opsi untuk meneruskan berbagai aset yang dijelaskan seperti yang ditunjukkan di bawah ini -

Untuk CSS

  • priority - Dibutuhkan nilai integer dan nilai default adalah 100.

  • pipeline - Ketika aset tidak termasuk dalam pipa, itu diatur ke falsenilai. Dan nilai default disetel ketrue.

Untuk JS

  • priority - Mengambil nilai integer dan nilai default adalah 100.

  • pipeline - Ketika aset tidak termasuk dalam pipa, falsesudah diatur. Dan nilai default disetel ketrue.

  • loading - Opsi ini mendukung 3 nilai seperti empty, async dan defer.

  • group- Terdiri dari string yang menentukan nama unik untuk grup. Dan nilai default disetel ketrue.

Example

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

Merender Aset

Status aset CSS dan JS saat ini dapat dirender dengan menggunakan berikut ini -

css ()

Berdasarkan semua aset CSS yang telah ditambahkan ke Asset Manager, file css()metode membuat daftar yang terdiri dari tag link HTML CSS. Berdasarkan atribut pipeline, daftar dapat berisi file yang diperkecil dan aset individu / gabungan.

js ()

Berdasarkan semua aset JS yang telah dimiliki oleh Asset Manager, file js()metode membuat daftar yang terdiri dari tag tautan JS HTML. Berdasarkan atribut pipeline, daftar dapat berisi file yang diperkecil dan aset individu / gabungan.

Aset Bernama

Grav memungkinkan Anda mendaftarkan koleksi aset CSS dan JS dengan sebuah nama, sehingga Anda dapat menggunakan file addaset ke Asset Manager dengan menggunakan nama terdaftar. Ini dapat dilakukan di Grav dengan menggunakan fitur bernamanamed assets. Koleksi kustom ini ditentukan disystem.yaml; koleksi dapat digunakan oleh tema atau plugin apa pun.

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

Itu registerCollection() metode dapat digunakan secara terprogram dengan kode berikut -

$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);

Aset yang Dikelompokkan

Grav 0.9.43 diperkenalkan dengan fitur baru yang disebut Grouped Assets, yang memungkinkan Anda melewatkan larik opsi yang terdiri dari opsional groupsambil menambahkan Aset. Fitur ini sangat berguna ketika Anda membutuhkan beberapa file JS atau JS sebaris di bagian halaman tertentu.

Dengan menggunakan sintaks opsi, Anda harus menentukan grup saat menambahkan aset seperti yang ditunjukkan di bawah ini.

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

Jika tidak ada grup yang ditetapkan untuk suatu aset, maka headditetapkan sebagai grup default. Jika Anda ingin aset ini dirender di grup terbawah, Anda harus menambahkan yang berikut ini di tema Anda.

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

Aset Statis

Kapanpun Anda ingin mereferensikan aset tanpa menggunakan Asset Manager, Anda dapat menggunakan url()metode pembantu. Misalnya, ketika Anda ingin mereferensikan gambar dari tema, maka Anda dapat menggunakan sintaks berikut.

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

Itu url() metode helper secara opsional mengambil parameter kedua untuk mengaktifkan URL untuk menyertakan domain dan skema dengan menggunakan true atau falsenilai-nilai. Secara default, nilai ditetapkan kefalse yang hanya menampilkan URL relatif.

Example

url("theme://somepath/mycss.css", true)
ja/tutorial
es/tutorial
de/tutorial
fr/tutorial
th/tutorial
pt/tutorial
ru/tutorial
vi/tutorial
it/tutorial
ko/tutorial
tr/tutorial
id/tutorial
pl/tutorial
hi/tutorial
japost
espost
depost
frpost
thpost
ptpost
rupost
vipost
itpost
kopost
trpost
idpost
plpost
hipost

© Copyright 2021 - 2024 | All Rights Reserved