» » DLE-Asset — Автоматическое подключение стилей и скриптов в шаблон

DLE-Asset — Автоматическое подключение стилей и скриптов в шаблон

11.08
12
19 009
DLE-Asset — Автоматическое подключение стилей и скриптов в шаблон


Подобный модуль я уже очень давно использую в проектах и теперь решил реализовать его и для DLE.
Представьте ситуацию, когда вам нужно создать новый шаблон, с множеством различных скриптов, стилей к ним. Конечно подключить один раз вручную всё это не сложно, но как быть когда это нужно делать постоянно, к примеру вы пробуете использовать jquery-плагин мобильного меню, подключаете js и css, настраиваете, тестируете и понимаете, что этот плагин не подходит, удаляете и производите повторное подключение уже другого плагина, опять js и css. Опять тесты и вроде бы всё подходит, но через неделю понимаете, что этот плагин содержит баг под iOS, который устранить невозможно в разумные временные рамки. Прикручиваете 3й, 4й, 5й скрипты, дополняете каруселькой, кастомным скроллом, всё вручную...
А после того, как всё готово надо бы произвести оптимизацию и включить сжатие и объединение css и js. И тут опять всё в ручную собрать, и через неделю наткнуться на необходимость удалить что-то или добавить, и опять вручную.

Мне лично это надоедает после 2й попытки.

При использовании модуля, всё что нужно для подключения скриптов и стилей — прописать путь к папке или папкам, содержащим js и css-файлы, остальное DLE-Asset сделает сам, причём сначала подключатся все скрипты, а потом уже стили, а когда вы в админке отметите галочку сжатия js и css — сам соберёт нужные строки для передачи в класс минификации.


Назначение и особенности


Модуль предназначен для автоматического подключения файлов скриптов и стилей к шаблону сайта под управление CMS DataLife Engine.
При формировании html-кода учитывается время последнего изменения каждого файла и приписываются соответствующие параметры, таким образом нет необходимости каждый раз при изменении css или js обновлять кеш браузера.
При формировании html-кода учитываются настройки сжатия и объединения скриптов и стилей и модуль сам формирует корректный код в соответствии с настройками DLE.

Требования к установке


  • Версия DLE: 9.x и выше.
  • Прямые руки.


Установка


  • Скачать актуальную версию DLE-Asset
  • Распаковать содержимое папки upload в корень сайта.
  • Открыть {THEME}/main.tpl и в нужном месте, перед закрывающим тегом
    </head>
    вставить строкку подключения модуля:
    <!-- css -->
    {include file="engine/modules/asset/add.php?folder={THEME}/css/"}
    <!-- /css -->
    <!-- js -->
    {include file="engine/modules/asset/add.php?folder={THEME}/js/"}
    <!-- /js -->

    Или одной строкой:
    {include file="engine/modules/asset/add.php?folder={THEME}/css/,{THEME}/js/&ignore=main"}

    Где
    folder — пути от корня сайта к папкам, содержащим css и js файлы. Если необходимо указать несколько путей, то они перечисляются через запятую. Вложенные папки не учитываются.
    ignore — префиксы имён файлов, которые будут исключены из обработки. По умолчанию используются два символов "-" и "_", если необходимо исключить ещё какие-то файлы, то достаточно прописать начало названий этих файлов через запятую. Такое поведение полезно, когда нужно гарантированно прописать подключение отдельных файлов в начале или в конце остальных (например основной файл со скриптами сайта как правило подключается после всех используемых библиотек).
  • Готово! Остаётся положить в указанные папки нужные скрипты и стили и они автоматически подключатся к шаблону, и объединятся в один файл при необходимости.


Скачать модуль DLE-Asset

Похожие материалы

Комментарии

Gameer
Gameer 12 августа 2015 09:57
Спасибо, отличный модуль который действительно в разы упростит подключение, и не нужно захаращивать шаблон множествами <script> <link> bully
lsdoptom
lsdoptom 20 августа 2015 13:15
Спасибо Пафнутий, крутой модуль!
lsdoptom
lsdoptom 20 августа 2015 17:17
Подскажите, есть ли такой модуль для простого html шаблона, а не для dle ?
ПафНутиЙ
ПафНутиЙ 23 августа 2015 10:44
Для html нет, для чистого php есть, для подключения без битрикса инструкция в самом конце.
over
over 21 сентября 2015 08:47
Павел супер, тоже всегда применял Asset Pipeline, но как странно никогда не встречал это в DLE, а как это воспроизвести с 'gzip сжатием' например у меня сейчас так без вашего модуля:


<link media="screen" href="/engine/classes/min/index.php?&amp;f=/templates/default/css/style.css&amp;7" type="text/css" rel="stylesheet"/>
ПафНутиЙ
ПафНутиЙ 21 сентября 2015 09:16
Достаточно просто включить сжатие в настройках. Модуль выведет нужный код.
finik
finik 16 января 2016 15:53
Павел, здравствуйте. Подключаю данный модуль, все делаю согласно инструкции, в исходном коде страницы все файлы js прописываются, НО, после подключения перестает работать модальное окно ответа на комментарий - нажимаю ответить, появляется сообщение "подождите..." и все, само окно не всплывает. В чем может быть причина?
ПафНутиЙ
ПафНутиЙ 16 января 2016 18:42
Возможно конфликт js-скриптов.
Присылайте адрес сайта.
finik
finik 16 января 2016 18:55
Ссылку отправил в личку.
rustam
rustam 22 апреля 2017 13:32
Привет, так как вопрос с кеширование только начал изучать, появляются вопросы. Сделал всё по твоей инструкции, но после активации галочки "Включить Gzip сжатие JS файлов" весь шаблон выворачивает наизнанку. Пожалуйста помоги. Ссыль в личку кину.
ПафНутиЙ
ПафНутиЙ 22 апреля 2017 13:37
Просто отключите галочку до того момента, пока не сможете разобраться в причинах ошибки.
rustam
rustam 22 апреля 2017 13:37
Галочку отключил, но хотелось бы разобраться в чём причина.

Добавить комментарий

Комментировать могут только зарегистрированные пользователи

Информация

Посетители, находящиеся в группе Гости, не могут оставлять комментарии к данной публикации.