Grav-자산 관리자

이 장에서 Asset Manager. Asset Manager는 Grav 0.9.0에서 도입되어 다음과 같은 자산 추가 및 관리를위한 인터페이스를 통합합니다.JavaScript 과 CSS. 테마 및 플러그인에서 이러한 자산을 추가하면 다음과 같은 고급 기능이 제공됩니다.ordering 과 Asset Pipeline. 그만큼Asset Pipeline 브라우저의 요구 사항을 줄이고 자산의 크기도 줄 이도록 자산을 축소하고 압축하는 데 사용됩니다.

Asset Manager는 클래스이며 플러그인 이벤트 후크를 통해 Grav에서 사용할 수 있습니다. Twig 호출을 사용하여 테마에서 직접 Asset Manager 클래스를 사용할 수도 있습니다.

구성

Asset Manager는 구성 옵션 세트로 구성됩니다. 그만큼system.yaml파일에는 기본값이 포함됩니다. 이 값을 재정의 할 수 있습니다.user/config/system.yaml 파일.

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

테마의 자산

Antimatter 테마는 Grav를 설치할 때 기본 테마로 제공됩니다. CSS 파일을 추가하는 방법의 예를 보여줍니다.base.html.twig 이 테마에있는 파일.

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

위의 코드는 아래에 간략하게 설명되어 있습니다.

• 에 정의 된 지역 block 나뭇 가지 태그는 하나를 확장하는 템플릿에서 교체하거나 추가 할 수 있으며 do assets.addCss() 이 블록 내부를 호출합니다.

• 그만큼 {% do %} 태그를 사용하면 Twig 자체에 내장 된 출력없이 변수를 처리 할 수 ​​있습니다.

• CSS 자산은 다음을 사용하여 자산 관리자에 추가 할 수 있습니다. addCss()방법. 숫자 값을 두 번째 매개 변수로 전달하여 스타일 시트의 우선 순위를 설정할 수 있습니다. 에 대한 전화addCss() 메소드는 CSS 자산에서 HTML 태그를 렌더링합니다.

JavaScript 자산은 CSS 자산과 동일한 방식으로 사용됩니다. 내 JavaScript 자산block 아래와 같이 나뭇 가지 태그.

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

자산 추가

다음 표에는 여러 유형의 추가 방법이 나열되어 있습니다.

Sr. 아니.	방법 및 설명
1	add(asset, [options]) 파일 확장자에 따라 add방법이 자산과 일치합니다. CSS 또는 JS에 대한 직접 메소드 중 하나를 호출하는 적절한 메소드입니다. 당신은 사용할 수 있습니다options우선 순위를 설정합니다. 자산이 파이프 라인 조합 / 최소화에 포함되어야하는지 여부는 파이프 라인 속성에 의해 제어됩니다.
2	addCss(asset, [options]) 이 방법을 사용하여 CSS 자산에 자산을 추가 할 수 있습니다. 두 번째 매개 변수에 설정된 우선 순위에 따라 자산이 목록에서 정렬됩니다. 우선 순위가 설정되지 않은 경우 기본적으로 10이 설정됩니다. 자산이 파이프 라인 조합 / 최소화에 포함되어야하는지 여부는 파이프 라인 속성에 의해 제어됩니다.
삼	addDirCss(directory) 이 방법을 사용하면 알파벳 순서로 정렬 될 CSS 자산으로 구성된 엔티티 디렉토리를 추가 할 수 있습니다.
4	addInlineCss(css, [options]) 이 메소드를 사용하여 인라인 스타일 태그 내에 CSS 문자열을 제공 할 수 있습니다.
5	addJs(asset, [options]) 이 방법을 사용하여 JS 자산에 자산을 추가 할 수 있습니다. 우선 순위가 설정되지 않은 경우 기본 우선 순위를 10으로 설정합니다. 파이프 라인 속성은 자산이 조합 / 최소화 파이프 라인에 포함되어야하는지 여부를 결정합니다.
6	addInlineJs(javascript, [options]) 이 메소드를 사용하면 인라인 스크립트 태그 안에 JS 문자열을 추가 할 수 있습니다.
7	addDirJs(directory) 이 방법을 사용하여 알파벳 순서로 정렬되는 JS 자산으로 구성된 엔티티 디렉토리를 추가 할 수 있습니다.
8	registerCollection(name, array) 이 방법을 사용하면 CSS 또는 JS 자산으로 구성된 배열을 이름으로 등록하여 나중에 사용할 수 있습니다. add()방법. 여러 테마 또는 플러그인을 사용하는 경우이 방법이 매우 유용합니다.

