Как подключить к пакету css файл
Перейти к содержимому

Как подключить к пакету css файл

  • автор:

Создание пакетов JS и CSS

В Yii есть возможность создания своих пакетов, содержащих JS и CSS файлы. При описании пакета можно указать зависимости от других пакетов.

Есть замечательный инструмент для рисования графиков на JS — highcharts, но он использует фреймворк jQuery и сам jQuery не подключает.

Рассмотрим пример использования пакета.

Создаём пакет, где указываем JS и CSS файлы из highcharts и прописываем зависимость от пакета с jQuery. В Yii jQuery является встроенным пакетом.

Список всех встроенных пакетов можно найти в файле framework/web/js/packages.php

Настройка компонента в protected/config/main.php :

'clientScript'=>array( 'packages' => array( // Уникальное имя пакета 'highcharts' => array( // Где искать подключаемые файлы JS и CSS 'baseUrl' => '/js/highcharts/', // Если включен дебаг-режим, то подключает /js/highcharts/highcharts.src.js // Иначе /js/highcharts/highcharts.js 'js'=>array(YII_DEBUG ? 'highcharts.src.js' : 'highcharts.js'), // Подключает файл /js/highcharts/highcharts.css 'css' => array('highcharts.css'), // Зависимость от другого пакета 'depends'=>array('jquery'), ), ) ) 

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

Теперь вместо многострочного кода:

Yii::app()->clientScript ->registerPackage('jquery') ->registerScriptFile('/js/highcharts/highcharts.js') ->registerCssFile('/js/highcharts/highcharts.css'); 
Yii::app()->clientScript ->registerPackage('highcharts'); 

Yii загрузит jQuery только один раз, даже если какой-то другой модуль, виджет или ваш код уже подключил jQuery.

Yii::app()->clientScript ->registerPackage('jquery'); … Yii::app()->clientScript ->registerPackage('highcharts'); 
  • Автор : Загиров Рустам, Stamm (zagirov.name)
  • Обзор
  • Часто задаваемые вопросы
  • Как написать новый рецепт
  • Создание высоконагруженных приложений
  • Настройка IDE для работы с Yii
  • Избавляемся от index.php при использовании nginx
  • Используем несколько конфигураций в одном приложении
  • Настройка для работы на сервере
  • Выполнение действий по расписанию
  • Использование приложения Yii в сторонних скриптах
  • HTTPS и Yii
  • Yii и Denwer
  • Cookie на поддоменах
  • Обновление определённого поля модели
  • Сохранение связанных данных
  • Мультиязычные модели
  • DAO и модели
  • Использование Active Record с несколькими БД
  • Связь не по первичному ключу в MyISAM
  • Итератор для провайдеров данных
  • Краткий справочник по валидации
  • Свои сообщения для ошибок валидации
  • Использование собственных фильтров в правилах валидации
  • Как загрузить файл используя модель
  • Как загрузить файл используя модель (вариант с толстой моделью)
  • Добавляем CAPTCHA к форме
  • Как подключить FCKeditor
  • Вывод CStarRating в GridView
  • Расширяем CFormatter
  • Использование виджета CMaskedTextField
  • AJAX в Yii
  • Индикаторы AJAX-загрузки
  • Создание пакетов JS и CSS
  • События
  • Геттеры и сеттеры в Yii
  • Ресурсы (asset)
  • Удобная разработка и отладка в Yii

Подключение CSS и JavaScript файлов

Все CSS и JavaScript файлы в шаблонах необходимо подключать через специальные методы (функции). Таким образом будут учитываться все опции сжатия и исключится возможность дублирующих подключений одних и тех же файлов.

Стоит отметить, что пути к файлам во всех перечисленных методах нужно подключать без первого слеша и относительно корня дерева файлов InstantCMS. Однако, также стоить отметить, что если вы планируете впоследствии подключать наследуемые шаблоны, необходимо путь к подключаемым файлам формировать через специальные методы.

Все шаблоны подключаются внутри методов (функций) класса-шаблонизатора cmsTemplate , поэтому контекст $this доступен в каждом шаблоне. Объекты других системных классов доступны либо через свойство controller шаблона (например $this→controller→cms_user , согласно работы с системными классами и объектами), либо через явно объявленные объекты (например $core = cmsCore::getInstance(); ).

Получение пути к файлам шаблона

Универсальное получение пути к файлам шаблона полезно использовать. Т.к. CMS в этом случае проверяет наличие файла по цепочке наследования и подключает первый найденный, что крайне удобно и унифицировано. При этом не стоит опасаться, что такое подключение каким-то образом увеличит нагрузку на сервер. PHP прекрасно кеширует подобные операции.

$this->getTplFilePath($relative_path, $return_abs_path = true);

Возвращает путь к файлу шаблона с учётом цепочки наследования.

$relative_path — Путь относительно корня шаблона. Без первого слеша.
$return_abs_path — Возвращать полный путь в файловой системе, по умолчанию true.

Через этот метод подключаются все файлы шаблонов движка. Например, код

$this->getTplFilePath('js/'.$filename.'.js', false);

Подключит файл /templates/НАЗВАНИЕ_ШАБЛОНА/js/file.js .

$this->getJavascriptFileName($filename);

Метод вернёт путь для переданного файла javascript, метод аналогичен методу выше

$this->getTplFilePath('js/'.$filename.'.js', false);

и по сути является удобной обёрткой для этой конструкции.

$this->getStylesFileName($controller_name = '', $subfolder = '');

Метод возвращает путь к CSS -файлу контроллера, определяя его наличие в собственном шаблоне. Если $controller_name не передан, берётся название контроллера из текущего контекста. Метод аналогичен вызову

$this->getTplFilePath('controllers/'.$controller_name.'/'.$subfolder.'styles.css', false);

и по сути является удобной обёрткой для этой конструкции.

Подключение CSS файлов

Главный CSS файл контроллера, если таковой есть по пути /templates/НАЗВАНИЕ_ШАБЛОНА/controllers/ИМЯ_КОНТРОЛЛЕРА/styles.css , подключается автоматически, вам остается его просто создать.

В шаблоне доступны следующие методы для подключения CSS :

$this->getCSSTag($path_to_file);

Возвращает HTML код подключения CSS файла. Параметр один, в него передается путь к файлу. Этот метод, кроме возвращения HTML кода подключения, ничего не делает.

$this->insertCSS($path_to_file);

Печатает HTML код подключения CSS файла. Параметр один, в него передается путь к файлу. Этот метод, кроме вывода HTML кода подключения, ничего не делает. Главное отличие от метода $this→getCSSTag($path_to_file); в том, что HTML код подключения печатается сразу. Подключенные таким образом файлы не участвуют в сжатии и объединении CSS -файлов.

$this->addMainCSS($path_to_file);

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

$this->addCSS($path_to_file, $allow_merge);

Добавляет CSS файл в конец списка подключений CSS стилей. Подключенные таким образом файлы участвуют в сжатии и объединении CSS -файлов, если второй параметр $allow_merge указан в true (это поведение по умолчанию).

$this->addControllerCSS($path, $cname, $allow_merge);

Ищет CSS файл по пути /templates/НАЗВАНИЕ_ШАБЛОНА/controllers//css/.css и если находит — подключает его в конец списка подключений CSS стилей. Подключенные таким образом файлы участвуют в сжатии и объединении CSS -файлов, если третий параметр $allow_merge указан в true (это поведение по умолчанию). В переменной $cname указывается название контроллера. Если оно не передано, используется контроллер текущего контекста.

Метод ищет сначала указанный файл в текущем выбранном шаблоне, а если не находит, то подключается тот, который лежит по аналогичному пути в дефолтном шаблоне.

$this->addCSSFromContext($path_to_file);

Этот метод, в зависимости от контекста запроса, либо выполняет метод $this→insertCSS($path_to_file); (если запрос по AJAX), либо выполняет метод $this→addCSS($path_to_file, $allow_merge); (если запрос обычный).

Подключение JavaScript файлов

В шаблоне доступны следующие методы для подключения JavaScript файлов:

$this->getJSTag($path_to_file, $comment);

Возвращает HTML код подключения JavaScript файла. В параметр $path_to_file передается путь к файлу, в параметре $comment можно указать комментарий к подключению. Этот метод, кроме возвращения HTML кода подключения, ничего не делает.

$this->insertJS($path_to_file, $comment);

Печатает HTML код подключения JavaScript файла. Этот метод, кроме вывода HTML кода подключения, ничего не делает. Главное отличие от метода $this→getJSTag($path_to_file, $comment); в том, что HTML код подключения печатается сразу. Подключенные таким образом файлы не участвуют в сжатии и объединении JavaScript-файлов.

$this->addMainJS($path_to_file, $comment);

Добавляет JavaScript файл в головной раздел страницы выше остальных подключений JavaScript файлов. Подключенные таким образом файлы участвуют в сжатии и объединении JavaScript-файлов.

$this->addJS($path_to_file, $comment, $allow_merge);

Добавляет JavaScript файл в конец списка подключений JavaScript файлов. Подключенные таким образом скрипты участвуют в сжатии и объединении JavaScript-файлов, если третий параметр $allow_merge указан в true (это поведение по умолчанию).

$this->addControllerJS($path, $cname, $comment, $allow_merge);

Ищет JavaScript файл по пути /templates/НАЗВАНИЕ_ШАБЛОНА/controllers//js/.js и если находит — подключает его в конец списка подключений JavaScript скриптов. Подключенные таким образом файлы участвуют в сжатии и объединении JavaScript-файлов, если четвертый параметр $allow_merge указан в true (это поведение по умолчанию). В переменной $cname указывается название контроллера. Если оно не передано, используется контроллер текущего контекста.

$this->addJSFromContext($path_to_file, $comment);

Этот метод, в зависимости от контекста запроса, либо выполняет метод $this→insertJS($path_to_file, $comment); (если запрос по AJAX), либо выполняет метод $this→addJS($path_to_file, $comment, $allow_merge); (если запрос обычный).

$this->getLangJS($phrases);

Этот метод не подключает никаких файлов, а полезен для удобного вывода языковых констант. В параметр $phrases можно передавать:

Название языковой константы;
Массив названий языковых констант;

Задавать неограниченное число входных параметров метода, где каждый параметр — это название константы.

Обратите внимание, что передавать нужно на саму константу (т.е. то, что в ней хранится), а ее название, например:

 

это будет равнозначно вот этому:

 

Результат на странице будет вот таким:

script> var LANG_CP_WIDGET_DELETE_CONFIRM = 'Удалить виджет?'; var LANG_HIDE = 'Скрыть'; var LANG_SHOW = 'Показать'; script>

Подключение CSS файлов к проекту на Laravel с помощью Webpack

По аналогии с тем, как можно подключить один или несколько файл с JavaScript скриптами, точно также можно подключать и CSS файлы к проекту на Laravel с помощью Webpack. Это позволит поднять качество генерируемых странниц сайта в плане SEO за счёт уменьшения количества запросов к нескольким файлов со стилями. При подключении нескольких файлов с CSS стилями важно соблюдать порядок их подключения, так как нужно помнить, что любое свойство с одинаковым приоритетом в CSS перепрописывает предыдущее. Хотя вообще нужно стараться не дублировать свойства так, чтобы они перепрописывали друга дружку, но обычно на больших проектах за такими «пустяками» сложно уследить, находя нужное свойство в каком-то отдельном файле. Всегда проще перепрописать (что не правильно, но реально проще, если в проекте есть масса модулей от разных разработчиков, которые используют свои собственные стили).

Node.js и NPM

Итак, для того, чтобы собирать все CSS файлы в один общий файл (или несколько отдельных для разных типов страниц), нужно иметь доступ к командной строки на сервере, и что на сервере установлены Node.js и NPM. Для того, чтобы проверить, установлен ли Node.js можно воспользоваться командой:

node -v

, которая выведет версию установленной Node.js. И командой:

npm -v

, которая выведет версию пакета NPM, установленного на сервере.

Если при этих запросах (или хотя бы в одном) выдаётся ошибка о том, что данная команда не найдена, это значит, что скорее всего эти пакеты не установлены на сервере и их нужно установить.

Подготовка файлов со стилями CSS к переносу в проект

Для того, чтобы не создавать хаос у себя на сервере, все файлы, относящиеся к проекту лучше хранить в папке /resources , которая уже создана при установке Laravel. В эту папку вложена папка css , в которую и нужно складывать все файлы со стилями CSS, которые нужны для работы с проектом. Если эти файлы нужно разделить на группы, можно сделать вложенные папки. Полный путь до папки со стилями CSS относительно корня папок проекта будет:

/resources/css

У меня сразу после установки в этой папке лежит пустой файл app.css . Именно его и подключим к проекту, хотя имя файла может быть любым.

webpack.mix.js — файл для указания того, что будет входить в сборку CSS свойств элементов страниц проекта на Laravel

После того, как файл со стилями CSS подготовлен, его требуется перенести в папку public проекта, которая служит корневой папкой для сайта.

Для этого нужно отредактировать файл webpack.mix.js , который находится в корневой директории проекта.

Для подключения одного файла CSS к проекту нужно в этом файле webpack.mix.js прописать команду:

mix.styles('resources/css/app.css', 'public/css/moonbase.css')
  • resources/css/app.css — это файл, который требуется подключить к проекту (с полным путём к нему)
  • public/css/moonbase.css — это файл, куда требуется перенести данный файл (с указанием пути, куда переносим и названием файла, куда будут складываться все стили CSS)

Сборка файла с CSS стилями для публикации на сайте Laravel

Для того, чтобы перенести файл с нашими CSS стилями в папку проекта, нужно выполнить в консоли сервера из корня проекта команду:

npm run dev

Для сборки в режиме «продакшен» (без лишних символов в одну строку), используйте команду:

npm run production

В результате получим отчёт:

 DONE Compiled successfully in 86ms 9:08:19 PM Asset Size Chunks Chunk Names /css/moonbase.css 29 bytes [emitted]

Компиляция нескольких файлов со CSS стилями в проект Laravel

Для компиляции нескольких файлов со CSS стилями в проект Laravel в файле webpack.mix.js в качестве первого аргумента можно передавать массив с именами файлов, которые требуется подключить в проект, например:

mix.styles([ 'resources/css/file1.css', 'resources/css/file2.css', 'resources/css/file3.css' ], 'public/css/all.css');

Подключение скомпилированного файла с CSS стилями к проекту Laravel

Всё, что осталось сделать, это в шаблон сайта вписать подключение скомпилированного файла с CSS стилями (или нескольких файлов в зависимости от функционала страниц проекта).

Это делается в пределах контейнера :

После этого все подключенные CSS стили должны начать работать после перезагрузки страницы проекта.

Заберите ссылку на статью к себе, чтобы потом легко её найти!
Раз уж досюда дочитали, то может может есть желание рассказать об этом месте своим друзьям, знакомым и просто мимо проходящим?
Не надо себя сдерживать! 😉

Плагин CSS для Sublime Text 3

Здравствуйте! Можно ли как-то сделать в Sublime Text 3, что-бы при написании свойства css в подсказке выдавало список всех возможных значений для него? Если это можно сделать с помощью плагина, напишите плс название.

Отслеживать
9,634 4 4 золотых знака 35 35 серебряных знаков 73 73 бронзовых знака
задан 9 янв 2017 в 18:56
35 1 1 серебряный знак 4 4 бронзовых знака

Их много. Навскидку, которыми часто пользуюсь: Emmet, Hayaku, CSS Snippets, Sublime Web Colors, CSSFontFamily. Искать любые пакеты под свои запросы пробуйте на сайте Package Control, в данном случае по ключевому слову CSS . Спасибо.

9 янв 2017 в 19:29

1 ответ 1

Сортировка: Сброс на вариант по умолчанию

Можно. Для этого установите CCS3.

Для установки:

  1. Откройте командную строку Sublime сочетанием клавиш «CTRL+SHIFT+P»
  2. Введите команду «Package Control: Install Package» и нажмите Enter
  3. Введите название пакета «CSS3» и нажмите Enter

Далее необходимо отключить пакет «CSS». Для этого:

  1. Откройте командную строку Sublime сочетанием клавиш «CTRL+SHIFT+P»
  2. Введите команду «Package Control: Disable Package» и нажмите Enter
  3. Введите название пакета «CSS» и нажмите Enter

Далее необходимо установить CCS3 в качестве языка по умолчанию для .css файлов. Для этого открываем любой .css файл и выбираем из меню View → Syntax → Open all with current extension as… → CSS3

Обратите внимание:

введите сюда описание изображения

По умолчанию при вводе значения появляется список значений

введите сюда описание изображения

Так же список значений можно вызвать сочетанием клавиш «CTRL+SPACE»

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

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