Создание собственного шаблона

Внимание! Мы настоятельно рекомендуем ознакомиться сначала с REST-документацией модуля Сайты, чтобы понять как модуль функционирует (тем более REST доступен и в коробочной версии). Данную документацию рассматривайте как подспорье при работе в коробке, когда вам действительно мало функционала REST, или вы хотите детальнее разобраться в API.

Мы постарались максимально подробно описать работу с шаблонами на этой странице. Тем не менее считаем, что вам обязательно нужно изучить раздел Шаблон дизайна сайта курса Разработчик Bitrix Framework.

В настройках модуля есть возможность сменить основной шаблон Сайтов24, который назвается landing24, или сменить для конкретного сайта. Рекомендуется прибегать к данному варианту только если вы исчерпали все возможности системного изменения и отдаете себе отчет, что это в мелочах может потребовать много сил и времени. В том числе на будущую поддержку. С другой стороны, такой подход может пригодиться, чтобы скопировать штатный шаблон и внести в него кардинальные изменения (например, с целью узкой оптимизации).

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

Итак, как создать свой собственный шаблон Сайта24? Давайте рассмотрим.

1. Прежде всего есть ряд условий к верстке:
   • шаблон должен быть на Bootstrap4 (для версий ниже 4 мы не даем никаких гарантий)
   • должна присутствовать возможность нарезать верстку в блоки, при перестановке таких блоков местами ничего не будет "перекошено", и так далее
   • в верстке и скриптах должна отсутствовать адресация по атрибуту id, так как каждый блок может быть размещен на странице несколько раз
2. Теперь можно переходить к созданию костяка шаблона. Для этого просто копируете необходимые файлы из каталога /bitrix/templates/landing24 в ваш каталог, находящийся рядом.

   Нужно скопировать файлы:

   • description.php (внутри которого задать имя вашего нового шаблона)
   • header.php (без изменений)
   • footer.php (без изменений)
   • template_styles.css (без изменений, в нем нужные стили для представления сайта и страниц: шапка, подвал, сайдбар)

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

   Полученный код шаблона (имя вашего каталога) необходимо прописать в настройках модуля. Общий для всех, или для конкретного сайта.

3. Далее работаем уже с вашим каталогом. Копируйте туда все необходимые файлы для вашей верстки (скрипты, стили, шрифты, изображения, спрайты, и так далее). В общем все то, что предполагается для корректной работы шаблона.
4. В шаблоне сайта подключаем скрипты и стили вашего шаблона по всем канонам (стили вверху, скрипты внизу).
5. Внимание! У вас должен получиться визуально пустой шаблон, не должно быть никаких видимых частей, "которые будут показываться на всех страницах". Дальнейшее действо предполагает, что вы нарезаете верстку в блоки, и именно из них редактором собираются страницы. Каждый такой блок должен представлять из себя исключительно "кусок" html, стилями зависящий от шаблона сайта.
6. Так как вы создаете свой шаблон, то скорее всего в нем не будут работать штатные блоки, зависящие от своей верстки. Рекомендуется создать конфигурационный файл в своем шаблоне и отключить системные блоки (bitrix) в ключе disable_namespace.

   'disable_namespace' => [
   	'bitrix'
   ],

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

   'enable_namespace' => [
   	'local'
   ],

8. Шаблон не может существовать без тем. Вам нужно создать как минимум одну тему с помощью обработчика (там же даны пояснения, что такое тема). Через данный же обработчик необходимо отключить все существующие темы в системе. Например, так:

   $eventManager = \Bitrix\Main\EventManager::getInstance();
   $eventManager->addEventHandler('landing', 'onGetThemeColors',
   	function(\Bitrix\Main\Event $event)
   	{
   		$result = new \Bitrix\Main\Entity\EventResult;
   		$colors = $event->getParameter('colors');
   
   		$colors = [];
   
   		$colors['mytheme1'] = array(
   			'name' => 'Моя тема 1',
   			'color' => '#cdcdcd',
   			'base' => true
   		);
   		$colors['mytheme2'] = array(
   			'name' => 'Моя тема 2',
   			'color' => '#373737',
   			'base' => true
   		);
   
   		$result->modifyFields(array(
   			'colors' => $colors
   		));
   
   		return $result;
   	}
   );

9. Так как вы создаете полностью отдельный шаблон, нет гарантии, что сторонние приложения смогут корректно на нем работать, в связи с чем не выводятся шаблоны создания сайтов и страниц, и партнерские блоки, зарегистрированные через REST. Чтобы нужные вам блоки и шаблоны создания появились, регистрируйте их с параметром site_template_id = #ваш_код_главного_шаблона#. Подробнее смотрите регистрацию шаблона и регистрацию блока.
10. Вполне вероятно, вам потребуется также подключить собственные библиотеки иконок, или убрать некоторые из штатной поставки. Хотя есть так же вариант, скопировать в ваш основной шаблон все стилевые файлы иконочных библиотек. В любом случае, обратите на это внимание, возможно вам полезным окажется страница по работе с библиотеками иконок.

Прочее

В настройках сайта можно включать показ кнопки "Вверх". Включенная опция добавляет на тег body класс g-upper-show, с которым работает скрипт, добавляя уже динамически кнопку.

В своем шаблоне вы можете реализовать с нуля показ кнопки, либо взять скрипт с системного шаблона по пути: /bitrix/templates/landing24/assets/js/helpers/go_to_init.js.

Также присутствует возможность переопределить работу системного показа кнопки "вверх" через обработчик показа хуков (код хука UP).