Интернет,  Программирование

Подключение скриптов js и css в Yii2

21.12.2014 /

yii2frameworkВсем привет. Решил написать небольшой мануальчик как подключаются скрипты css и js в потому как по ходу изучения фреймворка часто встречал вопросы, типа: «Как подключить css и js», «Вроде все делаю, все правильно подключаю, а они не работают».

Ну так вот, приступим хватит лить водичку:

Все просто, открываем файл assets/AppAsset.php, находим такую конструкцию:

public $css = [
        'css/site.css',
    ];
public $js = [
];

Ну и соответсвенно элементами массива прописываем пути до файлов.

Для этого открываем дирретории и web/js и соответсвенно разбрасываем ваши скрипты туда-сюда, в зависимости от того, какой скрипт.

Ну и для примера приведу, есесьна:

Допустим у нас есть 2 файла: vasya.js и vasya.css. Тот что vasya.js бросаем в дирреторию , а vasya.css — в . Да и конечно прописываем в файл assets/AppAsset.php, должно получиться что то вроде этого:

public $css = [
        'css/site.css',
        'css/vasya.css'
    ];
public $js = [
        'js/vasya.js'
];

Для подключения одного скрипта  js или css на конкретной странице, прописываем следующий код:

//во вьюхе
$this->registerJsFile('path/to/myfile');
$this->registerCssFile('path/to/myfile');

//в контроллере или виджете
$this->view->registerJsFile('path/to/myfile');
$this->view->registerCssFile('path/to/myfile');

Если Вам необходимо подключать набор файлов, создаем конкретный класс отвечающий за подключение нужных скриптов:

namespace app\assets;

use yii\web\AssetBundle;

class MyClassAsset extends AssetBundle
{
    public $basePath = '@webroot'; //алиас каталога с файлами, который соответствует @web
    public $baseUrl = '@web';//Алиас пути к файлам
    public $css = [
        'css/vasya.css',
    ];
    public $js = [
        'js/vasya.js',
    ];
}

А затем подключаем его в нужной вьюхе:

use app\assets\AppAsset;
/*....................*/
MyClassAsset::register($this);

Подробнее об этом, Вы можете посмотреть из Документации Yii.

Вот и все собственно то, ничего сложного не было вродь 🙂 .

Удачи всем в изучении!

Похожие сообщения:

  1. Динамические формы Yii2
  2. Yii2 капча — zadslab
  3. Русская документация по Yii2
  4. Отладка консольного приложения Yii2 в IDE PhpStorm
Теги: AppAsset.php, css в yii2, js для Yii2, web/css, web/js, Yii2, для одной страницы, изучаем Yii2, как подключить, небольшой мануальчик, подключить скрипт js и css в Yii2, фреймворк Yii2

Вам также может понравиться

Сокращение времени доставки

Объединение посылок из Aliexpress

09.09.2019

Увлажнитель воздуха в комнату на пульте управления

13.09.2019

Error debugger of Symfony

07.06.2019

