Документация InstantCMS

для администраторов и разработчиков

Инструменты пользователя

Инструменты сайта


dev:templates:css-js

Подключение 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/{$cname}/css/{$path}.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/{$cname}/js/{$path}.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>
    <?php echo $this->getLangJS('LANG_CP_WIDGET_DELETE_CONFIRM', 'LANG_HIDE', 'LANG_SHOW'); ?>
</script>

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

<script>
    <?php echo $this->getLangJS(array('LANG_CP_WIDGET_DELETE_CONFIRM', 'LANG_HIDE', 'LANG_SHOW')); ?>
</script>

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

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

К оглавлению раздела

dev/templates/css-js.txt · Последнее изменение: 05.12.2016 10:07 — fuze