Grav - Người quản lý tài sản

Trong chương này, chúng ta hãy nghiên cứu về Asset Manager. Asset Manager đã được giới thiệu trong Grav 0.9.0 để thống nhất giao diện thêm và quản lý các nội dung nhưJavaScript và CSS. Việc thêm các nội dung này từ các chủ đề và plugin sẽ cung cấp các khả năng nâng cao nhưordering và Asset Pipeline. CácAsset Pipeline được sử dụng để giảm thiểu và nén nội dung để giảm yêu cầu của trình duyệt và cũng giảm kích thước của nội dung.

Asset Manager là một lớp và có sẵn để sử dụng trong Grav thông qua các móc sự kiện plugin. Bạn cũng có thể sử dụng trực tiếp lớp Asset Manager trong các chủ đề bằng cách sử dụng lệnh gọi Twig.

Cấu hình

Trình quản lý nội dung bao gồm một tập hợp các tùy chọn cấu hình. Cácsystem.yamltệp chứa các giá trị mặc định; bạn có thể ghi đè các giá trị này tronguser/config/system.yaml tập tin.

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

Nội dung trong Chủ đề

Chủ đề phản vật chất xuất hiện dưới dạng chủ đề mặc định khi bạn cài đặt Grav. Nó cho thấy một ví dụ về cách thêm tệp CSS vàobase.html.twig tệp nằm trong chủ đề này.

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

Đoạn mã trên được giải thích ngắn gọn bên dưới.

  • Vùng được xác định trong block Thẻ cành cây có thể được thay thế hoặc nối vào trong các mẫu mở rộng thẻ và bạn có thể thấy số lượng do assets.addCss() cuộc gọi bên trong khối này.

  • Các {% do %} thẻ cho phép bạn xử lý các biến mà không cần bất kỳ đầu ra nào được tích hợp sẵn trong Twig.

  • Nội dung CSS có thể được thêm vào Trình quản lý nội dung bằng cách sử dụng addCss()phương pháp. Bạn có thể đặt mức độ ưu tiên của các bảng định kiểu bằng cách chuyển một giá trị số làm tham số thứ hai. Cuộc gọi đếnaddCss() phương thức hiển thị các thẻ HTML từ nội dung CSS.

Nội dung JavaScript được sử dụng giống như nội dung CSS. Nội dung JavaScript trongblock thẻ cành như hình dưới đây.

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

Thêm tài sản

Bảng sau liệt kê các loại phương thức thêm khác nhau:

Sr.No. Phương pháp & Mô tả
1

add(asset, [options])

Dựa trên phần mở rộng của tệp, addphương pháp phù hợp với nội dung. Đây là một phương thức thích hợp để gọi một trong những phương thức trực tiếp cho CSS hoặc JS. Bạn có thể tận dụngoptionsđể đặt mức độ ưu tiên. Việc một nội dung có nên được đưa vào đường ống kết hợp / rút gọn hay không được kiểm soát bởi thuộc tính đường ống.
2

addCss(asset, [options])

Bằng cách sử dụng phương pháp này, bạn có thể thêm nội dung vào nội dung CSS. Dựa trên mức độ ưu tiên được đặt trong tham số thứ hai, nội dung được sắp xếp thứ tự trong danh sách. Nếu không có mức độ ưu tiên nào được đặt, thì theo mặc định 10 sẽ được đặt. Việc một nội dung có nên được đưa vào đường ống kết hợp / rút gọn hay không được kiểm soát bởi thuộc tính đường ống.
3

addDirCss(directory)

Bằng cách sử dụng phương pháp này, bạn có thể thêm một thư mục thực thể bao gồm các nội dung CSS sẽ được sắp xếp theo thứ tự bảng chữ cái.
4

addInlineCss(css, [options])

Bạn có thể cung cấp một chuỗi CSS bên trong thẻ kiểu nội tuyến bằng cách sử dụng phương pháp này.
5

addJs(asset, [options])

Bằng cách sử dụng phương pháp này, bạn có thể thêm nội dung vào nội dung JS. Nếu mức độ ưu tiên không được đặt, thì nó sẽ đặt mức độ ưu tiên mặc định thành 10. Thuộc tính đường ống xác định xem nội dung có nên được đưa vào đường ống kết hợp / rút gọn hay không.
6

addInlineJs(javascript, [options])

Phương thức này cho phép bạn thêm một chuỗi JS bên trong thẻ script nội tuyến.
7

