使用样式预设

本文描述如何在 Microsoft Dynamics 365 Commerce 站点构建器中使用站点样式预设。

样式预设是站点主题中所有可创作样式值的存储集。 它可用于从站点构建器立即更改站点的外观。 样式预设使 Commerce 站点构建器作者可以快速更改、预览和激活整个站点中的一组样式值,而不必使用级联样式表 (CSS) 或部署主题。 字体样式、按钮样式和站点颜色是可以通过样式预设管理的样式变量的典型示例。

站点中可用的样式变量集由部署到站点租户的主题和模块库确定。 Dynamics 365 Commerce 联机软件开发套件 (SDK) 使开发人员可以尽可能多(或少)地实现给定主题所需的可创作样式变量。 通过启用更多样式变量,主题开发人员可以将有关站点样式的最终选择权交给站点构建器作者。 因此,非开发人员可以使用工具集更新和预览站点样式。 对于直接更改主题或 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. 在完成并验证所有更改后,在编辑器的右上方选择完成编辑

注释

如果您在编辑当前在站点上处于活动状态的样式预设,将会在编辑器中看到一个蓝色的活动标记。 此标记指示该预设当前在您的网站上处于活动状态。 如果更改活动预设,请选择发布将这些更改推送到您的活动站点。

在活动站点上让新样式预设进入活动状态

要在站点上将样式预设设置为新活动预设,请按照以下步骤操作。

  • 在以下位置之一选择设置为活动按钮

    • 样式预设编辑器中的命令栏
    • 站点设置 > 设计样式预设选项卡上主视图中任一可用预设对应的省略号菜单 (...)

预设的样式值将在面向公众的整个网站上进入活动状态。

其他资源

添加徽标

选择站点主题

处理 CSS 覆盖文件

添加收藏夹图标

添加版权声明

向站点添加语言

将脚本代码添加到站点页面以支持遥测