옵션

아래와 같이 설명 된 자산 배열을 전달하는 많은 옵션이 있습니다.

CSS 용

• priority − 정수 값을 취하며 기본값은 100입니다.

• pipeline − 자산이 파이프 라인에 포함되지 않은 경우 다음으로 설정됩니다. false값. 그리고 기본값은true.

JS 용

• priority − 정수 값을 취하고 기본값은 100입니다.

• pipeline − 자산이 파이프 라인에 포함되지 않은 경우 false설정됩니다. 그리고 기본값은true.

• loading −이 옵션은 다음과 같은 3 가지 값을 지원합니다. empty, async 과 defer.

• group− 그룹의 고유 한 이름을 지정하는 문자열로 구성됩니다. 그리고 기본값은true.

Example

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

자산 렌더링

CSS 및 JS 자산의 현재 상태는 다음을 사용하여 렌더링 할 수 있습니다.

css ()

Asset Manager에 추가 된 모든 CSS 자산을 기반으로 css()메소드는 HTML CSS 링크 태그로 구성된 목록을 렌더링합니다. 파이프 라인 속성에 따라 목록에는 축소 된 파일 및 개별 / 결합 된 자산이 포함될 수 있습니다.

js ()

Asset Manager에 있었던 모든 JS 자산을 기반으로 js()메소드는 HTML JS 링크 태그로 구성된 목록을 렌더링합니다. 파이프 라인 속성에 따라 목록에는 축소 된 파일 및 개별 / 결합 된 자산이 포함될 수 있습니다.

명명 된 자산

Grav를 사용하면 이름이있는 CSS 및 JS 자산 모음을 등록 할 수 있습니다. add등록 된 이름을 사용하여 자산 관리자에 자산. Grav에서 다음 기능을 사용하여 수행 할 수 있습니다.named assets. 이러한 사용자 지정 컬렉션은system.yaml; 컬렉션은 모든 테마 또는 플러그인에서 사용할 수 있습니다.

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() 메서드는 다음 코드와 함께 프로그래밍 방식으로 사용할 수 있습니다.

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

그룹화 된 자산

Grav 0.9.43은 새로운 기능으로 소개되었습니다. Grouped Assets, 옵션으로 구성된 옵션 배열을 전달할 수 있습니다. group자산을 추가하는 동안. 이 기능은 페이지의 특정 부분에 JS 파일이나 인라인 JS가 필요할 때 매우 유용합니다.

옵션 구문을 사용하여 아래와 같이 자산을 추가 할 때 그룹을 지정해야합니다.

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

자산에 대한 그룹이 설정되지 않은 경우 head기본 그룹으로 설정됩니다. 이러한 자산을 맨 아래 그룹에서 렌더링하려면 테마에 다음을 추가해야합니다.

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

정적 자산

Asset Manager를 사용하지 않고 자산을 참조하고 싶을 때마다 url()도우미 방법. 예를 들어 테마의 이미지를 참조하려는 경우 다음 구문을 사용할 수 있습니다.

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

그만큼 url() 도우미 메서드는 선택적으로 두 번째 매개 변수를 사용하여 URL이 도메인 및 스키마를 포함하도록합니다. true 또는 false가치. 기본적으로 값은false 상대 URL 만 표시합니다.

Example

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