使用主题选项和预设创建动态颜色方案_极简慕枫

时间：2019-08-06

编辑:网站制作公司

1944

为未知建立可能是棘手的，客户或商家总是希望在他们的网站上有一定程度的控制。您可能正在为客户构建自定义主题，或构建要在Shopify主题商店中分发的主题 ; 在这两种情况下，商家都希望自定义并能够进行更改。

宁波做网站那么我们如何让客户的主题动态化？

这是主题选项是你最好的朋友。它们允许您配置主题设置，商家可以使用主题编辑器进行访问。

在本文中，我将解释如何使用该settings_schema.json文件创建动态颜色方案。更具体地说，我将介绍如何根据主题设置更改颜色方案，以及如何使用settings_data.json文件创建预设选项，并允许客户选择您定义的策划预设选项。

什么是主题选项？

就像我上面提到的，主题选项允许商家定制他们网站的外观和感觉。重要的是要注意商家可用的主题选项是由构建主题的主题开发者预先确定的。

然后，使用主题选项，CSS或Sass中的Liquid对象以及Liquid模板中的规则，您可以构建动态主题，允许商家自定义其在线商店的外观，同时仍保持一定的控制。您可以通过转到“ 在线商店”选项卡，选择“ 自定义主题”，然后转到“ 常规设置”选项卡来查看主题选项。

主题选项和预设的配色方案 - 主题选项面板

创建动态配色方案

在为单个客户端构建自定义主题（主题与已讨论的设计匹配）时，创建动态配色方案可能不那么重要，但如果您计划创建可能被许多不同商家使用的主题，该怎么办？自定义配色方案是商家希望并期望通过其新商店进行定制的东西。

要自定义和控制Shopify主题编辑器中的主题选项，您需要深入了解该settings_schema.json文件。settings_schema.json位于config/主题目录中。

1.设置settings_schema.json主题文件

首先，我们要定义一些关于主题本身的属性。将以下代码添加到您的settings_scheme.json文件中：

这将通过...按钮后面的“主题编辑器”面板设置一些主题信息和自定义主题的链接。必须为此部分设置名称才能theme_info为主题选项创建适当的映射。

Theme_name是指弹出窗口中显示的可读名称。Theme_author应该是主题的作者，通常是创建主题的自由职业者或代理商。Theme_version是指主题的版本; 如果您计划分发主题，这很有必要，并且很可能在将来进行更新。

Theme_documentation_url引用主题的帮助URL或文档，并显示为主题的“ 文档”链接。Theme_support是与主题支持团队联系的URL，并显示为“ 支持”链接。确保/使用\in urls 转义字符。

具有主题选项和预设的配色方案 - 主题信息显示

2.添加主题选项部分

首先，我们需要为颜色设置定义一个部分。这直接在我们的theme_info部分之后。确保使用a分隔这两个部分,，并将以下代码放在父结束]括号之前：

这里，name 指的是我们正在创建的部分的可读标题。设置设置我们将为此部分放置其余主题选项的位置。保存和刷新后，您应该看到以下内容已添加到主题编辑器中：

主题选项和预设的配色方案 - 主题颜色部分示例

3.添加主题选项标题和颜色设置

一旦我们添加了主题颜色部分，我们现在可以使用类型选项创建一个子部分header，content设置为该子部分的标题，然后是各种颜色的主题选项。应在settings方括号内添加以下主题选项：

每个主题选项都在开放{和结束时找到}。我在上面的代码中创建了几个例子。构建颜色主题选项时，它需要三个必需属性。Type，定义要呈现的属性; 在上面的例子中，我们有一个header类型和几种color类型。ID，在主题模板，CSS或Sass文件中引用，并生成输出/值。标签，在主题选项中创建标题以清楚地描述设置的功能。

默认值为颜色主题选项创建默认值。它不是强制性的，但没有它，颜色值是空白的。如果您在CSS或Sass中使用主题选项作为属性值，这可能会有问题，我们接下来将会这样做。如果未设置默认值，则某些声明将无法正确呈现，因为设置对象的输出将呈现为空或空白。因此，为每个主题选项指定默认颜色值也很重要。

主题选项和预设的配色方案 - 主题颜色部分

最终settings_schema.json文件应如下所示：

4.在CSS或SCSS中使用主题设置

现在我们已经创建了一堆主题选项，我们可以在CSS中使用它们。因为Shopify .liquid在我们的服务器上呈现文件，所以您只需将.liquid扩展名附加到CSS或SCSS文件中，我们的服务器将首先编译其中的Liquid，然后将下一个带前缀的扩展名（如果是SCSS）编译为CSS。使用.liquid扩展，您可以自动访问settingsCSS或SCSS文件中的主题对象。

