Работа с переопределением файлов CSS

Статья
05/28/2024

В этой статье описывается, почему, когда и как использовать файлы переопределения каскадных таблиц стилей (CSS) переопределить файлы в Microsoft Dynamics 365 Commerce.

Постоянные стили сайта, как правило, должны быть обработаны через тему сайта. Темы обеспечивают основы CSS и настройки стиля для модулей на любой странице вашего сайта. Темы создаются с помощью онлайн-пакета средств разработки Dynamics 365 Commerce (SDK), и они развернуты на ваших веб-сайтах через Lifecycle Services Microsoft Dynamics (LCS). Возможности отладки тем и конфигурации интерфейса модуля в SDK помогают разработчикам сайтов создавать настраиваемые и связанные пакеты дизайна сайта. Когда эти пакеты дизайна развертываются на сайте, авторы сайта могут сосредоточиться на создании, редактировании и публикации контента вместо разработки сайта.

Учитывая обычный жизненный цикл темы, зависимость от разработчиков в плане изменения стиля через конвейер развертывания SDK и LCS может быть непомерно высокой в некоторых сценариях. Прототипы или исправления ошибок сайта могут показаться громоздкими, если SDK не настроен или если у вас нет времени ждать развертывания LCS.

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

Прежде чем использовать переопределение файлов CSS, имейте в виду следующие ограничения:

Только один файл переопределения CSS может быть активен на сайте одновременно. Таким образом, все активные переопределения должны присутствовать в одном файле переопределения.
Хотя вы можете просмотреть переопределения в инструментах разработки Commerce, нет специальных функций отладки, которые помогут определить ошибки в результате переопределения. Другими словами, при использовании файлов переопределения CSS у вас нет того же набора инструментов, который предусмотрен SDK для проверки модуля и авторства.

Тем не менее, файлы переопределения CSS обеспечивает быстрый способ прототипирования дизайна или устранения ошибок перед разработкой и развертыванием обновления всей темы сразу.

Создание файла переопределения CSS

Для создания файла переопределения CSS любую интегрированную среду разработки (IDE), текстовый редактор или редактор исходного кода. Типичный подход заключается в использовании стандартных веб-отладчиков в браузере для определения селекторов стилей, свойств и значений на существующем сайте. Большинство браузеров позволяют изменять значения и просматривать их в отладчике. После того как вы определили изменения, которые вы хотите внести, вы можете сохранить их в свой собственный файл CSS.

Отправка файла переопределения CSS

Чтобы отправить файл CSS на свой сайт в Commerce, выполните следующие действия.

В средствах разработки перейдите на ваш сайт.
В области переходов слева выберите Дизайн.

Примечание

В зависимости от версии инструментов разработки Commerce, которые вы используете, возможно, придется расширить Настройки в области перехода, прежде чем вы сможете выбрать Дизайн.
В верхней части основной панели дизайна выберите вкладку Переопределение CSS, если она еще не выбрана.
В Доступные переопределения CSS выберите Отправить файл CSS. Отображается окно проводника.
В проводнике найдите и выберите файл CSS, а затем выберите Открыть. Отправленный файл CSS теперь отображается в Доступные переопределения CSS.

Предварительный просмотр файла переопределения CSS

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

В области переходов слева выберите Дизайн, а затем на вкладке Переопределение CSS в Доступные переопределенияCSS найдите файл CSS, который вы хотите просмотреть.
Рядом с именем файла CSS выберите Предварительный просмотр сайта.
В диалоговом окне Выберите URL-адрес выберите URL-адрес сайта, к которому необходимо применить переопределение, а затем выберите OK.
Если для выбранного URL-адреса существует несколько вариантов, выберите нужный вариант в отображаемом диалоговом окне Варианты предварительного просмотра.

Открывается новая вкладка или окно браузера, где можно проверить переопределение на сайте. Затем вы можете поделиться URL-адресом с другими аутентифицированными пользователями Commerce для анализа и обратной связи.

Активация файла переопределения CSS на своем активном сайте

После предварительного просмотра и утверждения файла переопределения CSS вы можете активировать его на своем активном сайте.

Примечание

Только один файл переопределения CSS может быть активен на сайте одновременно. При активации нового файла переопределения предыдущий файл переопределения отключается. Поэтому убедитесь, что все требуемые переопределения присутствуют в едином файле переопределения CSS.

Чтобы активировать файл переопределения CSS, выполните следующие действия.

В области переходов слева выберите Дизайн, а затем на вкладке Переопределение CSS в Доступные переопределенияCSS найдите файл CSS, который вы хотите активировать.
Для имени файла CSS выберите Активировать. Файл переопределения сразу же становится активным на вашем активном сайте.

Отключение файла переопределения CSS на своем активном сайте

Чтобы отключить файл переопределения CSS на своем сайте, выполните следующие действия.

В области переходов слева выберите Дизайн, а затем на вкладке Переопределение CSS в Доступные переопределенияCSS найдите файл CSS, который вы хотите отключить.
Для имени файла CSS выберите Отключить. Файл переопределения сразу же становится неактивным на вашем активном сайте.

Совет

Чтобы получить доступ к дополнительным параметрам для файлов переопределения CSS, выберите многоточие (...) рядом с именем файла CSS. Параметры Загрузить, Переименовать и Заменить используются для внесения быстрых изменений в существующий файл переопределения CSS.