21 комментарий

  • Сергей

    26.07.2015 в 08:28 Ответить

    Не помогло. Это и так очевидно. Как сделать так, чтобы подключать яваскрипты только для конкретного модуля? Мне зачем vasya.js тащить во все модули? Мне оно нужно только для модуля vasya…

      • Стас

        30.09.2016 в 20:49 Ответить

        Создаю в модуле $this->registerCssFile(‘module_name/web/css/style.css’);,
        но все файлы ищутся в директории frontend/web а не в директории модуля, и разумееться не находят. не подскажите как правильно настроить пути относительно папки модуля?

        • Дмитрий

          01.10.2016 в 12:31 Ответить

          Просто дело в том, что все доступные файлы извне, хранятся в дирректории /web соответственно ваши файлы оттуда берутся по умолчанию. Для переопределения можно создать свой ассет и уже через него переопределить расположение файлов.
          В руководстве по ассетам есть описание свойства sourcePath:
          sourcePath: задаёт корневую директорию содержащую файлы ресурса в этом комплекте. Это свойство должно быть установлено если корневая директория не доступна из Web. В противном случае, Вы должны установить basePath свойство и baseUrl свойство вместо текущего. Здесь могут быть использованы псевдонимы путей.
          Вы можете объявить данное свойство например так:

          class BootstrapPluginAsset extends AssetBundle{
          public $sourcePath = '@modules/bootstrap';
          ...
          Думаю что должно все переопределиться.

  • Алексей

    31.08.2015 в 17:50 Ответить

    А сумеете подсказать с более хитрым случаем — с зависимостями. Есть у нас к примеру файлики main.js и main.css, но есть еще папочка lib — внутри которой, в подпапках css, js… лежат другие *.js и *.css файлы, которые нужно подключить предварительно. Какой порядок действий в этом случае? Исходя из документации, у меня сложилось впечатление, что действовать нужно так: папочку lib копируем куда-нибудь в проект (куда хотим или все-таки нет?). Затем создаем класс набора ресурсов, наследованный от AssetBundle (создаем где угодно или нет?). В этом классе, в атрибуте $soursePath указываем путь к папке lib, в атрибутах $js и $css указываем пути на нужные нам файлы внутри папки lib, сохраняем и переходим в тот класс, в котором мы указали подключение main.js и main.css — например — в AppAsset который есть по умолчанию. И уже в нем, в свойство $depends дописываем путь к ранее созданному файлу. Правильно?

    • Дмитрий

      01.09.2015 в 11:09 Ответить

      Ну папку lib можете положить в папку Web, чтобы просто не разбрасывать свои файлы и не путать с папками фреймворка.
      А потом да наследуйтесь от AssetBundle и создавайте свою композицию подключенных файлов 🙂

  • Наталья

    26.04.2016 в 14:52 Ответить

    $this->registerJsFile() работает, только если его подключить в layout. В обычной вьюшке не работает. То же самое с MyClassAsset::register($this) — если этот кастомный ассет прописать в файле из папки layout, то всё работает, в обычной вьюшке — ноль эффекта.

    Как сделать чтоб работало? Мне нужно, чтобы был один layout со стандартным AppAsset, и при этом была возможность для разных страниц подключать свой набор стилей и скриптов. Например, для index.php мне достаточно AppAsset по умолчанию, а для view.php хочу подключить дополнительные js и css. Пробовала выше перечисленными методами — не подключаются ни стили, ни скрипты. Т.е. пробовала в view.php подключить скрипт с помощью registerJsFile — ноль эффекта. Затем сделала свой собственный аналог AppAsset, только с другим набором стилей и скриптов, и пыталась его через register($this) подключить в том же view.php — тоже не пашет. В layout файле всё пашет, но мне это не надо

    • Дмитрий

      29.04.2016 в 09:50 Ответить

      Предполагаю, что не верно указаны пути к файлам.
      Через какой инструмент отлаживаете?
      Что говорит Firebug к примеру (если Вы через него отлаживаете)?

  • Алекс

    28.05.2016 в 12:31 Ответить

    //во вьюхе
    $this->registerJsFile(‘path/to/myfile’);
    $this->registerCssFile(‘path/to/myfile’);

    //в контроллере или виджете
    $this->view->registerJsFile(‘path/to/myfile’);
    $this->view->registerCssFile(‘path/to/myfile’);

    Здесь имеется ввиду или там, или там? Или нужно и там, и там прописывать?

    • Дмитрий

      29.05.2016 в 09:51 Ответить

      Все в зависимости от того, что Вы подключаете.
      Если идет подключение JS, да или в контроллере прописываем
      $this->view->registerJsFile(‘path/to/myfile’);
      или во вьюхе
      $this->registerJsFile(‘path/to/myfile’);

  • Максим

    01.07.2016 в 23:38 Ответить

    Добрый день!
    А вот какой вопросик…
    Для работы с ЧПУ ссылками вынужден был задать в настройках baseUrl равным пустой строке:
    'components' => [
    'request' => [
    'baseUrl' => ''
    ],
    После чего «отвалились» все стили.
    Чтобы хоть как-то исправить ситуацию пришлось в классе app\assets\AppAsset свойство $css задать так:
    public $css = [
    '/web/css/site.css',
    ];
    Стили находящиеся в site.css вернулись. В конечном файле соответствующая строка выглядит так

    и это правильно.
    Но как я не пытался, мне так и не корректно подключить секцию $depends:
    public $depends = [
    'yii\web\YiiAsset',
    'yii\bootstrap\BootstrapAsset',
    ];
    соответствующая строка выглядит так
    и это не правильно. Должно быть так:
    .
    Подскажите чего, где менять?

    • Дмитрий

      02.07.2016 в 12:57 Ответить

      Здравствуйте в файл common.php для ‘components’ вы можете подключить ‘urlManager’ для управления своими url адресами, вот для примера :

      'components' => [
 ...
 'urlManager' => [
            'class' => 'yii\web\UrlManager',
            'enablePrettyUrl' => true,
            'showScriptName' => false,
            'rules' => [
                '' => 'main/default/index',
                'contact' => 'main/contact/contact',
                'prices' => 'main/default/prices',
                '<_a:error>' => 'main/default/<_a>',
                '<_a: (login|logout|signup|email-confirm|password-reset-request|password-reset)>' => '/user/default/<_a>',
                '<_a: (references|addlink|telegramm)>' => '/user/references/<_a>',
                '<_m: [\w\-]+>/<_c: [\w\-]+>/<_a: [\w\-]+>/' => '<_m>/<_c>/<_a>',
                '<_m: [\w\-]+>/<_c: [\w\-]+>/' => '<_m>/<_c>/view',
                '<_m: [\w\-]+>' => '<_m>/default/index',
                '<_m: [\w\-]+>/<_c: [\w\-]+>' => '<_m>/<_c>/index',
            ],
        ],
...
]

      Если Вы хотите использовать свою прежнюю конструкцию 

      components' => [
'request' => [
'baseUrl' => ''
],

      Пустой отставлять нельзя, но вы можете указать ‘baseUrl’ => ‘/’.
      PS.Если у Вас установлен FireBug (Mozilla FireFox) или браузерный отладчик, отслеживайте какой url у Вас получается, отсюда можно плясать с подключением скриптов.

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

Войти с через: 

Ваш адрес email не будет опубликован. Обязательные поля помечены *

Защита от роБота * Лимит времени истёк. Пожалуйста, перезагрузите CAPTCHA.