“Правильная" интеграция верстки в Битрикс

Bitrix
21.09.2018

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

Если вы совсем новичок в Bitrix, то сначала лучше почитать официальную документацию о шаблонах (тут).

В Bitrix можно размешать свои шаблоны в двух местах, это /bitrix/templates и /local/templates. На этом месте мы сразу должны договориться раз и навсегда, папку /bitrix мы не трогаем, а то в 2018 году все еще встречаются проекты и довольно таки крупные, где много кастомного кода в папке /bitrix.

Как должна/может выглядеть “правильная” структура папки /local:

  • /templates - папка с кастомными шаблонами сайта, аналогично /bitrix/templates
  • /php_interface - аналогичный функционал /bitrix/php_interface
  • /includes - все файлы для подключений (номера телефонов, статический текст и т.п.)
  • /modules - кастомные модули
  • /components - кастомные компоненты

Дополнительно в своей практике использую еще эти папки в /local:

  • /ajax - папка с файлами для ajax обработок
  • /images - папка со всеми файлами для шаблона, можно конечно в папке шаблона их хранить, но мне так больше удобнее
  • /fonts - подключаемые шрифты, если таких нет в google fonts
  • /blocks - исторически сложилось, со времен работы в студии по веб-разработке, что все стили (CSS/SCSS) и JS файлы у меня хранятся в блоках, аналог БЭМ, можно почитать об этом тут, но для этого дополнительно использую свой кастомный модуль и сборщик gulp.

В последующих статьях расскажу о модуле, который использую для папки /blocks и как подключаю стили в компонентах, так как в моих проектах, компоненты вообще не имеют внутри себя файл style.css, все подключатся в component_epilog.php.

Дальнейшая интеграция стандартная, работает все так же как и в папке /bitrix

Итоги по данной статье:

  • Все кастомные модули, шаблоны, обработчики должны быть в папке /local, не в /bitrix;
  • В компонентах оставляем только PHP код, весь фронт JS и CSS, лучше хранить в другом месте и подключать его в component_epilog.php;