Warp 6 - Добавление JS, CSS и шрифтов

Рассмотрим, как можно добавлять свои CSS и JavaScript файлы в ваш шаблон на Warp Framework.

Один файл конфигурации /layouts/template.config.php улучшает создание внутренней среды шаблона, производя все процессы инициализации в одном месте. Он определяет все PHP классы, подгружает все необходимые CSS и JavaScript, а так же все специальные файлы связанные с поддержкой IE. Если вам нужно подгрузить собственные CSS и JavaScript файлы, это место где вы сможете сделать это.

Добавление файлов CSS

Файл конфигурации template.config.php подгружает все существующие файлы CSS шаблона. Если вы хотите добавить свой собственный файл CSS /css/my.css, вы можете сделать это, используя следующий синтаксис:

// load css
$this['asset']->addFile('css', 'css:my.css');

Добавление файлов JavaScript

Если вы хотите добавить ваш собственный скрипт my.js, просто скопируйте его в директорию /js вашего шаблона и добавьте следующую запись в файл конфигурации template.config.php:

// add javascripts
$this['asset']->addFile('js', 'js:my.js');

Добавление Шрифта

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

Добавление Шрифта в шаблон

Поместите ваши файлы с шрифтами в директорию /fonts. Создайте CSS файл, который будет содержать шрифт и дайте ему соответствующее имя, к примеру fontname.css. Отредактируйте файл /layouts/template.config.php и добавьте новую линию в раздел load fonts:

// load fonts
$this['asset']->addFile('css', 'template:fonts/myfont.css');

Обновите файл config.xml, чтобы сделать ваш шрифт доступным в настройках шаблона. Сейчас доступно три разных типа (Шрифты Body, Header и Menu). Просто добавьте вашу новую опцию в нужный параметр шрифта (font1, font2 или font3). В следующем примере мы добавили наш новый шрифт в параметр Body Font.

<field name="font1" type="list" default="default" label="Body Font" description="Select the main body typeface.">
	<option value="arial">Arial</option>
	<option value="lucida">Lucida</option>	
	...
	<option value="myfont">My Font</option>

Далее, создайте файл myfont.css для вашего шрифта в директории /css/font1. Этот файл определяет все селекторы, к которым вы хотите применить вам новый шрифт. Убедитесь, что проверили все существующие файлы в этой директории, поскольку вы хотите установить свой собственный файл myfont.css тем же способом. Продолжим, и назначим шрифт контейнеру body в файле myfont.css таким образом:

body { font-family: "MyFontRegular"; }