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

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

При создании сайта, работающего на основе нескольких приложений, почти всегда необходимо добиться идентичного вида разных страниц, сформированных этими приложениями.

Поскольку для оформления страниц фронтенда каждого приложения используется собственная тема дизайна (тема выбирается в настройках поселений каждого приложения), то самый простой способ добиться идентичного внешнего вида страниц — это скопировать основную разметку страницы и содержимое подключаемых CSS-файлов из темы одного приложения (например, из «Сайта») в аналогичные темы других приложений (например, «Блог» и «Фото»).

Копирование кода — самый простой способ, но его недостатки сразу же становятся очевидными, когда появляется необходимость вносить изменения в дизайн сайта — для этого приходится отслеживать изменения в теме одного приложения и вручную переносить их в темы остальных приложений.

Чтобы избежать копирования кода, рекомендуется использовать механизм наследования тем оформления.

Принцип использования родительских тем

Подключение родительских тем оформления позволяет использовать в вашей теме CSS-и JS-файлы и HTML-шаблоны любой другой (родительской) темы. В этом случае достаточно сформировать один общий набор CSS-стилей и HTML-разметки в родительской теме и затем указать эту тему в качестве родительской для других (дочерних) тем. Во всех дочерних темах вы сможете использовать те же самые CSS-стили и HTML-шаблоны, не копируя их исходный код. Такой подход используется в семействе тем оформления CUSTOM, которые можно установить через бекенд Вебасиста.

Для того чтобы использовать файлы родительской темы, добавьте в файл описания дочерней темы theme.xml атрибут parent_theme_id для элемента theme (подробнее о структуре темы оформления читайте в документации разработчика). Значением атрибута должно быть APP_ID приложения, в котором используется родительская тема, и идентификатор такой темы, разделённые двоеточием. Например, для того чтобы использовать тему CUSTOM приложения «Сайт» в качестве родительской, значение атрибута parent_theme_id в файле описания дочерней темы должно быть равно site:custom. Пример элемента theme с таким значением:

<theme id="custom" system="0" vendor="webasyst" author="Webasyst" app="blog" parent_theme_id="site:custom" version="1.0.0">

Указание родительской темы оформления в некоторых приложениях Вебасиста, например, «Блог» и «Фото», возможно средствами интерфейса бекенда. Для тем, используемых в других приложениях, потребуется редактирование файла описания дочерней темы theme.xml.

Внимание: файл описания theme.xml следует редактировать в директории, в которой хранится текущий экземпляр темы. Узнать текущую директорию темы можно в разделе «Настройки темы».

Файлы родительской темы могут использоваться дочерней темой по умолчанию либо вы можете в каждом конкретном случае вручную указывать URL'ы файлов нужной темы в разметке шаблонов, как описано ниже.

Подключение файлов родительской темы по умолчанию

Если дочерняя тема всегда должна использовать некоторые файлы родительской темы (т. е. эти файлы будут равноправно использоваться в обеих темах), необходимо в файле описания theme.xml дочерней темы добавить к соответствующим элементам file атрибут parent="1". Например:

<file path="extra.css" custom="0" parent="1">

После такого изменения дочерняя тема оформления более не будет использовать собственный файл с именем extra.css (даже если он существует) и при попытке доступа к нему тема будет обращаться к файлу с тем же именем из директории родительской темы.

Явное подключение файлов темы

Для подключения файлов какой-то конкретной (родительской либо дочерней) темы в HTML-шаблонах можно использовать следующие переменные Smarty:

$wa_theme_url

Эта переменная возвращает относительный URL директории темы, к которой принадлежит текущий шаблон. $wa_theme_url всегда точно указывает на физическое размещение шаблона, в котором она используется.

Например, если в дочерней теме по умолчанию используются некоторые файлы родительской темы (как описано в предыдущем разделе), то переменная $wa_theme_url в таких шаблонах всегда будет возвращать URL директории родительской темы (потому что эти шаблоны принадлежат родительской теме).

$wa_active_theme_url

Если в дочерней теме какой-либо шаблон родительской темы используется по умолчанию, то переменная $wa_active_theme_url будет возвращать разное значение в зависимости от того, какая тема в данный момент использует этот шаблон: URL директории родительской либо дочерней темы в зависимости от того, какое приложение (а точнее поселение, поскольку для каждого поселения может выбрана своя тема оформления) отвечает за формирование текущей страницы фронтенда.

$wa_parent_theme_url

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

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

$wa_active_theme_path

По аналогии с $wa_active_theme_url эта переменная возвращает путь к директории, в которой хранятся файлы темы текущего поселения.

$wa_parent_theme_path

По аналогии с $wa_parent_theme_url эта переменная возвращает путь к директории, в которой хранятся файлы родительской темы.

Переменные $wa_active_theme_path и $wa_parent_theme_path возвращают полный путь к соответствующей директории сервера и благодаря этому позволяют подключать HTML-шаблоны.

Примеры подключения файлов с помощью переменных:

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

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

Редактирование файлов родительской темы в бекенде

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

Этот символ означает, что вы можете редактировать такой файл родительской темы непосредственно в данном приложении, не переходя в настройки родительской темы, даже если она используется в другом приложении. В показанном выше примере редактирование файла index.html родительской темы (приложения «Сайт») доступно через интерфейс приложения «Блог». Можно рассматривать эту возможность как ссылку на файл родительской темы из интерфейса редактирования дочерней темы.

Краткое описание настройки общего дизайна сайта с помощью родительских тем оформления

  1. Создайте все основные файлы CSS-стилей и HTML-разметку в настройках темы одного приложения (например, «Сайта»). Эта тема оформления будет использоваться в качестве родительской.
  2. В файлах описания тем theme.xml остальных приложений (которые участвуют в формировании страниц фронтенда) укажите в значении атрибута parent_theme_id идентификатор приложения, в котором используется родительская тема, и идентификатор родительской темы, разделённые двоеточием.
  3. Если темы остальных приложений должны по умолчанию использовать некоторые файлы родительской темы, то в файлах описания дочерних тем отметьте такие файлы с помощью атрибута parent="1".