Как подключить CSS и JS в блоке PHP

В Winter CMS мы можем подключать стили и скрипты не только в разметке или в компонентах, а можно это делать так же напрямую из блока с PHP-кодом.

Делается это внутри функции onStart или onEnd

Пример с подключением:

title = "Страница"
url = "/page"
layout = "demo"
==
<?php

function onStart()
{
    $this->addCss('/themes/default/assets/css/style.css');
    
    $this->addJs('/themes/default/assets/js/script.js');
    
    // Подключение CDN
    $this->addCss('https://cdn.jsdelivr.net/npm/library.min.css');

    $this->addJs('https://cdn.jsdelivr.net/npm/library.min.js');
}

?>
==
<div>Контент страницы ...</div>

Версирование

В методы addCss и adJs вы можете передать строку в качестве второго аргумента, который затем по умолчанию будет использовать строковое значение в качестве значения параметра build:

$this->addJs('/themes/default/assets/js/script.js', 'Acme.Test');

Если, например, у плагина 'Acme.Test' версия 2.4.1, то это подключит скрипт на страницу следующим образом:

<script src="https://example.com/themes/default/assets/js/script.js?v=2.4.1"></script>

С указанием атрибутов

Методы addCss и adJs принимают два параметра:

• addCss(string $path, array $attributes)
• addJs(string $path, array $attributes)

1. $path - путь к файлу. Обязательный параметр.
2. $attributes - необязательный параметр в виде массива, где ключ элемента массива это добавляемый к тегу подключения файла html-атрибут, а значение элемента массива - это значение html-атрибута.

Пример с атрибутами:

$this->addJs('/themes/demo/assets/js/script.js', [
    'build' => 'Acme.Test',
    'defer' => true,
    'data-test-att' => 'hello',
]);

Подключит скрипт на страницу следующим образом:

<script src="https://example.com/themes/demo/assets/js/script.js?v=2.4.1" defer data-test-att="hello"></script>

Динамический путь

При этом можно использовать символы префикса для создания динамического пути. Например, путь начинающийся с символа $ создаст путь относительно каталога плагинов. Ниже пример подключающий один и тот же файл, если в конфигурации не изменена директория плагинов:

$this->addCss('/plugins/acme/plugname/assets/css/style.css');

$this->addCss('$/acme/plugname/assets/css/style.css');

Эти символы поддерживаются для создания динамических путей:

Символ	Описание
~	Относительно каталога приложения
$	Относительно каталога плагинов
#	Относительно каталога тем

Это работает одинаково и для css, и для js.

PS

Чтобы всё сработало, не забудьте что на странице или в шаблоне у вас должен быть подключён тег вместо которого на страницу будут подключаться js и CSS:

{% styles %}

{% scripts %}