# 输入型设置

> Shoplazza 主题能在主题编辑器中开放的全部输入型设置：文本、下拉、复选、颜色、图片等，并列出通用属性。

输入设置可以保存值，并且可以由商家配置。

输入设置通常由[标准属性](/zh-CN/docs/theme/architecture/settings/input-settings#%E6%A0%87%E5%87%86%E5%B1%9E%E6%80%A7)组成，分为两类：

*   [基础输入设置](/zh-CN/docs/theme/architecture/settings/input-settings#%E5%9F%BA%E7%A1%80%E8%BE%93%E5%85%A5%E8%AE%BE%E7%BD%AE)
*   [专业输入设置](/zh-CN/docs/theme/architecture/settings/input-settings#%E4%B8%93%E4%B8%9A%E8%BE%93%E5%85%A5%E8%AE%BE%E7%BD%AE)

了解如何在 theme 中访问这些设置值，请参考[设置概述](/zh-CN/docs/theme/architecture/settings/overview#%E8%AE%BF%E9%97%AE%E8%AE%BE%E7%BD%AE)。

**提示**

如果您想在设置展示中添加信息性元素（如标题），请参考 [Sidebar 设置](/zh-CN/docs/theme/architecture/settings/sidebar-settings)。

## 标准属性

以下是所有输入设置通用的标准属性。但根据输入类型不同，可能会有额外属性或部分属性不适用：

| 属性 | 描述 | 是否必填 |
| --- | --- | --- |
| `type` | 设置类型可以是任何[基础](/zh-CN/docs/theme/architecture/settings/input-settings#%E5%9F%BA%E7%A1%80%E8%BE%93%E5%85%A5%E8%AE%BE%E7%BD%AE)或[专业](/zh-CN/docs/theme/architecture/settings/input-settings#%E4%B8%93%E4%B8%9A%E8%BE%93%E5%85%A5%E8%AE%BE%E7%BD%AE)输入设置类型。 | 是 |
| `id` | 设置 ID 用于访问设置值。 | 是 |
| `label` | 设置标签将在主题编辑器中显示。 | 是 |
| `default` | 设置的默认值。 | 否 |

## 基础输入设置

以下是基础输入设置类型：

*   [checkbox](/zh-CN/docs/theme/architecture/settings/input-settings#checkbox)
*   [range](/zh-CN/docs/theme/architecture/settings/input-settings#range)
*   [select](/zh-CN/docs/theme/architecture/settings/input-settings#select)
*   [text](/zh-CN/docs/theme/architecture/settings/input-settings#text)
*   [textarea](/zh-CN/docs/theme/architecture/settings/input-settings#textarea)

## checkbox

`checkbox` 类型的设置输出一个复选框字段。除了输入设置的[标准属性](/zh-CN/docs/theme/architecture/settings/input-settings#%E6%A0%87%E5%87%86%E5%B1%9E%E6%80%A7)外，`checkbox` 类型设置还具有以下属性：

| 属性 | 描述 | 是否必填 |
| --- | --- | --- |
| `info` | 设置的信息提示，用法与 `label` 相同。 | 否 |

您可以使用这些字段来切换功能的开关状态，例如是否在加购按钮上显示价格。

例如，以下设置将生成如下输出：

**设置**

```json
{
  "type": "checkbox",
  "id": "enable_btn_price",
  "label": {
    "en-US": "Enable variant price on 'Add to cart ' button",
    "zh-CN": "开启加购按钮子款式价格"
  },
  "default": true,
  "info": {
    "en-US": "'Add to cart' button display effect when selecting variants",
    "zh-CN": "选中变体组合时'Add to cart'按钮的展示效果"
  }
}
```

**输出：**

![](https://cnres.appracle.com/d3f2d2b434fc3a8481461bb6a68263bd.png)

访问 `checkbox` 类型的值时，数据以[布尔值](/zh-CN/docs/theme/references/liquid/basics/liquid-types#boolean)返回。

**备注**

如果未指定 `default`，则默认值为 `false`。

## range

`range` 类型的设置输出一个范围滑块字段。除了输入设置的[标准属性](/zh-CN/docs/theme/architecture/settings/input-settings#%E6%A0%87%E5%87%86%E5%B1%9E%E6%80%A7)外，`range` 类型设置还具有以下属性：

| 属性 | 描述 | 是否必填 |
| --- | --- | --- |
| `min` | 输入的最小值 | 否 |
| `max` | 输入的最大值 | 否 |
| `step` | 滑块步进增量 | 否 |
| `unit` | 输入的单位，例如字体大小滑块可设置为 `px`。 | 否 |

您可以使用这些字段来获取不同的数值，例如字体大小。

例如，以下设置将生成如下输出：

**设置**

```json
{
  "type": "range",
  "id": "heading_font_size",
  "label": {
    "en-US": "Heading font size",
    "zh-CN": "标题字号"
  },
  "default": 20,
  "step": 1,
  "min": 16,
  "max": 32,
  "unit": "px"
}
```

**输出：**

![](https://cnres.appracle.com/a64ab793fb862d17da33fec08e05120a.png)

访问 `range` 类型的值时，数据以[数字](/zh-CN/docs/theme/references/liquid/basics/liquid-types#number)返回。

**注意**

`default` 属性为必填项。`min`、`max`、`step` 和 `default` 属性不能为字符串值，否则将导致错误。

## select

`select` 类型的设置输出一个下拉选择器字段。除了输入设置的[标准属性](/zh-CN/docs/theme/architecture/settings/input-settings#%E6%A0%87%E5%87%86%E5%B1%9E%E6%80%A7)外，`select` 类型设置还具有以下属性：

| 属性 | 描述 | 是否必填 |
| --- | --- | --- |
| `options` | 下拉列表中每个选项的 `value`/`label` 定义数组。 | 是 |
| `info` | 设置的信息提示，用法与 `label` 相同。 | 否 |

您可以使用这些字段来获取多选项选择，例如购物车类型。

例如，以下设置将生成如下输出：

**设置**

```json
{
  "type": "select",
  "id": "cart_type",
  "label": {
    "en-US": "Cart type",
    "zh-CN": "购物车类型"
  },
  "default": "dropdown",
  "options": [
    {
      "value": "dropdown",
      "label": {
        "en-US": "Dropdown",
        "zh-CN": "下拉弹窗"
      }
    },
    {
      "value": "page",
      "label": {
        "en-US": "Page",
        "zh-CN": "页面"
      }
    }
  ]
}
```

**输出：**

![](https://cnres.appracle.com/6af4985146f9be7818ac554ce28e291e.png)

访问 `select` 类型的值时，数据以[字符串](/zh-CN/docs/theme/references/liquid/basics/liquid-types#string)返回。

**注意**

如果未指定 `default`，则默认选中空选项。

## text

`text` 类型的设置输出一个单行文本字段。除了输入设置的[标准属性](/zh-CN/docs/theme/architecture/settings/input-settings#%E6%A0%87%E5%87%86%E5%B1%9E%E6%80%A7)外，`text` 类型设置还具有以下属性：

| 属性 | 描述 | 是否必填 |
| --- | --- | --- |
| `placeholder` | 输入框的占位符值，用法与 `label` 相同。 | 否 |
| `info` | 设置的信息提示，用法与 `label` 相同。 | 否 |

您可以使用这些字段来获取简短字符串，例如标题。

例如，以下设置将生成如下输出：

**设置**

```json
{
  "type": "text",
  "id": "heading",
  "label": {
    "en-US": "Heading",
    "zh-CN": "标题"
  },
  "default": "Sample",
  "info": {
    "en-US": "Defaults to 'Sample'",
    "zh-CN": "默认为'Sample'"
  }
}
```

**输出：**

![](https://cnres.appracle.com/c4e48c9fb5dfbe1ad47fbe5a506540ff.png)

访问 `text` 类型的值时，数据以[字符串](/zh-CN/docs/theme/references/liquid/basics/liquid-types#string)返回。

## textarea

`textarea` 类型的设置输出一个多行文本字段。除了输入设置的[标准属性](/zh-CN/docs/theme/architecture/settings/input-settings#%E6%A0%87%E5%87%86%E5%B1%9E%E6%80%A7)外，`textarea` 类型设置还具有以下属性：

| 属性 | 描述 | 是否必填 |
| --- | --- | --- |
| `placeholder` | 输入框的占位符值，用法与 `label` 相同。 | 否 |
| `info` | 设置的信息提示，用法与 `label` 相同。 | 否 |

您可以使用这些字段来获取较长的文本块，例如描述信息。

例如，以下设置将生成如下输出：

**设置**

```json
{
  "type": "textarea",
  "id": "description",
  "label": {
    "en-US": "Description",
    "zh-CN": "描述"
  },
  "default": "",
  "placeholder": {
    "en-US": "Enter description...",
    "zh-CN": "输入描述..."
  }
}
```

**输出：**

![](https://cnres.appracle.com/4c7aba56b52295b3eae86efb5fb998c0.png)

访问 `textarea` 类型的值时，数据以[字符串](/zh-CN/docs/theme/references/liquid/basics/liquid-types#string)返回。

## 专业输入设置

以下是专业输入设置类型：

*   [article](/zh-CN/docs/theme/architecture/settings/input-settings#article)
*   [blog](/zh-CN/docs/theme/architecture/settings/input-settings#blog)
*   [collection](/zh-CN/docs/theme/architecture/settings/input-settings#collection)
*   [color](/zh-CN/docs/theme/architecture/settings/input-settings#color)
*   [font_picker](/zh-CN/docs/theme/architecture/settings/input-settings#font_picker)
*   [html](/zh-CN/docs/theme/architecture/settings/input-settings#html)
*   [image_picker](/zh-CN/docs/theme/architecture/settings/input-settings#image_picker)
*   [link_list](/zh-CN/docs/theme/architecture/settings/input-settings#link_list)
*   [page](/zh-CN/docs/theme/architecture/settings/input-settings#page)
*   [product](/zh-CN/docs/theme/architecture/settings/input-settings#product)
*   [richtext](/zh-CN/docs/theme/architecture/settings/input-settings#richtext)
*   [spacing](/zh-CN/docs/theme/architecture/settings/input-settings#spacing)
*   [tags](/zh-CN/docs/theme/architecture/settings/input-settings#tags)
*   [url](/zh-CN/docs/theme/architecture/settings/input-settings#url)
*   [video_picker](/zh-CN/docs/theme/architecture/settings/input-settings#video_picker)
*   [video_url](/zh-CN/docs/theme/architecture/settings/input-settings#video_url)

## article

`article` 类型的设置输出一个文章选择器字段，自动填充商店可用的文章列表。您可以使用这些字段来获取文章选择，例如在首页展示的精选文章。

例如，以下设置将生成如下输出：

**设置**

```json
{
  "type": "textarea",
  "id": "description",
  "label": {
    "en-US": "Description",
    "zh-CN": "描述"
  },
  "default": "",
  "placeholder": {
    "en-US": "Enter description...",
    "zh-CN": "输入描述..."
  }
}
```

**输出：**

![](https://cnres.appracle.com/f1b8e8bffb61b07a73e487f1ceccd22d.png)

访问 `article` 类型的值时，数据返回以下之一：

*   一个 [article 对象](/zh-CN/docs/theme/references/liquid/objects/article)。
*   `blank`，如果未选择任何内容、所选内容不可见或所选内容已不存在。

**备注**

`article` 设置不支持 `default` 属性。

## blog

`blog` 类型的设置输出一个博客选择器字段，自动填充商店可用的博客列表。您可以使用这些字段来获取博客选择，例如侧边栏中的精选博客。

例如，以下设置将生成如下输出：

**设置**

```json
{
  "type": "blog",
  "id": "blog",
  "label": {
    "en-US": "Blog",
    "zh-CN": "博客"
  }
}
```

**输出：**

![](https://cnres.appracle.com/843b9b5a678d7e79e9074d2927364f81.png)

访问 `blog` 类型的值时，数据返回以下之一：

*   一个 [blog 对象](/zh-CN/docs/theme/references/liquid/objects/blog)。
*   `blank`，如果未选择任何内容或所选内容已不存在。

**备注**

`blog` 设置不支持 `default` 属性。

## collection

`collection` 类型的设置输出一个专辑选择器字段，自动填充商店可用的专辑列表。您可以使用这些字段来获取专辑选择，例如在首页展示精选商品的专辑。

例如，以下设置将生成如下输出：

**设置**

```json
{
  "type": "collection",
  "id": "collection",
  "label": {
    "en-US": "Collection",
    "zh-CN": "专辑"
  }
}
```

**输出：**

![](https://cnres.appracle.com/90b29955bfee78de44e516d7462b9554.png)

访问 `collection` 类型的值时，数据返回以下之一：

*   一个 [collection 对象](/zh-CN/docs/theme/references/liquid/objects/collection)。
*   `blank`，如果未选择任何内容、所选内容不可见或所选内容已不存在。

## color

`color` 类型的设置输出一个颜色选择器字段。您可以使用这些字段为各种 theme 元素（例如正文文字颜色）获取颜色选择。

例如，以下设置将生成如下输出：

**设置**

```json
{
  "type": "color",
  "id": "body_text_color",
  "label": {
    "en-US": "Body text color",
    "zh-CN": "全局文字颜色"
  },
  "default": "#121212"
}
```

**输出：**

![](https://cnres.appracle.com/7836bd5f6b40fca5657a8226aee86f17.png)

访问 `color` 类型的值时，数据以[字符串](/zh-CN/docs/theme/references/liquid/basics/liquid-types#string)返回。

## font_picker

`font_picker` 类型的设置输出一个字体选择器字段，自动填充 [Shoplazza 字体库](/zh-CN/docs/theme/architecture/settings/fonts#%E4%B8%BA-theme-%E6%B7%BB%E5%8A%A0-shoplazza-%E5%AD%97%E4%BD%93)中的可用字体。

您可以使用这些字段为各种 theme 元素（例如基础标题字体）获取字体选择。

例如，以下设置将生成如下输出：

*   使用 [settings_data.json](/zh-CN/docs/theme/architecture/config/settings-data-json) 文件时，只需将 `handle` 作为默认值即可。

**设置**

```json
// 在 settings_data.json 文件中
{
  "type": "font_picker",
  "id": "heading_font",
  "label": {
    "en-US": "Heading font",
    "zh-CN": "标题字体"
  },
  "default": "jost_n4"
}
```

与以下方式等效：

| 属性 | 描述 | 是否必填 |
| --- | --- | --- |
| `value_type` | 返回值的类型，有效值为 `json`。 | 是 |

**设置**

```json
// 在 section 中
{
  "type": "font_picker",
  "id": "heading_font",
  "label": {
    "en-US": "Heading font",
    "zh-CN": "标题字体"
  },
  "value_type": "json",
  "default": {
    "handle": "jost_n4",
    "fallback_families": "sans-serif",
    "family": "Jost",
    "font_face": "@font-face { font-family: 'Jost';  font-style: normal;  font-weight: 400;  font-display: swap;  src: url(https://fonts.gstatic.com/s/jost/v9/92zPtBhPNqw79Ij1E865zBUv7myjJTVBNIg.woff2) format('woff2');}",
    "style": "normal",
    "style_name": { "zh_CN": "标准", "en_US": "Regular 400" },
    "weight": 400
  }
}
```

**输出：**

![](https://cnres.appracle.com/6916345e0b886ad21e11297f2cff70bf.png)

访问 `font_picker` 类型的值时，数据以 [font 对象](/zh-CN/docs/theme/references/liquid/objects/font)返回。

**注意**

`default` 属性为必填项，缺少该属性将导致错误。您可以通过 Shoplazza 字体库中的[可用字体](/zh-CN/docs/theme/architecture/settings/fonts#%E5%8F%AF%E7%94%A8%E5%AD%97%E4%BD%93)查找可用的值。

## html

`html` 类型的设置输出一个接受 HTML 标记的多行文本字段。您可以使用这些字段来获取自定义 HTML 内容块，例如视频嵌入代码。

例如，以下设置将生成如下输出：

**设置**

```json
{
  "type": "html",
  "id": "html",
  "label": {
    "en-US": "HTML",
    "zh-CN": "HTML"
  }
}
```

**输出：**

![](https://cnres.appracle.com/e3783a53ac3a0b75e1fb04c2b9dbbf97.png)

以下 HTML 标签将被自动移除：

*   `<html>`
*   `<head>`
*   `<body>`

访问 `html` 类型的值时，数据以[字符串](/zh-CN/docs/theme/references/liquid/basics/liquid-types#string)返回。

**备注**

未闭合的 HTML 标签将导致错误，请确保输入正确的 HTML。

## image_picker

`image_picker` 类型的设置输出一个图片选择器字段，自动填充 Shoplazza 管理后台文件区域中的可用图片，并提供上传新图片的选项。商家还可以输入 alt 文本。除了输入设置的标准属性外，`image_picker` 类型设置还具有以下属性：

| 属性 | 描述 | 是否必填 |
| --- | --- | --- |
| `info` | 设置的信息提示，用法与 `label` 相同。 | 否 |

您可以使用这些字段来获取图片选择，例如 Logo、Favicon 和轮播图。

例如，以下设置将生成如下输出：

**设置**

```json
{
  "type": "image_picker",
  "id": "image",
  "label": {
    "en-US": "Image",
    "zh-CN": "图片"
  }
}
```

**输出：**

![](https://cnres.appracle.com/6347ab5d1165fa173f7bfc2a6179fc59.png) ![](https://cnres.appracle.com/ed5db94d3e9d1fddeb30d24f18b31e87.png)

访问 `image_picker` 类型的值时，数据以[字符串](/zh-CN/docs/theme/references/liquid/basics/liquid-types#string)返回。

## link_list

`link_list` 类型的设置输出一个菜单选择器字段，自动填充商店可用的菜单列表。除了输入设置的[标准属性](/zh-CN/docs/theme/architecture/settings/input-settings#%E6%A0%87%E5%87%86%E5%B1%9E%E6%80%A7)外，`link_list` 类型设置还具有以下属性：

| 属性 | 描述 | 是否必填 |
| --- | --- | --- |
| `info` | 设置的信息提示，用法与 `label` 相同。 | 否 |

您可以使用这些字段来获取菜单选择，例如页脚链接使用的菜单。

例如，以下设置将生成如下输出：

**设置**

```json
{
  "type": "link_list",
  "id": "menu",
  "label": {
    "en-US": "Menu",
    "zh-CN": "菜单"
  }
}
```

**输出：**

![](https://cnres.appracle.com/c7ff4ec344c83ba0a80b3afbd20ce6b0.png)

访问 `link_list` 类型的值时，数据返回以下之一：

*   一个 [linklist](/zh-CN/docs/theme/references/liquid/objects/linklist)。
*   一个[空对象](/zh-CN/docs/theme/references/liquid/basics/liquid-types#empty)，如果未输入任何内容。

**备注**

`default` 属性为可选项，但如果使用，其值不能为空字符串。

## page

`page` 类型的设置输出一个页面选择器字段，自动填充商店可用的页面列表。您可以使用这些字段来获取页面选择，例如在配送政策展示中使用的页面。

例如，以下设置将生成如下输出：

**设置**

```json
{
  "type": "page",
  "id": "page",
  "label": {
    "en-US": "Page",
    "zh-CN": "页面"
  }
}
```

**输出：**

![](https://cnres.appracle.com/91b921673a57b5e6bca277a42dc836f7.png)

访问 `page` 类型的值时，数据返回以下之一：

*   一个 [page 对象](/zh-CN/docs/theme/references/liquid/objects/page)。
*   `blank`，如果未选择任何内容、所选内容不可见或所选内容已不存在。

**备注**

`page` 设置不支持 `default` 属性。

## product

`product` 类型的设置输出一个商品选择器字段，自动填充商店可用的商品列表。您可以使用这些字段来获取商品选择，例如在首页展示的精选商品。

例如，以下设置将生成如下输出：

**设置**

```json
{
  "type": "product",
  "id": "product",
  "label": {
    "en-US": "Product",
    "zh-CN": "商品"
  }
}
```

**输出：**

![](https://cnres.appracle.com/3c807f7e9e4c89578360e5f0d8d446cb.png)

访问 `product` 类型的值时，数据返回以下之一：

*   一个 [product 对象](/zh-CN/docs/theme/references/liquid/objects/product)。
*   `blank`，如果未选择任何内容、所选内容不可见或所选内容已不存在。

**备注**

`product` 设置不支持 `default` 属性。

## richtext

`richtext` 类型的设置输出一个带有以下基本格式化选项的多行文本字段：

*   加粗
*   斜体
*   段落

除了输入设置的[标准属性](/zh-CN/docs/theme/architecture/settings/input-settings#%E6%A0%87%E5%87%86%E5%B1%9E%E6%80%A7)外，`richtext` 类型设置还具有以下属性：

| 属性 | 描述 | 是否必填 |
| --- | --- | --- |
| `info` | 设置的信息提示，用法与 `label` 相同。 | 否 |

您可以使用这些字段来获取格式化文本内容，例如首页上的品牌介绍内容。

例如，以下设置将生成如下输出：

**设置**

```json
{
  "type": "richtext",
  "id": "paragraph",
  "label": {
    "en-US": "Paragraph",
    "zh-CN": "段落"
  }
}
```

**输出：**

![](https://cnres.appracle.com/78d12339381c462ff1f462f40a823b6e.png)

访问 `richtext` 类型的值时，数据以[字符串](/zh-CN/docs/theme/references/liquid/basics/liquid-types#string)返回。

## spacing

`spacing` 类型的设置输出 `top`、`left`、`right` 和 `bottom` 字段，支持移动端和 PC 端的独立配置。

您可以使用这些字段来配置 section 的间距留白。

例如，以下设置将生成如下输出：

**设置**

```json
{
  "type": "spacing",
  "id": "spacing",
  "label": {
    "en-US": "Spacing",
    "zh-CN": "间距留白"
  },
  "default": {
    "pc": {
      "top": "40",
      "right": "",
      "bottom": "40",
      "left": ""
    },
    "mobile": {
      "top": "20",
      "right": "",
      "bottom": "20",
      "left": ""
    }
  }
}
```

**输出：**

![](https://cnres.appracle.com/78cc524ebf2f17486103c1c8d92c1cd1.png)

访问 `spacing` 类型的值时，数据以[字符串](/zh-CN/docs/theme/references/liquid/basics/liquid-types#string)返回。

此外，还可以访问 spacing 的 `pc` 和 `mobile` 值。

例如：

**输入**

```liquid
PC top: {{ section.settings.spacing.pc.top }}
Mobile top: {{ section.settings.spacing.mobile.top }}
```

**输出**

```html
PC top: 40
Mobile top: 20
```

## tags

`tags` 类型的设置输出一个数组字段。除了输入设置的[标准属性](/zh-CN/docs/theme/architecture/settings/input-settings#%E6%A0%87%E5%87%86%E5%B1%9E%E6%80%A7)外，`tags` 类型设置还具有以下属性：

| 属性 | 描述 | 是否必填 |
| --- | --- | --- |
| `info` | 设置的信息提示，用法与 `label` 相同。 | 否 |

**设置**

```json
{
  "type": "tags",
  "id": "tags",
  "label": {
    "en-US": "Tags",
    "zh-CN": "标签"
  },
  "default": ["Free"]
}
```

**输出：**

![](https://cnres.appracle.com/0004e3422855df68745fdcb2acda9413.png)

访问 `tags` 类型的值时，数据以[数组](/zh-CN/docs/theme/references/liquid/basics/liquid-types#array)返回。

## url

`url` 类型的设置输出一个 URL 输入字段，您可以在其中手动输入外部 URL 和相对路径。它还包含一个选择器，自动填充商店的以下可用资源：

*   首页
*   专辑
*   商品
*   文章
*   博客
*   页面
*   订单查询
*   自定义 URL

您可以使用这些字段来获取 URL 选择，例如轮播图按钮的链接 URL。

例如，以下设置将生成如下输出：

**设置**

```json
{
  "type": "url",
  "id": "button_link",
  "label": {
    "en-US": "Button link",
    "zh-CN": "按钮链接"
  }
}
```

**输出：**

![](https://cnres.appracle.com/f27ea073691f6fdd7f4acadf7c289140.png)

访问 `url` 类型的值时，数据返回以下之一：

*   包含所选 URL 的对象。
*   空[字符串](/zh-CN/docs/theme/references/liquid/basics/liquid-types#string)，如果未输入任何内容。

**备注**

`url` 设置不支持 `default` 属性。

## video_picker

`video` 类型的设置输出一个视频选择器，商家还可以上传新视频。除了输入设置的[标准属性](/zh-CN/docs/theme/architecture/settings/input-settings#%E5%9F%BA%E7%A1%80%E8%BE%93%E5%85%A5%E8%AE%BE%E7%BD%AE)外，`video_picker` 类型设置还具有以下属性：

| 属性 | 描述 | 是否必填 |
| --- | --- | --- |
| `info` | 设置的信息提示，用法与 `label` 相同。 | 否 |

例如，以下设置将生成如下输出：

**设置**

```json
{
  "type": "video_picker",
  "id": "video",
  "label": {
    "en-US": "Video",
    "zh-CN": "视频"
  }
}
```

**输出：**

![](https://cnres.appracle.com/fe7f5d1d1ae2e846ac26c8594cc1db5f.png)

访问 `video` 类型的值时，数据返回以下之一：

*   一个 [video 对象](/zh-CN/docs/theme/references/liquid/objects/video)。
*   `nil`，如果未进行选择。

## video_url

`video_url` 类型的设置输出一个 URL 输入字段。除了输入设置的[标准属性](/zh-CN/docs/theme/architecture/settings/input-settings#%E5%9F%BA%E7%A1%80%E8%BE%93%E5%85%A5%E8%AE%BE%E7%BD%AE)外，`video_url` 类型设置还具有以下属性：

| 属性 | 描述 | 是否必填 |
| --- | --- | --- |
| `accept` | 接受的视频平台数组，有效值为 `youtube`、`vimeo` 或两者均包含。 | 是 |
| `value_type` | 返回值的类型，有效值为 `json`。 | 是 |
| `placeholder` | 输入框的占位符值，用法与 `label` 相同。 | 否 |
| `info` | 设置的信息提示，用法与 `label` 相同。 | 否 |

**设置**

```json
{
  "type": "video_url",
  "id": "video",
  "value_type": "json",
  "accept": ["youtube", "vimeo"],
  "label": {
    "en-US": "Video",
    "zh-CN": "视频"
  }
}
```

**输出：**

![](https://cnres.appracle.com/f5aafbbcddf2a9156cabef524717d641.png)

访问 `video_url` 类型的值时，数据返回以下之一：

*   包含已输入 URL 的[字符串](/zh-CN/docs/theme/references/liquid/basics/liquid-types#string)。
*   [nil](/zh-CN/docs/theme/references/liquid/basics/liquid-types#nil)，如果未输入任何内容。

此外，还可以访问视频的 `id` 和 `type`（`youtube` 或 `vimeo`）。

例如，假设您将[此视频](https://www.youtube.com/watch?v=V4M4m24uNlY)与上述设置结合使用，以下 Liquid 代码将生成如下输出：

**输入**

```liquid
ID: {{ section.settings.video.id }}
Type: {{ section.settings.video.type }}
```

**输出**

```html
ID: V4M4m24uNlY
Type: youtube
```

## 创建链接

您可以在 `info` 设置属性中[添加链接](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a)，方法是将链接文字用 `<a>` 标签包裹，并在其后紧跟括号中的 URL。

例如，以下设置将生成如下输出：

**设置**

```json
{
  "type": "checkbox",
  "id": "show_filter",
  "label": {
    "zh-CN": "开启筛选",
    "en-US": "Enable filter"
  },
  "info": {
    "en-US": "To display the filter, add and <a href='/admin/smart_apps/store/menus' target='_blank'>customize filters</a>.",
    "zh-CN": "展示筛选器需要在后台添加<a href='/admin/smart_apps/store/menus' target='_blank'>筛选纬度</a>。"
  },
  "default": true
}
```

**输出：**

![](https://cnres.appracle.com/d40bb492afa5d19723b2f5b31a5b4636.png)
