Рассмотрим, как можно добавлять свои CSS и JavaScript файлы в ваш шаблон на Warp Framework.
Один файл конфигурации /layouts/template.config.php
улучшает создание внутренней среды шаблона, производя все процессы инициализации в одном месте. Он определяет все PHP классы, подгружает все необходимые CSS и JavaScript, а так же все специальные файлы связанные с поддержкой IE. Если вам нужно подгрузить собственные CSS и JavaScript файлы, это место где вы сможете сделать это.
/layouts/template.config.php
в /styles/ВАШ_СТИЛЬ/layouts/template.config.php
.Добавление файлов 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"; }