Wiki

Clone wiki

CMS / Хранилище CSS и JS

Для подключения CSS и JS ресурсов рекомендуется использовать унифицированный механизм через указание данных в файле конфигураций.

Общие для всех шаблонов ресурсы указываются в ключах css и js файла конфигураций data/config/main.php

Также можно указать ресурсы специфично для каждого шаблона путём создания файла template/ШАБЛОН/config/config.php

Пример:

#!php

<?php 
return array (
  '__css__' => array (
      'https://fonts.googleapis.com/icon?family=Material+Icons',
      '__template_path__/css/materialize.css',
      '__template_path__/css/style.css',
  ),
  '__js__' => array (
      '__template_path__/js/default.js',
      '__template_path__/js/jquery.ajaxnav.js',
  ),
)
?>

Также существует возможность сжатия нескольких ресурсов одного типа в один путём указания атрибута "merge" и указания атрибутов "async" и "defer" для необъединяемых JS-файлов.

Пример использования:

#!php

'__js__' => array (
'__template_path__/js/default.js',
'__template_path__/js/async.js' => array('merge' => false, 'async' => true),
'__template_path__/js/defer.js' => array('merge' => false, 'defer' => true),
),

Можно указать загрузку файлов для отдельного модуля.

Пример использования:

#!php

'__js__' => array (
'__template_path__/js/default.js',
'__template_path__/js/forum.js' => array('module' => 'forum'),
'__template_path__/js/loads.js' => array('module' => 'loads'),
),

Также доступна возможность указания параметров "user" для вывода файлов только для пользователя с указанным ID и параметра "priority" для указания порядка сортировки (по-умолчанию равно 100)

Использование в шаблоне

Для подключения ресурсов к странице используются метки atm.css и atm.js, представляющие собой массивы данных.

Пример вывода:

#!html

{% for css in atm.css %}
<link rel="stylesheet" href="{{ css.src }}"{% if css.async %} async{% endif %}{% if css.defer %} defer{% endif %} />
{% endfor %}

{% for js in atm.js %}
<script type="text/javascript" src="{{ js.src }}"{% if js.async %} async{% endif %}{% if js.defer %} defer{% endif %} ></script>
{% endfor %}

Updated