Experience Builder (XB)

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

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

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

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

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

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

  2. Инициализируйте 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>

Copy-icon

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

<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>

Copy-icon

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

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

component
repeat-group
item
item-fields

Copy-icon

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

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

Copy-icon

Правила Experience Builder

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

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

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

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

Copy-icon

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>

Copy-icon

Вышеприведенное приведет к распечатке в 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>

Copy-icon

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

Copy-icon

После импорта 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>

Copy-icon

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

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

Copy-icon

Начните процесс преобразования, заменяя каждый тег соответствующим макро 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>

Copy-icon

Далее создайте группу повторений и ее элементы. Используйте @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>

Copy-icon

Макро 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>

Copy-icon

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

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

  1. head: служит для вставки шаблонов из плагинов.

  2. body_top: также используется для вставки шаблонов из плагинов.

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

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

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

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

Copy-icon
initExperienceBuilder

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

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

<@dc.body_bottom initializeInContextEditing=false />

Copy-icon

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

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

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

Примеры:

<@initExperienceBuilder />

Copy-icon

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

Copy-icon

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

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

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>

Copy-icon

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

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

Copy-icon
renderComponentCollection

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

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

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

Copy-icon

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

Параметр Описание
$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" />

Copy-icon

Приведенный выше пример выведет следующий 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>

Copy-icon
renderRepeatGroup

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

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

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

Copy-icon

Группы повторений позволяют использовать сложные/составные аргументы $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>

Copy-icon

Пример выше выведет следующий 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>

Copy-icon
forEach

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

Примеры:

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

Copy-icon

<@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>

Copy-icon
cleanDotNotationString

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

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

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

Copy-icon

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

Copy-icon

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

Copy-icon
isEmptyCollection

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

emptyCollectionClass

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

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

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

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

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

Copy-icon

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

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

Copy-icon
emptyFieldClass

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

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

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

Пример:

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

Copy-icon
printIfPreview

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

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

Copy-icon

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

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

Copy-icon
printIfNotPreview

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

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

Copy-icon

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

Параметр Тип Значение по умолчанию Описание
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 Включить или отключить вывод корневого элемента на том же уровне, что и его непосредственные дочерние элементы.

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

Подробнее см. макрос 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 Copy-icon

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

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

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

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

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

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

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

ExperienceBuilder Copy-icon

Этот центральный компонент оркестрирует и облегчает все аспекты редактирования контента в контексте. Объявите этот компонент только один раз, и он должен служить родителем всех компонентов, поддерживающих 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 Copy-icon

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

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

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

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

Используйте этот компонент для отображения полей модели 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 Copy-icon

Используйте этот компонент для отображения селекторов элементов, которые содержат компоненты. Этот компонент отображает элемент поля (т.е. селектор элемента), 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 Copy-icon

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

Свойство Тип Значение по умолчанию Описание
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-приложения Copy-icon

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

fetchIsAuthoring Copy-icon

Эта функция служит для проверки того, работает ли сервер 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()
}
})

Copy-icon
Параметр Тип Значение по умолчанию Описание
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 должно быть указано, когда отрисовывается артефакт, представляющий собой поле. Индекс должен быть указан, когда артефакт, который отрисовывается, находится внутри коллекции (групп повторений или селекторов элементов).

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

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