CSS

theme.css.liquid在资源文件夹中创建一个文件。创建后，请确保使用以下内容将其添加到模板的<head>元素中theme.liquid：

{{ 'theme.css' | asset_url | stylesheet_tag }}

theme.css样式表的名称在哪里，| asset_url返回assets文件夹中文件的URL，并| stylesheet_tag生成一个link元素，其中source作为该theme.css目录的完整URL 。

<link href"=//cdn.shopify.com/s/files/1/0087/0462/t/394/assets/theme.css?28178" rel="stylesheet" type="text/css" media="all">

在你的CSS文件，你可以通过简单地访问属性在访问任何一个主题选项颜色settings对象中{{和}}。例如：

h1, h2, h3, h4, h5, h6 {
  color: {{ settings.color_heading }};}

在上面的示例中，color_heading是我们指定的IDsettings_schema.json。如果我们设置CSS来引用主题选项，它只会改变我们的标题颜色。

SCSS

theme.scss.liquid在资源文件夹中创建一个文件。创建后，请确保使用以下内容将其添加到模板的<head>元素中theme.liquid：

{{ 'theme.scss.css' | asset_url | stylesheet_tag }}

theme.scss.css编译为CSS的样式表的名称在哪里，| asset_url返回assets文件夹中文件的URL，然后| stylesheet_tag再次生成一个链接元素，其中source作为该theme.css目录的完整URL 。

<link href"=//cdn.shopify.com/s/files/1/0087/0462/t/394/assets/theme.scss.css?28178" rel="stylesheet" type="text/css" media="all">

在SCSS文件中，您可以通过以与在CSS文件中相同的方式访问对象来访问任何主题设置颜色settings。然而，奖金是使用SCSS，您可以使用变量战略性地使用这些主题选项。

$color-link: {{ settings.color_link }};a {
  color: $color-link;
  text-decoration: none;
  &:hover,
  &:focus {
    color: darken($color-link, 20%);
    text-decoration: underline;
  }}

在上面的示例中，color_link是我们指定的IDsettings_schema.json。我们已将其分配给一个名为的变量$color-link，然后在我们的SCSS文件中使用该变量。使用原生SCSS函数，darken()或者lighten()我们可以仅基于几种主要颜色创建动态颜色方案。

与颜色变量战略

如果您正在构建一个供大众使用的主题，那么考虑如何将特定颜色链接或相互玩耍是很重要的。例如，您可以在整个站点中使用专色和链接以及按钮，其他所有内容在初始设计中都可能非常中性。您可以使用创意控件来限制和扩展商家可以轻松更改的内容，这可能很简单，只需将颜色主题选项限制为单个专色，然后通过Sass函数和mixin使用该颜色的变体。在某些情况下，具有中性背景的单一专色可以节省商家时间，而不必做出许多选择并给予过多控制。

或者，这可能会限制谁想要购买您的主题，因为商家可能想要“所有的东西！”最终归结为意图; 您希望商家能够自定义什么，以及您认为需要控制哪些设计元素。

宁波做网站

预设和 schema_data.json

现在我们知道如何{{settings}}在CSS和SCSS文件中使用该对象，我们如何为客户指定某些预设或颜色方案？

例如，您可能想要创建主题的浅色和深色版本。灯光版本可能是文件中default设置的值settings_schema.json。但是，如果商家更改了这些值中的任何一个，则除非我们创建“预设”，否则他们无法“返回”原始默认设置。

商家可以通过转到自定义主题，单击常规设置选项卡，然后单击更改主题样式按钮来查找预设。如果主题没有内置任何预设，则不会显示“ 更改主题样式”按钮。

创建预设非常简单。在config主题目录中有一个名为的文件schema_data.json。如果您尚未创建它，一旦您上传主题，Shopify将自动为您生成它。在schema_data.json您将找到所有主题选项的当前值，在您的主题中为其启用的商店指定。我看起来像这样：

您可以看到”current”对象的属性包含映射到设置值的主题选项ID ; 如果没有通过自定义主题编辑器更改任何内容，则这些值应与settings_schema.json文件中指定的默认值匹配。节主题设置遵循另一个对象中的主题选项”sections”。

创建自定义预设

要创建自定义预设，您只需复制现有“current”对象及其所有属性，然后将其粘贴到”presets”下面的对象中“current”。确保用逗号分隔两者，并为新预设命名。在下面的示例中，我的预设名称是“Default”。要创建多个预设，您只需复制“Default”内部对象”presets”，并为其指定新名称。