Натягиваем свою вёрстку на Битрикс

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

Нужна своя отдельная тестовая CMS с модулем «Информационные блоки» и доступом к файлам и админке. В архиве CMS нет. Для следующей лабы понадобятся PHP CLI в окружении сайта и Python 3.10+ на вашем компьютере. Если установки пока нет, можно прочитать урок и открыть исходный HTML; практику продолжить после подготовки своей среды. На рабочем сайте эти действия не выполняйте.

Пример воспроизведён автором на Битрикс 26.150.0 («Старт»), PHP 8.3.6 и MySQL 8.0.46. Названия пунктов админки могут отличаться в другой версии. Учебная компания «Ритм» и её новости вымышлены.

Сначала посмотрите исходную страницу

Скачайте учебный пакет, версия 1, распакуйте и откройте layout/index.html. Рядом лежит styles.css. Контрольная сумма SHA-256 позволяет проверить, что файл скачался целиком. Подробная подготовка есть в README.md.

Найдите три границы: общая шапка заканчивается перед содержимым страницы, затем идут заголовок и карточки, после них начинается общий подвал. Так разделим файлы:

/local/templates/rp_studio/
    description.php          имя шаблона для админки
    header.php               начало документа, шапка, открытие main
    footer.php               закрытие main, подвал, конец документа
    template_styles.css      общие стили
/rp-studio/index.php         содержимое учебной главной
/rp-studio/news/index.php    содержимое страницы новостей

В site-files/ уже лежит результат этого разделения. Сначала сравните его с исходным HTML: важно понять, куда ушла каждая часть. Когда будете переносить собственный макет, разделите его так же, а не вкладывайте весь документ в header.php.

Шапка: оставляем место для CMS

В header.php сохраняем doctype, html, head и начало body. Внутри нужны три вызова Битрикса. Сокращённая схема показывает их расположение:

<?php
if (!defined('B_PROLOG_INCLUDED') || B_PROLOG_INCLUDED !== true) {
    die();
}
?>
<!doctype html>
<html lang="ru">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title><?php $APPLICATION->ShowTitle(); ?></title>
    <?php $APPLICATION->ShowHead(); ?>
</head>
<body class="rp-studio-page">
<?php $APPLICATION->ShowPanel(); ?>
<!-- Здесь шапка и меню вашего макета. -->
<main id="content">

ShowHead() выводит подключённые CMS стили, скрипты и метаданные. ShowTitle() оставляет заголовок страницы управляемым. ShowPanel() даёт администратору панель редактирования. Если их потерять, страница может выглядеть нормально у гостя, но перестать нормально работать у редактора.

В пакетном header.php есть и собственная шапка макета. Схема выше объясняет вызовы; она не заменяет полный файл. В footer.php закрываются main и те контейнеры, которые открыли в шапке, затем идут подвал, body и html.

Страница: только её содержимое

Страница подключает общие части через CMS. Например, начало учебной главной:

<?php
require $_SERVER['DOCUMENT_ROOT'] . '/bitrix/header.php';
$APPLICATION->SetTitle('Студия Ритм');
?>
<section class="intro">
    <h1><?php $APPLICATION->ShowTitle(false); ?></h1>
    <p>Делаем сайты и рассказываем о своей работе.</p>
</section>
<?php require $_SERVER['DOCUMENT_ROOT'] . '/bitrix/footer.php';

В файле страницы больше нет второго head, меню и подвала. Битрикс выбирает шаблон сайта и собирает общий документ. Заголовок из SetTitle() попадёт и в отложенный вывод title в шапке. На странице новостей задайте «Новости студии»: две страницы должны иметь разные заголовки.

Стили и пути

Общие стили лежат в template_styles.css; Битрикс подключает их через ShowHead(). Наши правила ограничены .rp-studio, чтобы не перекрасить панель администратора. Для своих картинок и скриптов в шаблоне используйте путь от шаблона:

<img src="<?= SITE_TEMPLATE_PATH ?>/images/logo.svg" alt="Название студии">

Это пример для вашего файла images/logo.svg; в нашем макете логотип текстовый, такого файла в пакете нет. Путь images/logo.svg без начала от корня браузер стал бы искать относительно /rp-studio/news/, и на вложенной странице вышел бы 404. Проверьте вкладку Network, прежде чем искать проблему в кеше.

Подключаем шаблон к учебному разделу

1. Сохраните резервную копию тестовой CMS. Проверьте, что пути /rp-studio/ и /local/templates/rp_studio/ свободны. Скопируйте содержимое site-files/ в корень CMS, сохраняя обычные права файлов сайта. Инструменты из tools/ туда не копируйте.
2. В админке откройте «Настройки → Настройки продукта → Сайты → Список сайтов», затем свой сайт. Запишите его ID: он потребуется для подготовки инфоблоков.
3. В шаблонах сайта добавьте rp_studio. Укажите условие «Для папки или файла» /rp-studio/. Если интерфейс показывает PHP-условие, это CSite::InDir('/rp-studio/'). Меньшая сортировка проверяется раньше: учебное условие должно стоять перед общим шаблоном. Прежние строки оставьте.
4. Откройте /rp-studio/ и /rp-studio/news/ как гость. Затем прежнюю главную: учебный шаблон должен действовать только внутри /rp-studio/.

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

Принимаем результат

На широкой странице карточки образуют сетку; на телефоне идут одна под другой. Проверьте ширину 390 px: горизонтальной прокрутки нет, меню читается. В гостевом окне видны шапка, три карточки и подвал; после входа администратором появляется панель CMS, а оформление не ломается. В Network нет потерянных ресурсов.

Если получилось иначе

• Шапка и подвал задвоились: проверьте, не остались ли они одновременно в странице и в файлах шаблона. На итоговой странице нужен один документ HTML.
• Шаблон не появился: проверьте ID сайта, путь папки и порядок условий. Временная текстовая метка в своём header.php покажет, выполняется ли этот файл.
• CSS не загрузился: проверьте имя template_styles.css, вызов ShowHead() и ответ ресурса в Network. Если файл загрузился, дальше проверяйте селекторы.
• Главная страница тоже стала «Ритмом»: условие шаблона получилось общим. Верните прежние настройки и ограничьте новый шаблон папкой /rp-studio/.

Теперь переходите к лабе об управляемых новостях. Официальные источники: шаблоны сайта, подключение стилей. Уведомление об использовании документации.