Experience Builder (XB)

В этой статье вы узнаете, как интегрировать в ваше приложение Experience Builder, инструмент для контекстного редактирования.

Experience Builder (XB) - инструмент, который позволяет авторам контента выполнять контекстное редактирование всех полей, указанных в типах контента страниц и компонентов. Разработчики, работающие с DC CMS, должны интегрировать свои приложения с XB, сообщая XB, какому элементу на экране соответствует каждое из полей модели. Для более подробного понимания модели обратитесь к статье "Моделирование контента в DC CMS".

Создание сайтов с поддержкой Experience Builder

Конкретная стратегия интеграции зависит от типа вашего приложения, но в общем процесс включает в себя маркировку элемента контента, отображающего контент DC CMS, и инициализацию XB. DC CMS предоставляет нативную интеграцию XB для приложений FreeMarker и React, в то время как для других типов приложений (например, Angular, Vue и т. д.) можно интегрироваться с XB, используя базовые библиотеки, которые поддерживают приложения на FreeMarker и React. Обратитесь к соответствующим разделам ниже для инструкций по интеграции, основанным на вашем конкретном типе приложения.

Для интеграции с XB выполните следующие шаги:

Зарегистрируйте или пометьте элементы полей контента DC CMS: укажите HTML-элемент, представляющий каждое поле модели. Регистрацию можно выполнить вручную (вызывая конкретные методы из библиотек XB JavaScript) или добавив определенный набор атрибутов к каждому тегу.
Инициализируйте XB: это можно сделать вручную или вызвав конкретные методы библиотек XB JavaScript.

XB использует систему координат, где разработчики сообщают CMS о соответствии каждого элемента/компонента на странице/приложении конкретному полю типа контента. Система координат включает в себя следующие данные:

