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

Примечание

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

В этой статье описывается, как работать с предустановками стилей в конструкторе сайтов Microsoft Dynamics 365 Commerce.

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

Тема и библиотека модулей, которые вы развертываете в клиенте сайта, определяют набор переменных стиля, доступных на сайте. Онлайн-пакет SDK Dynamics 365 Commerce позволяет разработчикам реализовать сколько угодно настраиваемых переменных стиля для данной темы. При включении дополнительных переменных стиля разработчик темы может делегировать окончательные решения в отношении стилей сайта авторам, работающим в конструкторе сайтов. Поэтому пользователи, которые не являются разработчиками, могут обновлять и просматривать стили сайтов с помощью набора инструментов. Эта возможность также полезна для любого сценария, когда прямые изменения тем или CSS могут привести к ненужным затратам.

Для тем, в которых включены настраиваемые переменные стиля, нужна предустановка стиля по умолчанию. При необходимости они могут включать более предустановленные параметры в составе развернутого пакета темы. Например, можно развернуть тему с одной предустановкой стиля "современный светлый" по умолчанию. Кроме того, он может включать более стандартные параметры стиля, помимо предустановки по умолчанию, например "современный темный", "винтажный свет", или "винтажный темный". Разработчики создают эти встроенные предустановки темы, и авторы могут использовать их в качестве отправных точек для новых проектов сайтов.

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

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

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

1. В левой области навигации для своего сайта выберите Параметры сайта > Дизайн.

2. На вкладке Предустановки стилей в верхней части редактора дизайна в списке Доступные предустановки выберите предустановку, а затем выберите Просмотр, чтобы перейти в редактор предустановок.

   Если список доступных предустановок пуст, см. статью Создание пользовательской стилизации для получения сведений о создании пользовательских стилей.

   Примечание

   Предустановки, которые включает тема, указываются значком Встроено. Эти встроенные предустановки предназначены только для чтения. Чтобы скопировать встроенную предустановку в качестве новой настраиваемой предустановки, выберите кнопку с многоточием (…) для предустановки, а затем выберите Сохранить как.

3. На панели команд выберите Предварительный просмотр.

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

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

Примечание

URL-адрес предварительного просмотра является постоянным и предполагает проверку подлинности. Таким образом, вы можете скопировать, вставить и отправить его другим авторизованным коллегам для проверки, прежде чем задать для него значение "активный" на вашем рабочем сайте. URL-адрес предварительного просмотра также удобно использовать для проверки стилей на других устройствах, в других браузерах и на других экранах.

Совет

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

Создание пользовательской предустановки стиля

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

1. В левой области навигации для своего сайта выберите Параметры сайта > Дизайн.
2. На вкладке Предустановки стилей в верхней части редактора дизайна на панели команд выберите Создать предустановку.
3. Введите название и описание новой предустановки и выберите Сохранить. Вы создаете настраиваемую предустановку, которая использует значения по умолчанию темы в качестве отправной точки.

Примечание

Кроме того, можно создать новую пользовательскую предустановку стиля из любой существующей предустановки, нажав кнопку с многоточием (...) для этой предустановки, а затем выбрав Сохранить как. Или выберите Сохранить как на панели команд в редакторе предустановок.

Изменение значений глобальных стилей и стилей типов модулей

Некоторые переменные стиля темы являются общими для нескольких типов модулей. Эти переменные стиля являются глобальными переменными стиля. Примерами являются основные цвета сайта, стили шрифтов по умолчанию и стили кнопок. Задав глобальные переменные, вы можете изменить внешний вид между различными типами модулей.

Некоторые значения стилей могут быть уникальными для типа модуля, или они могут опционально переопределять глобальное значение по умолчанию. Если тема сайта реализует переменные стиля типа модуля, авторы построителя сайтов могут настраивать стиль типа модуля независимо от глобальных параметров. Переменные типа модуля могут либо дополнять, либо переопределять глобальные переменные стиля в теме.

Примечание

Иерархия значений стиля на сайте осуществляется следующим образом. Значения стиля, которые появляются вправо, переопределяют значения стилей слева от них.

Значения по умолчанию для темы < Глобальные значения стиля < Значения стиля типа модуля < Переопределение CSS

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

1. В левой области навигации для своего сайта выберите Параметры сайта > Дизайн.
2. На вкладке Предустановки стилей в верхней части редактора дизайна выберите Представление для любой предустановки стиля, чтобы перейти в редактор предустановок.
3. Выберите Предварительный просмотр и выполните шаги выбора URL-адреса, чтобы открыть предварительный просмотр в полном окне браузера для данной предустановки. Оставьте окно предварительного просмотра в браузере открытым.
4. В редакторе предустановок выберите Правка в верхнем правом углу.
5. Используйте элементы управления переменных стиля в редакторе для изменения некоторых глобальных значений стиля.
6. В верхней части редактора, на вкладке Модули, справа от вкладки Глобальная, выберите тип модуля, который вы хотите стилизовать.
7. С помощью элементов управления стиля измените некоторые значения для типа модуля.
8. Когда все готово для предварительного просмотра изменений, выберите Сохранить на панели команд.
9. Вернитесь в окно предварительного просмотра браузера и обновите его. Предварительный просмотр в полном окне браузера полезен для проверки изменений стилей в других составляющих представлениях, в других браузерах и на других платформах устройств.
10. После завершения и проверки всех изменений нажмите кнопку Готово редактирование в правом верхнем углу редактора.

Примечание

Если вы редактируйте предустановку стиля, которая в настоящее время активна на сайте, в редакторе отображается синий значок Active . Этот значок означает, что данная предустановка в настоящее время используется на веб-сайте. При изменении активной предустановки выберите Опубликовать, чтобы отправить эти изменения на активный сайт.

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

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

• Выберите Установить как активную в одном из следующих мест:

  • Панель команд в редакторе предустановок стилей
  • Меню с многоточием (…) для любой доступной предустановки в главном представлении на вкладке Предустановки стилей в Параметры сайта > Дизайн

Значения стиля предустановленного параметра активны на вашем веб-сайте, доступном для всех.

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

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

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

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

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

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

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

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