Битрикс Сайты 24

В 1С-Битрикс Управление Сайтом 18.0 стали доступны Сайты 24, добавленные изначально в облачный продукт — Битрикс24.

Сайты 24 позволяют без навыков программирования собирать страницу, как в конструкторе, заменяя текст, картинки и другую информацию без опасения сломать сайт.

Так выглядит рабочая область созданного сайта.

В данном примере мы будем использовать шаблон сайта, привычный любому разработчику 1С-Битрикс: Шапка + Подвал + Контентная часть.

Каждая область сайта — страница. Страницы в свою очередь состоят из Блоков.

Блоки можно использовать, как готовые, так и разработать самим.

Стандартных блоков довольно много, но бывают ситуации, когда их недостаточно и необходимо разрабатывать кастомные.

Для этого в папке /bitrix/blocks/<company_name>/ создадим папку блока header.

Поддержки папки /local/ пока нет, надеемся, это временно.

Структура Блока:

Картинка, которая будет отображаться в списке блоков – preview.jpg
Файл с блоком – block.php
Описание блока – .description.php
Стили блока – style.css
JS блока – script.php
Lang-файлы в папке /lang/<ru|en|etc>/.

В block.php разместим обычный html-код.

<div class="header wrapper">
    <div class="header__logo">
        <a href="#" class="logo__link">
            <span class="logo__name">Заголовок</span>
            <span class="logo__slogan">Подзаголовок</span>
        </a>
    </div>
    <div class="header__symbols">
        Логотипы
    </div>
    <div class="clear"></div>
</div>

Это наш будущий блок. Как видите, программирования тут нет :)

В файле .description.php размечаются данные, какие можно редактировать, а какие – нет.

<?php

if (!defined('B_PROLOG_INCLUDED') || B_PROLOG_INCLUDED !== true) {
    die();
}

use Bitrix\Main\Localization\Loc;

return [
    'block' => [
        'name' => Loc::getMessage('LANDING_TEST_SITE_HEADER'), // Название блока в lang-файле
        'section' => 'menu', // Раздел, в котором он будет отображаться
    ],
    'assets' => [
        'css' => [
            '/local/styles/header_block.css', // внешний css файл
        ],
    ],
    'nodes' => [
        '.logo__link' => [ // Блок с этим классом можно будет изменять
            'name' => 'Ссылка',
            'type' => 'link', // Тип блока
        ],
        '.logo__name' => [
            'name' => 'Заголовок',
            'type' => 'text',
        ],
        '.logo__slogan' => [
            'name' => 'Подзаголовок',
            'type' => 'text',
        ],
    ],
    'attrs' => [
        '.header__symbols' => [
            'name' => 'Скрывать логотипы?',
            'type' => 'checkbox',
            'attribute' => 'data-is-hidden', // Добавит к элементу data-is-hidden='["Y"]', при отмеченной галочке (такие элементы можно обрабатывать с помощью css и js)
            'items' => [
                ['name' => 'Скрывать логотипы?', 'value' => 'Y', 'checked' => true],
            ],
        ],
    ],
];

В итоге получаем вот такую форму.

Подробнее про параметры и структуру блока можно почитать на сайте 1С-Битрикс.

Добавляем созданный блок на страницу.

Шапку сайта мы добавили, давайте добавим блок с меню. В файл block.php добавляем верстку

<div class="nav">
    <div class="wrapper">
        <ul class="nav__list">
            <li class="nav__item">
                <a href="#" class="nav__link">Ссылка</a>
            </li>
            <li class="nav__item">
                <a href="#" class="nav__link">Ссылка</a>
            </li>
        </ul>
    </div>
</div>

А в файле .description.php размечаем:

<?php

if (!defined('B_PROLOG_INCLUDED') || B_PROLOG_INCLUDED !== true) {
    die();
}

return [
    'block' => [
        'name' => 'Меню',
        'section' => 'menu',
    ],
    'assets' => [
        'css' => [
            '/local/styles/menu_block.css', // внешний css файл
        ],
    ],
    'cards' => [
        '.nav__item' => [ // Повторяющийся блок – карточка
            'name' => 'Пункт меню',
        ],
    ],
    'nodes' => [
        '.nav__link' => [ // Как и в шапке – блок, доступный для редактирования
            'name' => 'Ссылка',
            'type' => 'link',
        ],
    ],
    'style' => [
        'block' => [
            'type' => ['display'],
        ],
        'nodes' => [
            '.nav__link' => [
                'name' => 'Ссылка',
                'type' => 'typo', // К ссылке можно применять типографические стили (размер шрифта, межстрочник итд)
            ],
        ],
    ],
];

Добавляем блок на сайт и редактируем данные

Стили для ссылок задаются при просмотре блока на вкладке «Дизайн»

Таким образом, без навыков программирования, можно внедрить готовую верстку в Сайты 24 и создать полноценный сайт.