HTML шаблоны
В директории dev вашего приложения вы найдете каталог HTML, который будет содержать какие-либо шаблоны, которые вы создаете для использования в вашем приложении. Применимы три поддиректории:
- admin/ содержит шаблоны для любых интерфейсов панели администратора;
- front/ содержит шаблоны для пользовательского и фронт-энд интерфейсов;
- global/ содержит шаблоны, которые используются как администраторскими так и фронт-энд областями.
Внутри каждого из этих каталогов вы должны создать подкаталоги, которые объединяют шаблоны в логические группы; как правило, каждый модуль в вашем приложении будет иметь соответствующий каталог и в admin и в front папках шаблонов, хотя вы можете сгруппировать их как вам удобно.
Шаблоны создаются в виде файлов с расширением .phtml в Режиме разработчика. Когда ваше приложение собрано и установлено другими администраторами, эти файлы шаблонов компилируются.
Чтобы использовать шаблоны в коде приложения, вы должны применять следующую конструкцию:
\IPS\Theme::i()->getTemplate( 'group', 'app', 'location' )->template_name( ... );
где:
-
group
Имя папки, которую вы создали в папке admin/front/global. например MyModule. -
app
Ключ вашего приложения. -
location
Расположение группы, т.е. admin, front или global. -
template_name
Имя шаблона, который является файлом без расширения .phtml.
Любые параметры, которые требуются для вашего шаблона, могут быть переданы, так как template_name компилируется в функцию.
Сам файл шаблона должен содержать специальную строку заголовка в качестве самой первой строки:
<ips:template parameters="$example1=array(), $example2=FALSE" />
Атрибут parameters определяет параметры этого шаблона. Синтаксис этого атрибута идентичен определению параметров в PHP функциях. Если вам не нужны какие-либо параметры, вы все равно должны включать заголовок и атрибут parameters, но просто оставить его пустым.
CSS файлы
CSS файлы, которые требуются для вашего приложения, должны быть созданы в каталоге dev/css/ вашего приложения. Как и в случае HTML-шаблонов, есть три поддиректории для admin css, front-end css, и shared css. Файлы, созданные здесь, должны быть подгружены вручную в вашем коде, например, так:
\IPS\Output::i()->cssFiles = array_merge( \IPS\Output::i()->cssFiles, \IPS\Theme::i()->css( 'filename.css', 'app', 'location' ) );
где:
-
filename.css
Имя файла CSS (с суффиксом). -
app
Ключ вашего приложения. -
location
Расположение файла CSS (admin, front или global).
Куда загружать файлы CSS
Так как вы загрузите CSS файлы вручную с помощью вышеуказанного кода, имеет значение где вы разместите их. Если ваш файл CSS очень специфичный для конкретной страницы, вы можете загрузить только метод контроллера (-ов), которые обрабатывают эту страницу. Тем не менее, чаще всего, CSS-файл будет применяться к целому контроллеру в вашем приложении. В этом случае, вы можете загрузить файл CSS в методе контроллера execute(). Обратитесь к документации Контроллеры для получения дополнительной информации.
Если вам нужен CSS для всех front-end или admin страниц вашего приложения, вы можете поместить .css файл непосредственно в /admin или /front-end каталог, с таким же именем, как и у вашего приложения. В этом случае IPS4 будет автоматически загружать файл CSS для всех страниц вашего приложения. Например, ключ вашего приложения my_app, вы можете создать CSS файл /dev/css/front/my_app.css, и он будет включен во всех front-end страницах нашего приложения.
Javascript файлы
Файлы JavaScript обрабатываются аналогично CSS файлам: то есть, они создаются как .js файлы в соответствующем каталоге, а затем подгружаются по требованию в вашем коде. Существует одна небольшая разница: из-за способа архивации JavaScript файлов, при подключении файла JavaScript вы должны указать имя пакета, а не имя файла JavaScript. Javascript файлы архивируются по местоположению и группе что формирует имя результирующего пакета.
Например, если мы создали JavaScript файл dev/js/front/mygroup/somefile.js, то имя пакета будет front_mygroup.js (местоположение, подчеркивание, GroupName) и загрузится следующим образом:
\IPS\Output::i()->jsFiles = array_merge( \IPS\Output::i()->jsFiles, \IPS\Output::i()->js( 'front_mygroup.js', 'app', 'location' ) );
Изображения и другие ресурсы
Изображения (и другие ресурсы, такие как шрифты) должны быть размещены в каталоге /dev/resources, и, как обычно, есть /front, /admin и /global каталоги. Чтобы использовать файл ресурсов в шаблоне напишите следующее:
<img src='{resource="example.jpg" app="yourapp" location="front"}'>
... Изменяйте имя файла, ключ приложения и расположение в зависимости от потребностей.