Как я могу добавить свой собственный CSS в пользовательский компонент Sitecore SXA с существующей каркасной темой?

Question

Я пытаюсь создать новый пользовательский компонент, который может быть добавлен / исправлен с помощью компонентов Sitecore SXA и должен быть в состоянии соединиться с существующими темами Sitecroe sxa в основном с темой Wireframe.Я создал компонент в соответствии с нашими пользовательскими требованиями, но не могу найти способ интеграции моих пользовательских файлов CSS и js с каркасной темой Sitecore SXA.

Я попытался использовать его, поместивCSS на мой взгляд с тегами стиля, но он не работает.

Я должен быть в состоянии интегрировать мои пользовательские файлы CSS и JS с существующими темами SXA, чтобы мой компонент мог использоваться как часть компонента SXA.

Answer 1

У вас есть два варианта расширения существующей темы каркаса - ни один из них не должен изменять существующую тему. Хорошее общее правило - не изменять файлы / элементы, которые поставляются с платформой. Эти опции:

Создание новой пользовательской темы на основе темы "Каркас".

Вы можете создать новую тему, используя контекстное меню вашего сайта и перейдя на Scripts > New Site Theme. Это даст вам мастер для создания новой темы для вашего сайта. Затем вы можете скопировать дочерние элементы темы «Каркас» в вашу новую пользовательскую тему и обновить CSS / JS по своему желанию, загрузив соответствующие файлы в папку темы в медиатеке. Выберите новую тему в качестве темы для вашего сайта.

Ссылка на документацию Sitecore: https://doc.sitecore.com/developers/sxa/17/sitecore-experience-accelerator/en/create-a-custom-theme.html

Расширение существующей темы каркаса.

SXA позволяет создавать расширение темы для загрузки собственных стилей и сценариев. Чтобы создать расширение темы, перейдите в раздел Extension Themes в Media Library и используйте контекстное меню для вставки нового Extension Theme. Затем вы можете добавить свои собственные файлы CSS и JS к расширению темы в структуре папок, которую он вам предоставляет. Затем вам нужно присоединить расширение темы к теме каркаса, перейдя на /sitecore/System/Settings/Feature/Experience Accelerator/Page Content/Page Content Site Setup и перейдя на Insert > Attach Theme Extension. Это даст вам элемент для сопоставления темы каркаса (выберите ее как Theme that is extended) и расширения вашей темы (выберите ее под Extension Themes). Это теперь добавит ваши файлы расширения темы в тему Wireframe, и ваши файлы расширения темы будут считаться частью темы.

Ссылка на документацию Sitecore: https://doc.sitecore.com/developers/sxa/17/sitecore-experience-accelerator/en/extend-a-theme.html