Родительские и дочерние темы дизайна

Как использовать файлы одной темы дизайна в темах других приложений

Содержание...

Разделы сайта, сформированные разными приложениями, используют отдельные темы дизайна, потому что каждая тема относится только к своему приложению. Например, на страницах «Сайта» используется одна тема дизайна, а на страницах «Блога» — другая.

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

Отличия родительской и дочерних тем

Родительская тема дизайна не использует файлы других тем и работает сама по себе. Она устроена проще всего.

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

В файле theme.xml дочерней темы должно быть следующее:

В остальном родительская и дочерние темы дизайна устроены одинаково.

Переменные Smarty для подключения файлов

Файлы родительской и дочерней тем дизайна можно подключать в коде HTML-шаблонов с помощью переменных. Переменные можно использовать только в HTML-файлах — в других файлах их значения недоступны.

Если тема дизайна сброшена до оригинального состояния, то перечисленные здесь переменные указывают на директорию wa-apps/[app_id]/themes/[theme_id]/ или ее URL.

Если пользователь сохранил настройки темы дизайна или если тема загружена вручную в виде архива через редактор дизайна, то переменные указывают на директорию wa-data/public/apps/[app_id]/themes/[theme_id]/ или ее URL.

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

Эти переменные возвращают URL директории темы, поэтому с их помощью можно подключать только файлы, доступные при обращении через браузер, например, CSS- или JS-файлы.

$wa_theme_url

Относительный URL директории той темы, к которой относится текущий HTML-файл. Если подключен CDN, то переменная содержит абсоютный URL CDN-копии темы дизайна.

Если дочерняя тема использует файл родительской темы с помощью атрибута parent="1", то переменная в этом файле содержит URL директории родительской темы.

В собственных файлах дочерней темы переменная содержит URL дочерней темы.

В файлах родительской темы переменная содержит URL родительской темы.

Пример

<link href="{$wa_theme_url}extra.css" rel="stylesheet" type="text/css">
$wa_real_theme_url

Относительный URL директории той темы, к которой относится текущий HTML-файл — как $wa_theme_url. Всегда содержит URL директории темы на сервере, где установлен Webasyst — без учета настройки CDN.

Пример

<link href="{$wa_real_theme_url}extra.css" rel="stylesheet" type="text/css">
$wa_active_theme_url

Относительный URL директории темы дизайна, которая использует текущий HTML-файл на странице сайта.

Если дочерняя тема использует файл родительской темы с помощью атрибута parent="1", то переменная в этом файле содержит URL темы поселения текущей страницы сайта: родительской либо дочерней.

В собственных файлах дочерней темы переменная содержит URL дочерней темы.

В файлах родительской темы переменная содержит URL родительской темы.

Пример

<link href="{$wa_active_theme_url}extra.css" rel="stylesheet" type="text/css">
$wa_parent_theme_url

Относительный URL родительской темы дизайна.

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

Пример

<link href="{$wa_parent_theme_url}mytheme.css" rel="stylesheet" type="text/css">

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

$wa_active_theme_path

Полный путь к директории темы дизайна, которая использует текущий HTML-файл на странице сайта.

Если текущий HTML-файл подключен к дочерней теме с помощью атрибута parent="1", переменная в этом файле содержит путь к директории темы поселения текущей страницы сайта: родительской либо дочерней.

Пример

{include file="`$wa_active_theme_path`/sidebar.html"}
$wa_parent_theme_path

Полный путь к директории родительской темы дизайна.

Имеет смысл только в файлах дочерней темы для подключения файлов родительской темы дизайна.

Пример

{include file="`$wa_parent_theme_path`/home.html"}