addDirJs(directory)

Bằng cách sử dụng phương pháp này, bạn có thể thêm một thư mục thực thể bao gồm các nội dung JS, sẽ được sắp xếp theo thứ tự bảng chữ cái.
số 8

registerCollection(name, array)

Phương pháp này cho phép bạn đăng ký một mảng bao gồm các nội dung CSS hoặc JS với một tên để có thể sử dụng sau này bằng cách sử dụng add()phương pháp. Nếu bạn đang sử dụng nhiều chủ đề hoặc plugin, thì phương pháp này rất hữu ích.

Tùy chọn

Có nhiều tùy chọn để chuyển mảng nội dung được giải thích như hình dưới đây:

Đối với CSS

  • priority - Nó nhận một giá trị nguyên và giá trị mặc định sẽ là 100.

  • pipeline - Khi nội dung không được đưa vào quy trình, nó sẽ đặt thành falsegiá trị. Và giá trị mặc định được đặt thànhtrue.

Đối với JS

  • priority - Lấy giá trị nguyên và giá trị mặc định sẽ là 100.

  • pipeline - Khi nội dung không được đưa vào quy trình, falseđược thiết lập. Và giá trị mặc định được đặt thànhtrue.

  • loading - Tùy chọn này hỗ trợ 3 giá trị như empty, async và defer.

  • group- Nó bao gồm một chuỗi chỉ định tên duy nhất cho một nhóm. Và giá trị mặc định được đặt thànhtrue.

Example

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

Kết xuất tài sản

Trạng thái hiện tại của nội dung CSS và JS có thể được hiển thị bằng cách sử dụng như sau:

css ()

Dựa trên tất cả các nội dung CSS đã được thêm vào Trình quản lý nội dung, css()phương thức hiển thị một danh sách bao gồm các thẻ liên kết HTML CSS. Dựa trên thuộc tính đường ống, danh sách có thể chứa tệp được rút gọn và nội dung riêng lẻ / kết hợp.

js ()

Dựa trên tất cả các nội dung JS đã có trong Asset Manager, js()phương thức hiển thị một danh sách bao gồm các thẻ liên kết HTML JS. Dựa trên thuộc tính đường ống, danh sách có thể chứa tệp được rút gọn và nội dung riêng lẻ / kết hợp.

Nội dung được đặt tên

Grav cho phép bạn đăng ký một bộ sưu tập các nội dung CSS và JS với một tên, để bạn có thể sử dụng addtài sản cho Người quản lý tài sản bằng cách sử dụng tên đã đăng ký. Điều này có thể được thực hiện trong Grav bằng cách sử dụng một tính năng được gọi lànamed assets. Các bộ sưu tập tùy chỉnh này được xác định trongsystem.yaml; các bộ sưu tập có thể được sử dụng bởi bất kỳ chủ đề hoặc plugin nào.

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

Các registerCollection() phương pháp có thể được sử dụng theo chương trình với mã sau:

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

Tài sản được Nhóm lại

Grav 0.9.43 đã được giới thiệu với một tính năng mới được gọi là Grouped Assets, cho phép bạn chuyển mảng tùy chọn bao gồm grouptrong khi thêm Tài sản. Tính năng này rất hữu ích khi bạn cần một số tệp JS hoặc JS nội tuyến tại một phần cụ thể của trang.

Bằng cách sử dụng cú pháp tùy chọn, bạn phải chỉ định nhóm khi thêm nội dung như được hiển thị bên dưới.

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

Nếu không có nhóm nào được đặt cho nội dung, thì headđược đặt làm nhóm mặc định. Nếu bạn muốn các nội dung này hiển thị ở nhóm dưới cùng, bạn phải thêm nội dung sau vào chủ đề của mình.

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

Tài sản tĩnh

Bất cứ khi nào bạn muốn giới thiệu nội dung mà không cần sử dụng Trình quản lý nội dung, thì bạn có thể sử dụng url()phương pháp trợ giúp. Ví dụ: khi bạn muốn tham chiếu một hình ảnh từ chủ đề, thì bạn có thể sử dụng cú pháp sau.

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

Các url() tùy chọn phương thức trợ giúp nhận tham số thứ hai để cho phép URL bao gồm miền và giản đồ bằng cách sử dụng true hoặc là falsecác giá trị. Theo mặc định, giá trị được đặt thànhfalse chỉ hiển thị URL tương đối.

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