Разделы сайта, сформированные разными приложениями, используют отдельные темы дизайна, потому что каждая тема относится только к своему приложению. Например, на страницах «Сайта» используется одна тема дизайна, а на страницах «Блога» — другая.
Страницы разных разделов могут иметь различное либо сходное оформление. Сходного оформления страниц разных разделов сайта можно добиться двумя основными способами:
- Скопировать код дизайна из темы одного приложения в файлы темы другого приложения. Этот подход — самый простой в начале, но трудоемкий при выпуске обновлений для темы дизайна, потому что один и тот же обновленный код придется копировать из одной темы в другую.
- Хранить общие фрагменты дизайна в одной теме и подключать их при необходимости в других темах. Этот подход позволяет избежать лишней работы и ошибок при копировании. Нужно только сразу указать, какие файлы хранятся в основной (родительской) теме дизайна, и как другие темы (дочерние) должны должны использовать эти файлы.
Отличия родительской и дочерних тем
Родительская тема дизайна не использует файлы других тем и работает сама по себе. Она устроена проще всего.
Дочерняя тема дизайна использует некоторые файлы родительской темы. Например, CSS-стили или шаблоны общих элементов: заголовок, боковые панели, подвал сайта.
В файле theme.xml
дочерней темы должно быть следующее:
-
Атрибут
parent_theme_id
элементаtheme
с ID родительской темы и ее приложения в форматеapp_id:theme_id
.Пример для темы приложения «Фото», которая является дочерней по отношению к родительской теме «Сайта»:
<theme id="mytheme" vendor="123456" author="ThemeDeveloper" app="photos" parent_theme_id="site:mytheme" version="1.0.0">
-
(необязательно) Атрибут
parent="1"
для тех файлов, которые должны обязательно подключаться в дочерней теме из родительской темы дизайна. Пример для файлаindex.html
, который есть только в родительской теме и подключается дочерней темой:<file path="index.html" parent="1"> </file>
Такие файлы пользователь бекенда может редактировать в редакторе дизайна обоих приложений: и родительской, и дочерней тем дизайна.
В остальном родительская и дочерние темы дизайна устроены одинаково.
Переменные 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"}