Путь: путь к элементу контента (например, /site/components/features/main_feature.xml)
Идентификатор модели (ID объекта, локальный ID): внутренний GUID для каждого объекта контента в DC CMS (например, 5a06e244-64f4-4380-8619-1c726fe38e92)
Идентификатор поля: ID поля в типе контента (например, heroTitleText_t)
- Идентификаторы полей могут быть составными, состоящими из полного пути к этому полю, когда такое поле вложено в повторяющиеся группы (например, carouselSlides_o.slideTitle_t)
Индекс: индекс элемента внутри коллекции-контейнера (например, 0) (используется при работе с коллекциями (например, с селекторами компонентов или группами повторений)
- Индексы могут быть составными и включать полный путь индексов к элементу в этой коллекции (например, 0.1)

Движок контекстного редактирования (In-Context Editing) XB иногда требует немного более развернутой структуры разметки для направления авторов ко всей модели и обеспечения редактирования встроенного текста. Для этого зарегистрируйте каждую часть модели как элемент на вашем экране, сохраняя иерархию полей в вашей разметке.

Например, рассмотрим карусель, где карусель смоделирована как компонент DC CMS, который имеет поле группы повторений под названием slides_o, которое имеет два внутренних поля под названиями caption_s и image_s

Разметка для такой карусели может выглядеть следующим образом:


      <div class="carousel">
  <div class="slide">
    <img src="slide1.png" alt="">
    <h2>Slide One</h2>
  </div>
  <div class="slide">
    <img src="slide2.png" alt="">
    <h2>Slide Two</h2>
  </div>
</div>

Чтобы зарегистрировать каждую часть модели, нам нужно было бы ввести новый элемент:


      <div class="carousel">              <!-- Component (Carousel) -->
  <div>                             <!-- Repeating group (slides_o) — Additional element introduced -->
    <div class="slide">             <!-- Repeat group item (slides_o[0]) -->
      <img src="slide1.png" alt=""> <!-- Repeat group item field (slides_o[0].images_s) -->
      <h2>Slide One</h2>            <!-- Repeat group item field (slides_o[0].caption_s) -->
    </div>
    <div class="slide">             <!-- Repeat group item (slides_o[1]) -->
      <img src="slide2.png" alt=""> <!-- Repeat group item field (slides_o[1].images_s) -->
      <h2>Slide Two</h2>            <!-- Repeat group item field (slides_o[1].caption_s) -->
    </div>
  </div>
</div>

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

То есть, элемент компонента является родителем элемента группы повторений, который является родителем элементов группы повторений, которые являются родителями полей элемента группы повторений, как показано ниже:


      component
  repeat-group
    item
      item-fields

Например, вы можете переместить дополнительный div в качестве верхнего оберточного элемента (wrapper), и тем самым представить компонент вместо группы повторений. Естественно, группа повторений затем будет представлена div с классом carousel.


      <div>                    <!-- Component (Carousel) -->
  <div class="carousel"> <!-- Repeating group (slides_o) -->
    ...
  </div>
</div>

Правила Experience Builder

HTML-элемент, зарегистрированный в Experience Builder как поле, должен содержать только этот контент в развернутом виде.
- Элементы, представляющие поля типа text, html и другие простые значения, должны выводить значение контента непосредственно внутри них без промежуточных элементов. Например:


      <div class="byline">
 by
 <!-- Author field (author_s) --><span>${author_s}</span>

Элементы, представляющие коллекции (т.е. группы повторений или коллекции компонентов), должны иметь свои item-элементы в качестве прямых дочерних элементов. Например:


      <!-- Component collection field (components_o) -->
<div>
   <!-- Component collection item (components_o) -->
   <div class="column">
      <div class="feature>
         ...
      </div>
   </div>
</div>

FreeMarker

В приложениях FreeMarker для интеграции с Experience Builder вы будете использовать макросы, предоставленные DC CMS, которые, в свою очередь, установят все правильные подсказки (т.е. html-атрибуты) в разметке для движка контекстного редактирования, чтобы сделать объекты доступными для редактирования авторами.

Как уже упоминалось, предоставление координат движку контекстного редактирования XB является неотъемлемым условием для идентификации каждой модели/поля. Поэтому, помимо других аргументов, каждый макрос оснащен основными параметрами, описанными ниже:

Модель ($model)
- Включение параметра модели позволяет DC CMS внутренне извлекать путь и идентификатор модели (также известный как идентификатор объекта).
- Следует отметить, что модель является необязательной, поскольку поведение по умолчанию включает использование переменной контекста FreeMarker contentModel для текущего шаблона.
  - Если необходимо использовать другую модель, укажите аргумент $model внутри макросов.
- Соответствующими атрибутами HTML для модели являются data-dccms-model-path и data-dccms-model-id.
Идентификатор поля ($field)
- Для идентификатора поля соответствующим атрибутом HTML является data-dccms-field-id.
Индекс ($index)
- HTML-атрибут для индекса - data-dccms-index.

Например, макрос элемента div:


      <@cms.div $field="columns_o.items_o" $index="0.1">
  ...
</@cms.div>

Вышеприведенное приведет к распечатке в HTML div со всеми соответствующими подсказками для движка контекстного редактирования, чтобы выбрать этот элемент как доступный для редактирования. Такой div выглядел бы так:


      <div
     data-dccms-model-path="/site/website/index.xml"
     data-dccms-model-id="f830b94f-a6e9-09eb-9978-daafbfdf63ef"
     data-dccms-field-id="columns_o.items_o"
     data-dccms-index="0.1"
   >...</div>


      <#import "/templates/system/common/dc.ftl" as dc/>

После импорта dc.ftl инициируйте преобразование тегов в редактируемые элементы, преобразовав каждый тег, представляющий поля модели контента DC CMS, из обычных тегов HTML в макротег. Ссылаясь на предыдущий пример карусели, описанный выше, мы ввели дополнительный элемент для обозначения группы повторений, что привело к следующей разметке:


      <div class="carousel">              <!-- Component (Carousel) -->
  <div>                             <!-- Repeating group (slides_o) — Additional element introduced -->
    <div class="slide">             <!-- Repeat group item (slides_o[0]) -->
      <img src="slide1.png" alt=""> <!-- Repeat group item field (slides_o[0].images_s) -->
      <h2>Slide One</h2>            <!-- Repeat group item field (slides_o[0].caption_s) -->
    </div>
    <div class="slide">             <!-- Repeat group item (slides_o[1]) -->
      <img src="slide2.png" alt=""> <!-- Repeat group item field (slides_o[1].images_s) -->
      <h2>Slide Two</h2>            <!-- Repeat group item field (slides_o[1].caption_s) -->
    </div>
  </div>
</div>

Предположим, что вы используете определенную библиотеку CarouselJS, которая обязывает использовать элемент div.carousel в качестве прямого родителя элементов div.slide. Переорганизуйте элементы для компонента и группы повторений:


      <div>                    <!-- Component (Carousel) -->
  <div class="carousel"> <!-- Repeating group (slides_o) -->
    ...
  </div>
</div>

Начните процесс преобразования, заменяя каждый тег соответствующим макро DC CMS. Добавьте префикс @dc. ко всем тегам, преобразуя, например, <div>...</div> в <@cms.div>...</@cms.div>, <h1> в <@dc.h1>, <img> в <@dc.img>, а span в <@cms.span>.

Исключения из этого правила следующие:

Для элементов группы повторений и их потомков используйте @dc.renderRepeatGroup.
Для элементов управления селектором элементов, содержащих компоненты для отображения, используйте @dc.renderComponentCollection.

Чтобы применить эти преобразования к нашему примеру с каруселью, определите корневой компонент с помощью @dc.div.


      <#import "/templates/system/common/dc.ftl" as dc/>
<@dc.div>
  ...
</@dc.div>

Далее создайте группу повторений и ее элементы. Используйте @dc.renderRepeatGroup для отображения групп повторений:


      <@dc.renderRepeatGroup
  $field="slides_o"
  $containerAttributes={ "class": "carousel" }
  $itemAttributes={ "class": "slide" };
  item, index
>
  <@dc.img
    $field="slides_o.image_s"
    $index="${index}"
    src="${item.image_s}"
    alt=""
  />
  <@dc.h2 $field="slides_o.caption_s" $index="${index}">
    ${item.caption_html!''}
  </@dc.h2>
</@dc.renderRepeatGroup>

Макро renderRepeatGroup выполняет несколько функций:

Выводит элемент контейнера группы повторений.
Выводит элементы группы повторений.
Для каждого элемента выводит переданное тело (например, <#nested />) в макро.

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

Готовый шаблон FreeMarker для компонента carousel выглядит так:


      <#import "/templates/system/common/dc.ftl" as dc />
<@dc.componentRootTag>
  <@dc.renderRepeatGroup
    $field="slides_o"
    $containerAttributes={ "class": "carousel" }
    $itemAttributes={ "class": "slide" };
    item, index
  >
    <@dc.img
      $field="slides_o.image_s"
      $index="${index}"
      src="${item.image_s!''}"
      alt=""
    />
    <@dc.h2 $field="slides_o.caption_s" $index="${index}">
      ${item.caption_html!''}
    </@dc.h2>
  </@dc.renderRepeatGroup>
</@dc.componentRootTag>

Макросы и утилиты FreeMarker

Внутри dc.ftl вы столкнетесь с тремя основными макросами:

head: служит для вставки шаблонов из плагинов.
body_top: также используется для вставки шаблонов из плагинов.
body_bottom: не только вставляет шаблоны из плагинов, но также используется контекстным редактором, как подробно описано ниже.

Макросы head, body_bottom и body_top должны быть стратегически размещены в соответствии с их названиями. Их основная функция - выводить сценарии, таблицы стилей или другие экзекуции в определенные моменты рендеринга страницы или в определенных позициях. Плагины используют эти "хуки", чтобы интегрироваться бесшовно на страницу, что делает важным для ftl-шаблонов располагать их в соответствии с их названиями. Например, плагин Google Tag Manager стремится быть вставленным в начале head для печати своего сценария, используя хук <@head />.

После импорта dc.ftl у вас будет доступ ко всем доступным макросам XB, которые описаны ниже.


      <#import "/templates/system/common/dc.ftl" as dc/>

initExperienceBuilder

Запускает движок контекстного редактора и устанавливает связь между страницей/приложением и CMS Studio. Этот вызов необходим для предоставления CMS Studio возможности управлять страницей и включать контекстный редактор для XB.

Макрос initExperienceBuilder автоматически запускается с помощью <@dc.body_bottom />, но у вас есть возможность исключить его, вызвав body_bottom с параметром initializeInContextEditing=false.


      <@dc.body_bottom initializeInContextEditing=false />

В таком случае вам нужно будет вызвать initExperienceBuilder вручную.

Параметр	Тип	Описание
isAuthoring	boolean	Не обязателен, поскольку по умолчанию используется контекстная переменная FreeMarker `modePreview`. Когда `isAuthoring=false`, в контекстное редактирование пропускается полностью. Предназначено для запуска в production-окружении.
props	JS object string	Передается непосредственно в среду выполнения JavaScript. Хотя он должен быть передан макросу в виде строки, содержимое строки должно быть допустимым объектом JavaScript. Используйте его для настройки инициализации DC JavaScript SDK.

При вызове initExperienceBuilder возвращается объект с функцией/свойством unmount, позволяющим вам эффективно отключить XB от текущей страницы.

Примеры:


      <@initExperienceBuilder />


      <@initExperienceBuilder props="{ themeOptions: { ... } }" />


      <@dc.body_bottom xbProps="{ scrollElement: '#mainWrapper' }" />
<#-- `body_bottom` internally invokes `initExperienceBuilder` →

Макросы тегов HTML-элементов

DC CMS предлагает обширную коллекцию макросов, ориентированных на распространенные элементы HTML, используемые при создании веб-сайтов и веб-приложений. Каждый из этих тегов в основном служит заменой базового макроса @dc.tag. Этот макрос становится особенно полезным, когда вы хотите включить элементы, не входящие в стандартные макросы (например, пользовательские элементы HTML) или когда есть необходимость динамически указать тег, который следует использовать, как показано в приведенных ниже примерах.

Доступны следующие теги: article, a, img, header, footer, div, section, span, h1, h2, h3, h4, h5, h6, ul, p, ul, li, ol, iframe, em, strong, b, i, small, th, caption, tr, td, table, abbr, address, aside, audio, video, blockquote, cite, em, code, nav, figure, figcaption, pre, time, map, picture, source, meta, title.

Параметр	Описание
`$model`	Модель контента, к которой принадлежит этот элемент. По умолчанию в `$model` используется контекстная переменная шаблона Freemarker `contentModel`, обозначающая текущую страницу или компонент, поэтому в большинстве случаев указывать ее нет необходимости (за исключением случаев, когда вы собираетесь использовать другую модель, отличную от значения по умолчанию.
`$field`	Идентификатор поля в определении типа контента текущей модели. Внутри групп повторений он выражается в виде строк, разделенных точкой, представляющих полный путь поля текущего поля (например, `slides_o.image_s`)
`$index`	В контексте коллекции, такой как группа повторений или коллекция компонентов, указывает индекс текущего элемента. При вложенности в группы повторений указывает полный путь индекса к элементу (например, `0.1`)
HTML-атрибуты	Для удобства макро-теги будут выводить в HTML все атрибуты, которые вы передаете им, и которые не являются одним из пользовательских аргументов DC CMS (таких как `$model`, `$field` и т. д.). Например, если у вас есть `<div class="carousel">`, вы можете преобразовать его в DC-тег, например, `<@dc.div class="carousel" ...>`. Если вы используете атрибуты, которые не соответствуют синтаксису FreeMarker (например, `data-my-attribute="foo"`), используйте аргумент макросов `$attributes` вместо этого.
`$attributes`	Html атрибуты для печати на элемент. Особенно полезно для атрибутов, которые нельзя передать в макрос как прямой аргумент из-за ограничений синтаксиса FreeMarker. Например, `<div data-foo="bar">`, преобразование его как `<@dc.div data-foo="bar" ...>` приведет к исключению FreeMarker; вместо этого используйте `<@dc.div $attrs={ "data-foo": "bar" } ...>`.
`$tag`	Укажите, какой тег использовать. Например `<@dc.tag $tag="article"... />` распечатает тег `<article>`. Используйте только в том случае, если вы используете `@dc.tag`, что в большинстве случаев вам не нужно, поскольку вы можете использовать псевдоним тега (например, `<@dc.article ... />`).

Примеры:

В примере ниже:

Корневой тег модели шаблона не содержит параметр $field, так как он не является полем; он представляет саму модель.
Указание $model обычно не требуется, поскольку по умолчанию макросы используют переменную модели (автоматически устанавливаемую системой в области шаблона рендеринга, содержащую текущую модель шаблона).
Наконец, параметр $index не используется в обоих тегах, поскольку ни один из них не является элементом коллекции.


      <@dc.section>
      <@dc.h1 $field="heading_t">${model.heading_t}</@dc.h1>
    </@dc.section>

В этом примере html-тег печатается динамически, используя то, что указано в модели содержимого:


      <@dc.tag $tag=(contentModel.headingLevel_s!'h2')>
  <@dc.span $field"text_s">${model.text_s}</@dc.span>
</@dc.tag>

renderComponentCollection

Используется для рендеринга элементов управления “Селектор элементов”, которые содержат компоненты. Он выводит тег для поля (селектор элемента) и теги для каждого из элементов контейнера компонента.

Способы моделирования коллекций компонентов в движке контекстного редактора представлены в следующей иерархии:


      <FieldTag>
  <Item0>
    <ComponentTag>
      ...
  <Item1>
    <ComponentTag>
      ...
  <Item2>
    <ComponentTag>
      …

Обратите внимание, что тег элемента сам по себе не является тегом компонента, вместо этого компонент содержится в элементе, и это не элемент.

Параметр	Описание
`$model`	Модель контента, к которой принадлежит этот элемент. По умолчанию в `$model` используется контекстная переменная шаблона Freemarker `contentModel`, обозначающая текущую страницу или компонент, поэтому в большинстве случаев указывать ее нет необходимости (за исключением случаев, когда вы собираетесь использовать другую модель, отличную от значения по умолчанию)
`$field`	Идентификатор поля в определении типа контента текущей модели. Внутри групп повторений он выражается в виде строк, разделенных точкой, представляющих полный путь к текущему полю (например, `slides_o.image_s`)
`$index`	В контексте коллекции, такой как группа повторений или коллекция компонентов, указывает индекс текущего элемента. При вложенности в группы повторений указывает полный путь индекса к элементу (например, `0.1`)
`$fieldCarryover`	Если вложено в группы повторений, точечная строка полного пути к текущему полю (например, `repeatOne_o.repeatTwo_s`), без самого текущего поля, так как макрос объединяет их
`$indexCarryover`	Если вложено в группы повторений, полный индексный путь к этому элементу управления (например, `0.1`)
`$collection`	Содержит коллекцию, через которую макрос внутренне выполняет итерации. По умолчанию установлено значение `$model[$field]`, поэтому в большинстве случаев нет необходимости указывать; однако вы можете вручную указать коллекцию, которая будет перебираться при вызове макроса, если это необходимо
`$containerAttributes`	HTML-атрибуты HTML для печати на элементе поля.
`$containerTag`	Тег, который следует использовать для элемента поля.
`$itemTag`	Тег, который следует использовать для тегов элементов.
`$itemAttributes`	HTML-атрибуты для печати на item-элементах.
`$nthItemAttributes`	HTML-атрибуты для вывода по индексу элемента. Например, `$nthItemAttributes={ 0: { "class": "active" } }` применит класс с именем `active` только к первому элементу в коллекции.
`renderComponentArguments`	Макрос `renderComponent` поддерживает предоставление дополнительных аргументов (аргумент `additionalModel` при использовании напрямую) в контексте шаблона компонента. Вы можете отправлять их через этот параметр. `renderComponentArguments` будут отправлены ко всем элементам.

Пример:


      <@dc.renderComponentCollection $field="mainContent_o" />

Приведенный выше пример выведет следующий HTML:


      <!-- Field element -->
<section
  data-dccms-model-path="/site/website/index.xml"
  data-dccms-model-id="8d7f21fa-5e09-00aa-8340-853b7db302da"
  data-dccms-field-id="mainContent_o"
>
  <!-- Item 0 element -->
  <div
    data-dccms-model-path="/site/website/index.xml"
    data-dccms-model-id="8d7f21fa-5e09-00aa-8340-853b7db302da"
    data-dccms-field-id="mainContent_o"
    data-dccms-index="0"
  >
    <!-- Component @ Item 0 -->
    <div
      data-dccms-model-path="/site/components/component_hero/bd283e3b-3484-6b9e-b2d5-2a9e87128b69.xml"
      data-dccms-model-id="bd283e3b-3484-6b9e-b2d5-2a9e87128b69"
    >
      ...
    </div>
  </div>
  <!-- Item 1 element -->
  <div
    data-dccms-model-path="/site/website/index.xml"
    data-dccms-model-id="8d7f21fa-5e09-00aa-8340-853b7db302da"
    data-dccms-field-id="mainContent_o"
    data-dccms-index="1"
  >
    <!-- Component @ Item 1 -->
    <div
      data-dccms-model-path="/site/website/index.xml"
      data-dccms-model-id="2e8761a9-1268-581b-f8d0-52cad6a73e0a"
    >
      ...
    </div>
  </div>
</section>

renderRepeatGroup

Используется для отображения элементов управления для групп повторений и генерирует тег для поля (группы повторений), а также теги для каждого из ее элементов.

Иерархия, в которой устроены коллекции групп повторений в движке контекстного редактора, следующая:


      <FieldTag>
  <Item0>
      ...
  <Item1>
      ...
  <Item2>
    <ComponentTag>
      ...
  ...

Группы повторений позволяют использовать сложные/составные аргументы $field и $index, когда они включают в себя вложенные группы повторений или коллекции компонентов.

Параметр	Описание
`$model`	Модель контента, к которой принадлежит этот элемент. По умолчанию в `$model` используется контекстная переменная шаблона Freemarker `contentModel`, обозначающая текущую страницу или компонент, поэтому в большинстве случаев указывать ее нет необходимости (за исключением случаев, когда вы собираетесь использовать другую модель, отличную от значения по умолчанию)
`$field`	Идентификатор поля в определении типа контента текущей модели. Внутри групп повторений он выражается в виде строк, разделенных точкой, представляющих полный путь к текущему полю (например, `slides_o.image_s`)
`$index`	В контексте коллекции, такой как группа повторений или коллекция компонентов, указывает индекс текущего элемента. При вложенности в группы повторений указывает полный путь индекса к элементу (например, `0.1`)
`$fieldCarryover`	Если вложено в группы повторений, точечная строка полного пути к текущему полю (например, `repeatOne_o.repeatTwo_s`), без самого текущего поля, так как макрос объединяет их
`$indexCarryover`	Если вложено в группы повторений, полный индексный путь к этому элементу управления (например, `0.1`)
`$collection`	Содержит коллекцию, через которую макрос внутренне выполняет итерации. По умолчанию установлено значение `$model[$field]`, поэтому в большинстве случаев нет необходимости указывать; однако вы можете вручную указать коллекцию, которая будет перебираться при вызове макроса, если это необходимо
`$containerAttributes`	HTML-атрибуты HTML для печати на элементе поля.
`$containerTag`	Тег, который следует использовать для элемента поля.
`$itemTag`	Тег, который следует использовать для тегов элементов.
`$itemAttributes`	HTML-атрибуты для печати на item-элементах.
`$nthItemAttributes`	HTML-атрибуты для вывода по индексу элемента. Например, `$nthItemAttributes={ 0: { "class": "active" } }` применит класс с именем `active` только к первому элементу в коллекции.

Пример:


      <@dc.renderRepeatCollection
  $containerTag="section"
  $containerAttributes={ "class": "row" }
  $itemTag="div"
  $itemAttributes={ "class": "col" }
  $field="columns_o";
  <#-- Nested content values passed down by the macro: -->
  item, index
>
  <@dc.renderComponentCollection
    $field="items_o"
    $fieldCarryover="columns_o"
    $indexCarryover="${index}"
    $model=(contentModel + { "items_o": item.items_o })
  />
</@dc.renderRepeatCollection>

Пример выше выведет следующий html:


      <!-- The repeat group field element (columns_o) -->
<section
  class="row"
  data-dccms-model-path="/site/website/index.xml"
  data-dccms-model-id="f830b94f-a6e9-09eb-9978-daafbfdf63ef"
  data-dccms-field-id="columns_o"
>
  <!-- Repeat group item 0 element (i.e. columns_o[0]) -->
  <div
    class="col"
    data-dccms-model-path="/site/website/index.xml"
    data-dccms-model-id="f830b94f-a6e9-09eb-9978-daafbfdf63ef"
    data-dccms-field-id="columns_o"
    data-dccms-index="0"
  >
    <!-- An item selector field named `items_o` that's inside the repeat group (i.e. columns_o[0].items_o) -->
    <div
      data-dccms-model-path="/site/website/index.xml"
      data-dccms-model-id="f830b94f-a6e9-09eb-9978-daafbfdf63ef"
      data-dccms-field-id="columns_o.items_o"
      data-dccms-index="0"
    >
      <!-- columns_o[0].items_o[0] -->
      <div
        data-dccms-model-path="/site/website/index.xml"
        data-dccms-model-id="f830b94f-a6e9-09eb-9978-daafbfdf63ef"
        data-dccms-field-id="columns_o.items_o"
        data-dccms-index="0.0"
      >
        <!-- Embedded component hosted @ columns_o[0].items_o[0] -->
        <h2
          class="heading-component-root"
          data-dccms-model-path="/site/website/index.xml"
          data-dccms-model-id="57a30ade-f167-5a8b-efbe-30ceb0771667"
        >
          <span
            data-dccms-model-path="/site/website/index.xml"
            data-dccms-model-id="57a30ade-f167-5a8b-efbe-30ceb0771667"
            data-dccms-field-id="text_s"
          >
            This is a heading
          </span>
        </h2>
      </div>
      <!-- columns_o[0].items_o[1] -->
      <div
        data-dccms-model-path="/site/website/index.xml"
        data-dccms-model-id="f830b94f-a6e9-09eb-9978-daafbfdf63ef"
        data-dccms-field-id="columns_o.items_o"
        data-dccms-index="0.1"
      >
        <!-- Embedded component hosted @ columns_o[0].items_o[1] -->
        <div
          class="paragraph-component-root"
          data-dccms-model-path="/site/website/index.xml"
          data-dccms-model-id="fff36233-34d9-f476-0a35-00b507b9420b"
        >
          <p
            data-dccms-model-path="/site/website/index.xml"
            data-dccms-model-id="fff36233-34d9-f476-0a35-00b507b9420b"
            data-dccms-field-id="copy_t"
          >
            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
            eiusmod tempor incididunt ut labore et dolore magna aliqua.
          </p>
        </div>
      </div>
    </div>
  </div>
  <!-- Repeat group item 1 element (i.e. columns_o[1]) -->
  <div
    class="col"
    data-dccms-model-path="/site/website/index.xml"
    data-dccms-model-id="f830b94f-a6e9-09eb-9978-daafbfdf63ef"
    data-dccms-field-id="columns_o"
    data-dccms-index="1"
  >
    <!-- An item selector field named `items_o` that's inside the repeat group (i.e. columns_o[1].items_o) -->
    <div
      data-dccms-model-path="/site/website/index.xml"
      data-dccms-model-id="f830b94f-a6e9-09eb-9978-daafbfdf63ef"
      data-dccms-field-id="columns_o.items_o"
      data-dccms-index="1"
    >
      <!-- columns_o[1].items_o[0] -->
      <div
        data-dccms-model-path="/site/website/index.xml"
        data-dccms-model-id="f830b94f-a6e9-09eb-9978-daafbfdf63ef"
        data-dccms-field-id="columns_o.items_o"
        data-dccms-index="1.0"
      >
        <!-- Embedded component hosted @ columns_o[1].items_o[0] -->
        <span
          data-dccms-model-path="/site/website/index.xml"
          data-dccms-model-id="eb50be40-5755-5dfa-0ad0-15367b5cc685"
        >
          <img
            src="https://place-hold.it/300"
            alt=""
            class=""
            data-dccms-model-path="/site/website/index.xml"
            data-dccms-model-id="eb50be40-5755-5dfa-0ad0-15367b5cc685"
            data-dccms-field-id="image_s"
          >
        </span>
      </div>
      <!-- columns_o[1].items_o[0] -->
      <div
        data-dccms-model-path="/site/website/index.xml"
        data-dccms-model-id="f830b94f-a6e9-09eb-9978-daafbfdf63ef"
        data-dccms-field-id="columns_o.items_o"
        data-dccms-index="1.1"
      >
        <!-- Embedded component hosted @ columns_o[1].items_o[1] -->
        <div
          class="paragraph-component-root"
          data-dccms-model-path="/site/website/index.xml"
          data-dccms-model-id="4b68e47a-07a3-134f-a540-1b7907080cb0"
        >
          <p
            data-dccms-model-path="/site/website/index.xml"
            data-dccms-model-id="4b68e47a-07a3-134f-a540-1b7907080cb0"
            data-dccms-field-id="copy_t"
          >
            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
            eiusmod tempor incididunt ut labore et dolore magna aliqua.
          </p>
        </div>
      </div>
    </div>
  </div>
</section>

forEach

Полезно для итерации по коллекциям DC.

Примеры:


      <@dc.forEach contentModel.slides_o; slide, index>
  <#assign
    attributesByIndex = attributesByIndex + { index: { "data-bs-interval": "${slide.delayInterval_i?c}" } }
  />
</@dc.forEach>


      <@dc.forEach contentModel.slides_o; slide, index>
  <button
    type="button"
    data-bs-target="#${rootElementId}"
    data-bs-slide-to="${index}"
    aria-label="Slide ${index}"
    ${(initialActiveSlideIndex == index)?then('class="active" aria-current="true"', '')}
  ></button>
</@dc.forEach>

cleanDotNotationString

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

Эта функциональность оказывается полезной при работе с группами повторений в DC CMS, которые могут создавать сложности, такие как передача полей или индексов, особенно при обработке сложных или составных полей (например, field1.field2) и индексов (например, 0.1).


      <#assign str1 = ".hello." />
<#assign str2 = ".world." />
${dc.cleanDotNotationString("${str1}.${str2}")}
<#-- Output is hello.world -->


      ${dc.cleanDotNotationString("...foo...bar..")}
<#-- Output is foo.bar -->


      ${dc.cleanDotNotationString("..")}
<#-- Output is an empty string -->

isEmptyCollection

Получает коллекцию DC CMS и возвращает true, если она пуста, или false в противном случае.

emptyCollectionClass

Этот макрос выводится только в режиме предварительного просмотра CMS Engine и при предоставлении коллекции проверяет, является ли она пустой. Если это так, макрос выводит специальный класс, созданный для этого.

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

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

Коллекция компонентов:


      <@dc.renderComponentCollection
  $field="mainContent_o"
  $containerAttributes={ "class": dc.emptyCollectionClass(contentModel.mainContent_o) }
/>

Повторяющаяся группа:


      <@dc.renderRepeatGroup
  $field="slides_o"
  $containerAttributes={ "class": dc.emptyCollectionClass(contentModel.slides_o) }
/>

emptyFieldClass

Принимает значение поля в качестве входных данных; если поле пусто, генерирует вывод с использованием специального класса DC. В противном случае не производит вывода. Этот макрос функционирует только в режиме предварительного просмотра CMS Engine.

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

Этот макрос нужно использовать для пустых полей.

Пример:


      <@dc.h1
   class="display-5 fw-bold ${dc.emptyFieldClass(contentModel.title_s)}"
   $field="title_s"
>
   ${contentModel.title_s!''}
</@dc.h1>

printIfPreview

Принимает строку, которая будет выведена, если CMS Engine работает в режиме предварительного просмотра.


      <#-- Import the "debug" version of the script in preview. -->
<script src="/static-assets/js/bootstrap.bundle${dc.printIfPreview('.debug')}.js"></script>

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


      <#-- Import a in-context editing stylesheet only in preview. -->
<#if modePreview><link href="/static-assets/css/ice.css" rel="stylesheet"></#if>

printIfNotPreview

Принимает строку, которая будет выведена, если CMS Engine не работает в режиме предварительного просмотра.


      <#-- Import the "minified" version of the script in delivery. -->
<script src="/static-assets/js/bootstrap.bundle${dc.printIfNotPreview('.min')}.js"></script>

Выводит структуру навигации сайта в настраиваемой разметке.

Параметр	Тип	Значение по умолчанию	Описание
`url`	String	"/site/website"	Путь URL для начала вывода хлебных крошек (бредкрамбов).
`showNavElement`	boolean	true	Включить или отключить вывод элемента навигации, оборачивающего всю структуру навигации.
`navElementClass`	string	""	Класс(ы) для применения к элементу навигации.
`containerElement`	string	“ul”	Родительский тег для элементов навигации и оборачивания элементов навигации. Будет пропущено, если установлен в пустую строку (т.е. "").
`containerElementClass`	string	""	Класс(ы), применяемые к элементу контейнера.
`itemWrapperElement`	string	"li"	Элемент, используемый для оборачивания ссылок (например, в`<li><a /></li>` `li` оборачивает `a`). Будет пропущено, если установлен в пустую строку (т.е. "").
`itemWrapperClass`	string	""	Атрибуты, добавляемые к оборачиванию ссылки элемента навигации (например, `li`, которое оборачивает `a`).
`itemWrapperActiveClass`	string	"active"	Класс(ы), добавляемые к оборачиванию активной ссылки элемента навигации (например, `li`, которое оборачивает `a`).
`itemWrapperAttributes`	hash	{}	Атрибуты, добавляемые ко всем оборачиваниям ссылок элементов навигации (например, `li`, которое оборачивает `a`).
`itemClass`	string	""	Класс(ы), добавляемые ко всем элементам навигации.
`itemActiveClass`	string	"active"	Класс(ы), добавляемые к активной странице (т.е. странице, на которой находится пользователь).
`itemAttributes`	hash	{}	Атрибуты, применяемые к элементам навигации.
`hasSubItemItemClass`	string	""	Класс(ы), применяемые к тем элементам, у которых есть дочерние элементы. Применяется к элементу навигации, а не его оборачиванию.
`hasSubItemWrapperClass`	string	""	Класс(ы), применяемые к оборачиванию тех элементов, у которых есть дочерние элементы.
`hasSubItemItemAttributes`	hash	{}	Атрибуты, применяемые к элементам, у которых есть дочерние элементы.
`subItemClass`	string	""	Класс(ы), применяемые к элементам, находящимся хотя бы на один уровень ниже.
`subItemClassPrefix`	string	“nav-level”	Класс создается динамически в форме `${subItemClassPrefix}-${currentDepth}`. Вы можете настроить `subItemClassPrefix`, чтобы изменить значение по умолчанию с `nav-level-${depth}` на `${whatEverYouPlease}-${depth}`
subItemAttributes	hash	{}	Атрибуты, применяемые к элементам, находящимся хотя бы на один уровень ниже.
`subItemWrapperClass`	string	""	Класс(ы), применяемые к оборачиванию тех элементов, которые находятся хотя бы на один уровень ниже.
`subItemWrapperClassPrefix`	string	""	Если указано, класс создается динамически в форме `${subItemWrapperClassPrefix}-${currentDepth}`.
`subItemContainerClass`	string	""	Класс(ы), применяемые к контейнеру на каждом уровне глубины.
`depth`	number	1	Сколько уровней глубины следует вывести.
`includeRoot`	boolean	true	Включить или отключить вывод корня навигации. Например, вы можете хотеть вывести дочерние элементы "Home", без самого "Home", в этом случае установите в `false`.
`inlineRootWithImmediateChildren`	Boolean	true	Включить или отключить вывод корневого элемента на том же уровне, что и его непосредственные дочерние элементы.

navigationItem

Используется внутренним макросом навигации для вывода каждого элемента.

Подробнее см. макрос navigation.

Параметр	Тип	Значение по умолчанию	Описание
currentDepth	number	0	Текущий уровень глубины, который будет выведен этим макросом.
navItem	object	0	Объект `navItem`, который будет использоваться для вывода.

Параметр	Тип	Значение по умолчанию	Описание
`url`	string	"/site/website"	Текущий URL, используемый для построения хлебных крошек (бредкрамбов).
`root`	string	"/site/website"	Начальная точка (корень) хлебных крошек.
`showNavElement`	boolean	true	Включить или отключить оборачивание всей структуры навигации элементом `<nav />`.
`navElementClass`	string	""	Класс(ы), добавляемые к элементу навигации
`navElementAttributes`	hash	{}	Атрибуты, добавляемые к элементу навигации.
`containerElement`	string	"ul"	Родительский тег для элементов навигации и оборачиваний элементов навигации. Будет пропущено, если установлено в пустую строку (т.е. "").
`containerElementClass`	string	""	Класс(ы), применяемые к элементу контейнера.
`itemWrapperElement`	string	"li"	Элемент, используемый для оборачивания ссылок (например, в `<li><a /></li>` `li` оборачивает `a`). Будет пропущено, если установлено в пустую строку (т.е. "").
itemWrapperClass	string	""	Атрибуты, добавляемые к оборачиванию ссылки элемента навигации (например, `li`, которое оборачивает `a`).
itemWrapperActiveClass	string	"active"	Класс, добавляемый к оборачиванию активной ссылки элемента навигации (например, `li`, которое оборачивает `a`).
itemWrapperAttributes	hash	{}	Атрибуты, добавляемые ко всем оборачиваниям ссылок элементов навигации (например, `li`, которое оборачивает `a`).
`itemClass`	string	""	Класс(ы), добавляемые ко всем элементам навигации.
`itemAttributes`	hash	{}	Атрибуты, добавляемые ко всем элементам навигации.
`includeLinkInActiveItem`	boolean	false	Включить или отключить отображение активного элемента как ссылки (т.е. `a`); в противном случае отображается как `span`.

Приложения на JavaScript

Experience Builder (XB) предоставляет обширный набор библиотек и утилит на языке JavaScript (JS), подходящих для различных сценариев. Независимо от того, разрабатываете ли вы JS-приложения, такие как одностраничные приложения (SPA) с фреймворками вроде React, Angular, Vue или подобными, интеграция XB в ваш проект проста. Просто вызовите методы XB, соответствующие требованиям вашего приложения.

Наиболее простой подход к интеграции для JS-приложений заключается в отметке HTML-элементов, соответствующих полям модели контента, специфическими атрибутами. Эти атрибуты генерируются библиотеками DC CMS SDK на основе заранее извлеченной модели контента. В качестве альтернативы, для большей настройки у вас есть возможность управлять регистрацией элементов поля вручную, чтобы адаптировать их к конкретным потребностям вашего приложения.

Использование

Вы можете включить библиотеки Experience Builder JS в свой проект либо через npm, импортировав @dccms/experience-builder, либо используя JS UMD-пакет и интегрируя его в ваше приложение во время выполнения.

Интеграция с React

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

Связующие элементы React можно получить как через npm, так и с использованием UMD-пакета, предоставленного DC CMS. Доступные компоненты для использования в ваших приложениях React приведены ниже.

ExperienceBuilder

Этот центральный компонент оркестрирует и облегчает все аспекты редактирования контента в контексте. Объявите этот компонент только один раз, и он должен служить родителем всех компонентов, поддерживающих Experience Builder, в вашем приложении.

Свойство	Тип	Значение по умолчанию	Описание
`isAuthoring`	boolean	(требуется)	Контролирует добавление или обход authoring-инструментов. Должен отправить значение `true` при запуске CMS Studio, и authoring-инструменты будут включены. Auhtoring-иструменты полностью отсутствуют при установке в значение `false`.
`isHeadlessMode`	boolean	false	Если ваше приложение потребляет контент из DC CMS в headless-режиме, определенные опции (например, редактирование шаблона Freemarker или контроллера) не применимы. Установка headless-режима в значение `true` отключит XB-опции, которые не имеют отношения к headless-приложению, такому как SPA.
`themeOptions`	MUI’s ThemeOptions	значения XB по умолчанию	XB работает на базе MUI. Этот аргумент позволяет настраивать опции темы MUI и переопределять значения XB по умолчанию.
`sxOverrides`	ExperienceBuilderStylesSx	значения XB по умолчанию	Вы можете изменить темизацию, специфичную для XB, с помощью этого аргумента.
`documentDomain`	string	null	Вы можете указать `documentDomain`, если ваш режим предварительного просмотра работает на домене, отличном от того, что использует CMS Studio
`scrollElement`	string	html, body	Вы можете указать другой элемент для прокрутки XB при прокрутке пользователя к конкретным элементам полей DC CMS.

Model

Используйте этот компонент для рендеринга элементов, которые представляют сами модели (т.е. страницы или компоненты DC CMS, но не их поля).

Свойство	Тип	Значение по умолчанию	Описание
`model`	Object (ContentInstance)	(требуется)	Визуализируемая модель
`component`	string, React.ElementType	"div"	Компонент, подлежащий визуализации
`componentProps`	Object	не определено	Любые свойства, отправленные на корневой уровень, которые не принадлежат компоненту, автоматически передаются отрисованному компоненту. В большинстве случаев использование `componentProps` не требуется. Однако, если ваш целевой компонент имеет свойство с тем же именем, что и свойство в компоненте DC CMS React, использование `componentProps` гарантирует, что свойство(а) направляются к вашему целевому компоненту, а не перехватываются компонентом DC CMS и не достигают предполагаемого места назначения.

ContentType

Используйте этот компонент для отображения конкретного компонента из вашей библиотеки в зависимости от типа контента модели. Компонент ContentType предназначен для работы с "картой типов контента", которую вы должны предоставить в качестве свойства. Эта карта по существу является простым объектом, служащим в качестве таблицы поиска для ваших компонентов, индексированных идентификатором типа контента. Для оптимальной производительности приложения вы можете объединить его с React.lazy. Важно, чтобы карта типов контента охватывала все потенциальные компоненты, которые вы намереваетесь отображать с использованием компонента ContentType в определенном разделе вашего приложения.

Свойство	Тип	Значение по умолчанию	Описание
`model`	Object (ContentInstance)	(требуется)	Визуализируемая модель
`contentTypeMap`	Object	(требуется)	Карта компонентов, индексированных идентификаторами типов контента DC CMS. Идентификатор типа контента переданной модели будет использоваться для выбора компонента из карты, который должен отображать эту модель.
`notFoundComponent`	React.ComponentType		Если модель, переданная в `ContentType`, равна `null`, это рассматривается как ошибка 404, и отображается компонент `notFoundComponent`.
`notMappedComponent`	React.ComponentType		Если тип контента модели не найден в `contentTypeMap`, то отображается компонент `notMappedComponent`.

RenderField

Используйте этот компонент для отображения полей модели DC CMS. Хотя он также может отображать поля типа "коллекция", для отображения коллекций компонентов или групп повторений DC CMS предоставляет специальные компоненты (см. ниже).

Свойство	Тип	Значение по умолчанию	Описание
`model`	Object (ContentInstance)	(требуется)	Визуализируемая модель
`fieldId`	string	требуется	Идентификатор поля для отображения
`index`	string, number	не определено	Если применимо, индекс внутри родительских коллекций.
`component`	string, React.ElementType	“div”	Компонент, который должен быть отображен
`componentProps`	Object	не определено	Все свойства, отправленные на корневом уровне и не являющиеся собственными свойствами, пересылаются вниз к отрисовываемому компоненту, поэтому в большинстве случаев нет необходимости использовать `componentProps`. Могут быть случаи, когда ваш целевой компонент имеет имя свойства, совпадающее по имени со свойством компонента DC CMS React, поэтому чтобы избежать поглощения свойства и его непопадания в целевой компонент, вы можете отправить свойство(а) через `componentProps.instead`.
`renderTarget`	string	"children"	Значения, которые должны быть отрисованы, будут переданы с использованием этого имени свойства для целевого типа элемента (см. свойство `component`). По умолчанию значение передается как дочерний элемент, но если, например, вы хотите отрисовать изображение, вы можете сделать так: `<RenderField ... component="img" renderTarget="src" />`
`render`	function	(value, fieldId) => value	Если вам необходимо выполнять пользовательскую логику отрисовки для значения отрисовываемого поля, вы можете предоставить функцию отрисовки. Функция получает значение поля и идентификатор поля.

RenderComponents

Используйте этот компонент для отображения селекторов элементов, которые содержат компоненты. Этот компонент отображает элемент поля (т.е. селектор элемента), item-элемент и сам компонент.

Свойство	Тип	Значение по умолчанию	Описание
`model`	Object (ContentInstance)	(требуется)	Отображаемая модель
`fieldId`	string	(требуется)	Идентификатор поля повторяющейся группы
`index`	string, number	не определено	Индекс внутри родительского повторения при вложении в другие повторения
`component`	React.ElementType	"div"	Компонент React для отображения элемента поля
`componentProps`	Object	не определено	Любые свойства, отправленные на корневом уровне и не являющиеся собственными свойствами, передаются отображаемому компоненту, поэтому в большинстве случаев вам не нужно использовать `componentProps`. В некоторых случаях ваш целевой компонент может иметь имя свойства, совпадающее по имени со свойством компонента DC CMS React, поэтому, чтобы избежать того, чтобы свойство не поглотило и не достигло вашего целевого компонента, вы можете отправить свойство(а) через `componentProps`.
`itemComponent`	React.ElementType	"div"
`itemProps`	Object	не определено
`itemKeyGenerator`	function	(item, index) => index	Функция, которая принимает элемент и текущий индекс и должна возвращать ключ (`key`) (атрибут prop React) для использования на отображаемом элементе. По умолчанию используется только текущий индекс, поэтому вы можете сделать ключ более надежным через это свойство.
`renderItem`	function	не требуется	Должен возвращать/отображать внутренний элемент (`RenderRepeat` (подробнее см.ниже) отображает элементы поля и элементы, вы ответственны за отображение полей каждого элемента). Функция получает элемент, составной индекс (вложенные коллекции), индекс в текущей коллекции повторений и саму коллекцию.
`contentTypeMap`	Object	(требуется)	Карта компонентов, индексированных идентификатором типа контента DC CMS. Идентификатор типа контента переданной модели будет использоваться для выбора компонента из карты, который должен отрисовать указанную модель.
`contentTypeProps`	Props Object	{}	Свойства, которые будут переданы компоненту `ContentType`, который отрисовывает целевой компонент на основе `contentTypeMap`. Свойства будут переданы до целевого компонента.
`nthContentTypeProps`	Record<number, object>	{}	Вы можете передавать конкретные свойства компонентам на основе их индекса в коллекции с помощью этого свойства.
`renderItem`	function	(component, index) => <ContentType … />	Если стандартный отрисовщик компонентов не удовлетворяет вашему случаю использования, вы можете предоставить собственный отрисовщик, который вызывается с текущим компонентом и текущим индексом в коллекции.

RenderRepeat

Используйте этот компонент для отображения групп повторений и их соответствующих элементов. Компонент отвечает за отображение как элемента поля (представляющего группу повторений), так и элемента записи. Содержимое каждого элемента группы повторений создается функцией, предоставленной пользователем. Эта функция вызывается с параметрами, включая элемент, индекс внутри коллекции, вычисленный составной индекс (если применимо) и саму коллекцию.

Свойство	Тип	Значение по умолчанию	Описание
`model`	Object (ContentInstance)	(требуется)	Отображаемая модель
`fieldId`	string	(требуется)	Идентификатор поля повторяющейся группы
`index`	string, number	не определено	Индекс внутри родительского повторения при вложении в другие повторения
`component`	React.ElementType	"div"	Компонент React для отображения элемента поля
`componentProps`	Object	не определено	Любые свойства, отправленные на корневом уровне и не являющиеся собственными свойствами, передаются отображаемому компоненту, поэтому в большинстве случаев вам не нужно использовать `componentProps`. В некоторых случаях ваш целевой компонент может иметь имя свойства, совпадающее по имени со свойством компонента DC CMS React, поэтому, чтобы избежать того, чтобы свойство не поглотило и не достигло вашего целевого компонента, вы можете отправить свойство(а) через `componentProps`.
`itemComponent`	React.ElementType	"div"
`itemProps`	Object	не определено
`itemKeyGenerator`	function	(item, index) => index	Функция, которая принимает элемент и текущий индекс и должна возвращать ключ (`key`) (атрибут prop React) для использования на отображаемом элементе. По умолчанию используется только текущий индекс, поэтому вы можете сделать ключ более надежным через это свойство.
`renderItem`	function	не требуется	Должен возвращать/отображать внутренний элемент (`RenderRepeat` отображает элементы поля и элементы, вы ответственны за отображение полей каждого элемента). Функция получает элемент, составной индекс (вложенные коллекции), индекс в текущей коллекции повторений и саму коллекцию.

Angular, Vue и другие JavaScript-приложения

Для беспроблемной интеграции XB в ваше JavaScript-приложение вы можете добавить атрибуты к HTML-элементам, которые соответствуют моделям, полям или элементам в типе контента DC CMS. После этого вызывается инициализатор XB.

fetchIsAuthoring

Эта функция служит для проверки того, работает ли сервер DC CMS, к которому подключено приложение, в качестве сервера авторского контента. В authoring-режиме приложение должно иметь включенные инструменты редактирования в контексте, в то время как в delivery-режиме эти инструменты должны быть отключены.

Функция возвращает обещание (promise), которое разрешается значением true или false. Рекомендуется извлекать это значение на раннем этапе загрузки приложения и кэшировать его на протяжении жизненного цикла приложения. В зависимости от разрешенного значения вы можете продолжить инициализацию XB или пропустить ее, предполагая, что приложение работает в production, где authoring-инструменты отсутствуют.


      import { fetchIsAuthoring, initExperienceBuilder } from '@dccms/experience-builder';
// Check if we're in authoring
fetchIsAuthoring().then((isAuthoring) => {
   // If we're in authoring, initialize XB
   if (isAuthoring) {
      initExperienceBuilder()
   }
})

Параметр	Тип	Значение по умолчанию	Описание
`config`	Record<’baseUrl’, ‘site’, string>	не определено	Вы можете указать `baseUrl` и/или `site` для проведения проверки. Если они не предоставлены, функция `fetchIsAuthoring` использует значения `dcConf` (из пакета `@dccms/classes`).

addAuthoringSupport

Используется для импорта XB-скриптов на вашу страницу.

getICEAttributes

Используйте getICEAttributes для получения набора атрибутов для каждого элемента, представляющего модель, поле или элемент DC CMS. После извлечения контента вызовите getICEAttributes, чтобы получить основные атрибуты, которые сообщают системе, как сделать такой элемент доступным для редактирования в XB.

Обеспечьте начальную конфигурацию всех атрибутов в вашей разметке. После этого вызовите initExperienceBuilder.

Параметр	Тип	Значение по умолчанию	Описание
`config`	ICEConfig	(требуется)	Вы должны предоставить, как минимум, `model` и `isAuthoring`. Поле `fieldId` должно быть указано, когда отрисовывается артефакт, представляющий собой поле. Индекс должен быть указан, когда артефакт, который отрисовывается, находится внутри коллекции (групп повторений или селекторов элементов).

Связанные статьи

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