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

Примечание

Розничная группа интересов Dynamics 365 Commerce переехала из Yammer в Viva Engage. Если у вас нет доступа к новому сообществу Viva Engage, заполните эту форму (https://aka.ms/JoinD365commerceVivaEngageCommunity), чтобы добавить и оставаться в курсе последних обсуждений.

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

Постоянные стили сайта, как правило, должны быть обработаны через тему сайта. Темы обеспечивают базовые параметры CSS и стилей для модулей на любой странице вашего сайта. Вы создаете темы с помощью пакета средств разработки программного обеспечения Dynamics 365 Commerce Online (SDK) и развертываете их на веб-сайтах с помощью служб жизненного цикла 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, выполните следующие действия.

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

2. В области навигации слева выберите Дизайн.

   Примечание

   В зависимости от версии инструментов авторинга Commerce, которые вы используете, может потребоваться развернуть Параметры в области навигации, прежде чем выбрать Дизайн.

3. В верхней части основной панели дизайна перейдите на вкладку Переопределение CSS, если она еще не выбрана.

4. В разделе Доступные переопределения CSS выберите Отправить файл CSS. Отобразится окно проводника.

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

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

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

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

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

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

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

Примечание

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

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

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

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

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

1. В области навигации слева выберите Дизайн. На вкладке переопределения CSS в разделе "Доступные переопределения CSS" найдите CSS-файл, который требуется отключить.
2. Под именем файла CSS выберите Деактивировать. Файл переопределения сразу же станет неактивным на вашем активном сайте.

Совет

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

Дополнительные ресурсы

Добавление логотипа

Выбор темы сайта

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

Добавление значка веб-сайта

Добавление уведомления об авторском праве

Добавление языков на сайт

Добавление кода скрипта на страницы сайта для поддержки телеметрии