Документация для разработчиков

Файл манифеста

Файл манифеста сопровождает каждый блок и описывает редактируемые части блока, а также содержит его название, описание, файлы JS/CSS.

  • Примеры
  • Поля манифеста блока
  • Ключ block
  • Ключ nodes
  • Ключ style
  • Ключ assets
  • Ключ cards
  • Ключ attrs
  • Идеология изменения стилей блока
  • Для работы анимации
  • Примеры

    Важно! Результат работы блока должен обязательно содержать минимум один тег, даже если это техническая информация.
    Например: <div>Данный блок работает только после публикации</div>.

    Пример блока:

        <section class="landing-block container-fluid px-0 g-theme-business-bg-blue-dark-v1">
            <div class="row no-gutters align-items-start">
    
                <div class="landing-block-card js-animation fadeIn col-md-6 col-lg-6 g-flex-centered">
                    <div class="landing-block-node-card-container text-center g-pa-30 w-100">
                       <div class="landing-block-node-card-header text-uppercase u-heading-v2-4--bottom g-brd-primary g-mb-40">
                           <h2 class="landing-block-node-title h1 u-heading-v2__title g-line-height-1_3 g-font-weight-600 g-font-size-40 g-color-white g-mb-minus-10">Help 
    make <br> money</h2>
                        </div>
    
    					<div class="landing-block-node-text g-color-gray-light-v2">
                                           <p>Sed feugiat porttitor nunc, non dignissim ipsum vestibulum in. Donec in blandit dolor. Vivamus a fringilla lorem, vel faucibus ante. Nunc
    ullamcorper, justo a iaculis elementum, enim orciviverra eros, fringilla porttitor lorem eros vel odio. Praesent egestas ac arcu ac convallis. Donec ut diam
    risus purus.</p>
    					</div>
                    </div>
                </div>
    
                <div class="landing-block-card js-animation fadeIn col-md-6 col-lg-6 g-flex-centered">
                    <div class="landing-block-node-card-container text-center g-pa-30 w-100">
                        <div class="landing-block-node-card-header text-uppercase u-heading-v2-4--bottom g-brd-primary g-mb-40">
                            <h2 class="landing-block-node-title h1 u-heading-v2__title g-line-height-1_3 g-font-weight-600 g-font-size-40 g-color-white g-mb-minus-10">Help 
    make <br> money</h2>
                        </div>
    
    					<div class="landing-block-node-text g-color-gray-light-v2">
    					<p>Sed feugiat porttitor nunc, non dignissim ipsum vestibulum in. Donec in blandit dolor. Vivamus a fringilla lorem, vel faucibus ante. Nunc
    ullamcorper, justo a iaculis elementum, enim orciviverra eros, fringilla porttitor lorem eros vel odio. Praesent egestas ac arcu ac convallis. Donec ut diam
    risus purus.</p>
    					</div>
                    </div>
                </div>
    
            </div>
        </section>
    
    

    Примечание: Соблюдать уникальность разметки в манифесте важно только в рамках одного блока. Между блоками одинаковые селекторы могут иметь даже абсолютно разный смысл.

    Вот так мог бы выглядеть файл манифеста для блока выше:

    <?php
    if (!defined('B_PROLOG_INCLUDED') || B_PROLOG_INCLUDED !== true)
    {
    	die();
    }
    
    use \Bitrix\Main\Localization\Loc;
    
    return array(
    	'block' => array(
    		'name' => "Текст в две колонки",
    		'section' => array('columns', 'text'),
    	),
    	'cards' => array(
    		'.landing-block-card' => array(
    			'name' => "Колонка",
    			'label' => array(
    				'.landing-block-node-subtitle',
    				'.landing-block-node-title',
    			),
    		),
    	),
    	'nodes' => array(
    		'.landing-block-node-title' => array(
    			'name' => "Заголовок",
    			'type' => 'text',
    		),
    		'.landing-block-node-text' => array(
    			'name' => "Текст",
    			'type' => 'text',
    		),
    	),
    	'style' => array(
    		'block' => array(
    			'block-default',
    		),
    		'nodes' => array(
    			'.landing-block-card' => array(
    				'name' => "Колонка",
    				'type' => array('columns', 'animation'),
    			),
    			'.landing-block-node-title' => array(
    				'name' => "Заголовок",
    				'type' => 'typo',
    			),
    			'.landing-block-node-text' => array(
    				'name' => "Текст",
    				'type' => 'typo',
    			),
    			'.landing-block-node-card-header' => array(
    				'name' => "Заголовок",
    				'type' => 'border-color',
    			),
    		),
    	),
    	'attrs' => array(
    		'.landing-block-node-text' => array(
    			'name' => 'Настройка текст',
    			'type' => 'dropdown',
    			'attribute' => 'data-copy',
    			'items' => array(
    				'val1' => 'Значение 1',
    				'val2' => 'Значение 2',
    			),
    		),
    	),
    	
    	'assets' => array(
    		'css' => array(
    			'https://site.com/aaa.css',
    		),
    		'js' => array(
    			'https://site.com/aaa.js',
    		),
    		'ext' => array(
    			'landing_form',
    		),
    	),
    );
    
    
    

    Поля манифеста блока


    Ключ block

    Ключ block содержит название и категорию блока (или массив категорий). В системе есть некоторое количество категорий, вот они:

    array(
        'cover' => Обложка,
        'about' => О проекте,
        'title' => Заголовок,
        'text' => Текстовый блок,
        'image' => Изображение,
        'gallery' => Галерея,
        'phrase' => Цитата,
        'benefits' => Преимущества,
        'columns' => Колонки,
        'separator' => Разделитель,
        'menu' => Меню,
        'footer' => Подвал сайта,
        'pages' => Список страниц,
        'tiles' => Плитка и ссылка,
        'forms' => CRM-форма,
        'team' => Команда,
        'feedback' => Отзывы,
        'schedule' => Расписание,
        'steps' => Этапы,
        'contacts' => Контакты,
        'social' => Социальные сети,
        'tariffs' => Тарифы,
        'partners' => Партнеры,
        'other' => Другое,
        'popular' => Популярные,
    );

    Если нужной категории нет в списке, просто напишите ее текстом в манифесте, категория будет добавлена. Ключом новой категории становится значение md5(strtolower($sectionName)).

    Помимо этого в данном ключе могут содержаться следующие настройки:

    • subtype – тип спец.блока, подробнее почитать можно здесь, допускает одиночное значение, или множественное в виде массива.

    Ключ assets

    Ключ assets содержит в себе JS и CSS, которые необходимо подключить при добавлении блока на страницу. Если несколько блоков используют один и тот же файл JS/CSS, не страшно, каждый файл подключится только один раз.

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

    Если вы используете какие-либо сторонние библиотеки в своем коде, которые уже подключены к основному ядру (например, jQuery), рекомендуется вывод команд в вашем скрипте оборачивать в системный метод. Тогда ваш код успешно инициализируется после всех системных подключений:

    BX.ready(function()
    {
        console.log($(window));
    });

    Ключ nodes

    Ключ nodes содержит блоки, содержимое которых разрешено к изменению контента. Здесь и далее применяется идеология css-селекторов для указания конечных нод. Вы должны это понимать, чтобы хорошо разобраться в дальнейшем API блоков.

    В качестве селектора рекомендуется выбирать говорящее имя класса. Чтобы отличать обычные классы, от структурных классов-селекторов, рекомендуется давать имени говорящий префикс. Например, "landing-block-node-". Один и тот же селектор допускается использовать в разных блоках. Селектор ноды не совпадает с селекторами карточек данного блока.

    Таким образом, в ключе nodes перечислены ключами селекторы, контент которых можно править, а также указано название ноды и ее тип. Подробнее прочитать про типы нод.

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

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

    allowInlineEdit – если передать значение ключа равное false, то данные ноды будут запрещены к редактированию инлайн, но в то же время будут доступны к редактированию через форму редактирования блока.

    group – группировка нод, если указать одинаковое значение данного ключа для нескольких нод (в рамках одного блока), то при клике на любую из нод откроется интерфейс редактирования всей группы нод.


    Ключ style

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

    Типы style могут быть следующими (в том числе их компоновка в виде массива):

    • box – блочные элементы
    • button – ссылки в виде кнопок
    • typo – вся типографика
    • typo-simple – упрощенная типографика
    • typo-link – типографика ссылок
    • paddings – все отступы
    • navbar – навигационные блоки
    • navbar-full – навигационные блоки
    • и некоторые другие...
    Полный список допустимых типов и какие css-стили он объединяет:

    Ключ cards

    Содержит так называемые карточки блока. Это повторяемый контент. Например, перечень услуг, фотографии сотрудников, и так далее. Разметив таким образом блок, в интерфейсе появится функционал клонирования, удаления, изменения карточек.

    В простейшем виде он выглядит так, как указано в манифесте. Если вы хотите, вы можете изучить также расширенное управление карточками.

    В качестве селектора рекомендуется выбирать говорящее имя класса. Чтобы отличать обычные классы, от структурных классов-селекторов, рекомендуется давать имени говорящий префикс. Например, "landing-block-card-". Один и тот же селектор вы можете использовать в разных блоках. Селектор карточки не совпадает с селекторами нод данного блока.

    Карточки одного селектора не должны быть с карточками другого селектора в одном общем родителе. Для случая общего родителя пользуйтесь расширенными карточками.


    Ключ attrs

    Описание атрибутов смотрите на отдельной странице.


    Идеология изменения стилей блока

    При изменении внешнего вида блоков, не происходит изменение атрибута style нод. Происходит изменение только классов. Например, если вы хотите поменять font-size, с 12 до 16, система изменит не 'font-size', а условный класс g-fontsize12 на g-fontsize16.


    Для работы анимации

    В штатном механизме для работы анимации нужно:

    • чтобы у ноды был класс js-animation;
    • чтобы в манифесте для данной ноды была настройка в разделе style - 'type' => 'animation';
    • чтобы анимация работала сразу по-умолчанию, ещё нужно добавить какой-то из классов анимации (в нашем примере блока - fadeIn), но не обязательно, настройка заработает и так.


    Пользовательские комментарии

    Мы будем рады, если разработчики добавят свои комментарии по практическому использованию методов системы.

    Для этого нужно всего лишь авторизоваться на сайте

    Но помните, что Пользовательские комментарии, несмотря на модерацию, не являются официальной документацией. Ответственность за их использование несет сам пользователь.

    Также Пользовательские комментарии не являются местом для обсуждения функционала. По подобным вопросам обращайтесь на форумы.
    © «Битрикс», 2001-2019, «1С-Битрикс», 2019
    Наверх