Я хочу понизить предопределенные разделы, компоненты и виджет до начальной версии 3 в редакторе Vvveb. ⇐ Javascript

[Anonymous]

Я хочу понизить предопределенные разделы, компоненты и виджеты до Bootstrap 3.
Примечание. Я не имею в виду понижение версии самого редактора Vvveb, поскольку он автономен — будут понижены только предопределенные разделы, компоненты и виджеты.
У нас есть два отдельных проекта CakePHP, использующих Bootstrap 3:
Сайт электронной коммерции — позволяет клиентам размещать заказы и просматривать страницы CMS.
Панель управления электронной коммерцией — позволяет клиентам управлять содержимым сайта электронной коммерции.
Я интегрировал редактор Vvveb в панель управления с помощью iframe, чтобы избежать конфликтов между Bootstrap 5 (используется Vvveb) и Bootstrap 3 (используется нашей системой). Эта настройка хорошо работает для создания и сохранения контента CMS в базе данных.
Однако, когда сайт электронной коммерции загружает контент, созданный в Vvveb, возникают конфликты стилей и макет сайта разрушается, поскольку Bootstrap 3 и 5 различаются по структуре и поведению (Bootstrap 3 использует jQuery, а Bootstrap 5 использует vanilla JS).
Опробованные методы

• Метод Iframe

Я использовал iframe для загрузки контента, созданного Vvveb, на сайт электронной коммерции. На данный момент это работает нормально, но в будущем нам может понадобиться включить формы или другие интерактивные элементы, что может вызвать проблемы внутри iframe. Меня также беспокоит увеличение времени загрузки страницы, особенно потому, что многие пользователи заходят на сайт с мобильных устройств, что делает этот подход менее практичным в долгосрочной перспективе.

• Метод стилей с ограниченной областью действия

При сохранении HTML-кода я заключил контент в уникальный идентификатор, например:

Код: Выделить всё

 body content 

Затем я преобразовал style.bundle.css в style.bundle.scss и определил область действия всех стилей Vvveb внутри:

Код: Выделить всё

#vvveb-content {

// Vvveb styles
}

Этот подход не позволяет стилям Bootstrap 3 переопределять стили Bootstrap 5 — только элементы внутри #vvveb-content стилизованы с помощью Bootstrap 5. Однако мне пришлось внести несколько корректировок, используя !important правила. Обратной стороной является увеличение времени загрузки страницы, поскольку Bootstrap 3 и Bootstrap 5 загружаются в один и тот же проект.
Примечание. На данный момент я не включил Bootstrap 5 JS ни на сайт электронной коммерции, ни на панель управления — стили Bootstrap 5 используются только в содержимом раздела.

• Метод перехода на более раннюю версию (Предложено)

Я рассматриваю возможность перевода всех разделов, компонентов и виджетов Vvveb на Bootstrap 3.
Таким образом, я могу удалить style.bundle.css и CSS Bootstrap 5 и вместо этого импортировать Bootstrap 3 (с использованием jQuery в будущем, если потребуется).
Этот подход это отнимает много времени, так как мне нужно будет переписать стили как для содержимого редактора Vvveb, так и для сайта электронной коммерции. Однако это значительно снижает нагрузку на память сайта электронной коммерции, поскольку Bootstrap 3 уже включен, то есть мне нужно импортировать только новые стили Vvveb, созданные в процессе перехода на более раннюю версию.
Моя главная проблема заключается в том, что это может вызвать проблемы совместимости в будущем, поскольку сам редактор Vvveb использует Bootstrap 5, а разделы контента, компоненты и виджеты будут основаны на Bootstrap. 3.
Пожалуйста, дайте мне знать, следует ли мне использовать второй метод (стили с ограниченной областью действия) или последний метод (откат до Bootstrap 3).
Если у вас есть какие-либо другие рекомендуемые подходы для более эффективного решения этой проблемы, ваши предложения будут очень признательны.>

Подробнее здесь: https://stackoverflow.com/questions/797 ... -bootstrap