Блог

Главная - Вопросы по программированию - Можно ли использовать компоненты React для создания фрагментов опыта AEM, которые затем загружаются в безголовый интерфейс?

Можно ли использовать компоненты React для создания фрагментов опыта AEM, которые затем загружаются в безголовый интерфейс?

#reactjs #aem

#reactjs #aem

Вопрос:

Чтобы кратко описать мои цели —

  1. У меня есть внешняя библиотека компонентов React из ~ 70 компонентов React, которая загружает веб-интерфейс (Websphere Commerce site, который извлекает фрагменты опыта с помощью вызовов AJAX для получения фрагмента HTML), а также приложение React Native. Итак, для Интернета AEM — это, по сути, движок контента, который загружает наш безголовый интерфейс.
  2. Я хотел бы использовать те же компоненты React для создания фрагментов AEM Experience вместо того, чтобы перестраивать каждый компонент React как шаблон HTL в AEM — слишком много накладных расходов для поддержки полностью отдельной библиотеки компонентов шаблонов HTL
  3. Следуя официальному руководству Adobe здесь, я вижу, как можно сопоставить компоненты React с процессом создания фрагментов контента. Я имею в виду, что если я перейду на главную страницу AEM> Сайты> (мой сайт)> создать новый фрагмент, компонент, который я перетаскиваю, загружается шаблоном React. Я могу сказать, потому что разметка соответствует тому, что есть в моем BasicComponent.js шаблоне React в пользовательском интерфейсе.интерфейс, а не basic-component.html шаблон в ui.apps.
  4. Но, если я перейду в AEM Home> Фрагменты опыта> создать новый фрагмент, этот же BasicComponent компонент будет извлечен из basic-component.html файла в папке компонентов (рядом с .content.xml ), а не из BasicComponent.js

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

Это репозиторий, с которым я снял, чтобы поэкспериментировать: https://github.com/drginm/aem-react-simple-example

Любая помощь очень ценится! Я уверен, что я не единственный новичок в AEM, который ищет доступную модель для решения этой ситуации.

Ответ №1:

Фрагменты опыта не рекомендуется использовать с ajax html в безголовой архитектуре, их следует предоставлять через экспортер модели sling в формате json для использования в react.

Для редактирования и изменения фрагментов интерфейса AEM не предоставляет никаких API, разработчик AEM должен предоставить пользовательские API REST для внесения изменений.

Я бы рекомендовал использовать фрагменты контента, где операция CRUD возможна через api активов в AEM.

Ссылки

  1. Разница между фрагментами опыта и фрагментами контента
  2. API РЕСУРСОВ для фрагментов контента

Комментарии:

1. Спасибо за ваш комментарий! Если я понимаю, вы говорите, что используете фрагменты контента, созданные из сопоставленных компонентов React. Эти фрагменты контента будут использоваться (как JSON) приложением React безголового интерфейса для сборки на странице?

2. При дальнейшем исследовании кажется, что фрагменты содержимого предназначены только для форматированного текста. Если я хочу создать более сложный макет, мне нужно либо использовать фрагменты Experience (без экспорта в формате JSON), либо добавить что-то в область сайтов AEM, где я могу выбирать из любого компонента, включая любые фрагменты контента. Итак, похоже, что мне нужно будет создавать какой-либо контент для моего приложения React без головы на сайтах, чтобы создавать более сложные макеты, где я могу использовать как основные, так и пользовательские компоненты?

3. Фрагменты содержимого и фрагменты опыта могут поддерживать компоненты react. Для фрагментов контента не требуется специального кодирования из-за API активов. Для фрагментов опыта мы должны создать экспортер модели sling (java в aem), чтобы предоставить json. Фрагменты контента — это не просто форматированный текст, в них используется множество типов данных, пожалуйста, обратитесь docs.adobe.com/content/help/en/experience-manager-learn/sites/… Для более сложных макетов используйте сайты и предоставляйте json с помощью sling model exporter в aem.