# Metafield 过滤器

> Shoplazza Theme 的 Liquid 元字段过滤器：metafield_tag 把元字段渲染进对应 HTML 元素，metafield_text 以纯文本输出。

Metafield filters 将 metafield object 中的 metafield 数据输出到相关 HTML 元素中，或以纯字符串形式输出。

## metafield_tag

`metafield | metafield_tag`

returns  [string](../basics/liquid-types#string)

生成用于承载 metafield 数据的 HTML 元素，生成的元素类型因 metafield 类型而异。

### 基本类型

大多数 metafield 类型返回一个简单的 HTML 元素：

| Type | Element | Attributes |
| --- | --- | --- |
| `boolean` | `<span>` | `class="metafield-boolean"` |
| `collection_reference` | `<a>` | `class="metafield-collection_reference"` |
| `color` | `<span>` | `class="metafield-color"` |
| `date` | `<time>` | `datetime="<the metafield value>"`<br>`class="metafield-date"` |
| `date_time` | `<time>` | `datetime="<the metafield value>"`<br>`class="metafield-date"`<br>值根据客户的语言区域进行本地化。 |
| `json` | `script` | `type="application/json"`<br>`class="metafield-json"` |
| `money` | `<span>` | `class="metafield-money"` |
| `multi_line_text_field` | `<span>` | `class="metafield-multi_line_text_field"` |
| `number_decimal` | `<span>` | `class="metafield-number_decimal"` |
| `number_integer` | `<span>` | `class="metafield-number_integer"` |
| `page_reference` | `<a>` | `class="metafield-page_reference"` |
| `product_reference` | `<a>` | `class="metafield-product_reference"` |
| `rating` | `<span>` | `class="metafield-rating"` |
| `single_line_text_field` | `<span>` | `class="metafield-single_line_text_field"` |
| `url` | `<a>` | `class="metafield-url"` |
| `variant_reference` | `<a>` | `class="metafield-variant_reference"` |

**代码**

```liquid
<!-- boolean -->
{{ product.metafields.custom.seasonal | metafield_tag }}

<!-- color -->
{{ product.metafields.custom.potion_color | metafield_tag }}

<!-- date -->
{{ product.metafields.custom.expiry | metafield_tag }}

<!-- date_time -->
{{ product.metafields.custom.brew_date | metafield_tag }}

<!-- json -->
{{ product.metafields.custom.burn_temperature | metafield_tag }}

<!-- multi_line_text_field -->
{{ product.metafields.custom.shipping | metafield_tag }}

<!-- number_decimal -->
{{ product.metafields.custom.salinity | metafield_tag }}

<!-- number_integer -->
{{ product.metafields.custom.doses_per_day | metafield_tag }}

<!-- rating -->
{{ product.metafields.custom.rating | metafield_tag }}

<!-- single_line_text_field -->
{{ product.metafields.custom.directions | metafield_tag }}

<!-- url -->
{{ product.metafields.custom.health | metafield_tag }}
```

**输出**

```html
<!-- boolean -->
<span class="metafield-boolean">1</span>

<!-- color -->
<span class="metafield-color">#ffa500</span>

<!-- date -->
<time datetime="2030-12-31" class="metafield-date">2030-12-31</time>

<!-- date_time -->
<time datetime="2023-07-31T12:20:20+08:00" class="metafield-date">2023-07-31 12:20:20+08:00</time>

<!-- json -->
<script type="application/json" class="metafield-json">{
  "temperature": 700,
  "unit": "degrees",
  "scale": "Fahrenheit"
}</script>

<!-- multi_line_text_field -->
<span class="metafield-multi_line_text_field"><span class="metafield-multi_line_text_field">All health potions are made to order, so it might take up to 2 weeks before your order can be shipped.<br><br>Thanks for your patience!</span></span>

<!-- number_decimal -->
<span class="metafield-number_decimal">8.4</span>

<!-- number_integer -->
<span class="metafield-number_integer">3</span>

<!-- rating -->
<span class="metafield-rating">4.5</span>

<!-- single_line_text_field -->
<span class="metafield-single_line_text_field">Take with a meal.</span>

<!-- url -->
<a href="https://www.canada.ca/en/health-canada/services/food-nutrition/legislation-guidelines/acts-regulations/canada-food-drugs.html" class="metafield-url">https://www.canada.ca/en/health-canada/services/food-nutrition/legislation-guidelines/acts-regulations/canada-food-drugs.html</a>
```

### 复杂类型

以下 metafield 类型根据 metafield 内容返回嵌套元素或不同元素：

*   [dimension](/zh-CN/docs/theme/references/liquid/filters/metafield#dimension)
*   [file_reference](/zh-CN/docs/theme/references/liquid/filters/metafield#file_reference)
*   [volume](/zh-CN/docs/theme/references/liquid/filters/metafield#volume)
*   [weight](/zh-CN/docs/theme/references/liquid/filters/metafield#weight)

### dimension

输出具有以下属性的 `<span>` 元素：

| Attribute | Value |
| --- | --- |
| `class` | `metafield-dimension` |

`<span>` 元素包含以下子元素：

| Child element | HTML element | Attributes |
| --- | --- | --- |
| 尺寸值。<br>如果它是小数位超过一位的小数，则会被格式化为精度为一位并去除末尾的零。 | `<span>` | `class="metafield-dimension_value"` |
| 尺寸单位。 | `<span>` | `class="metafield-dimension_unit"` |

**代码**

```liquid
{{ product.metafields.custom.scale_width | metafield_tag }}
```

**输出**

```html
<span class="metafield-dimension"><span class="metafield-dimension_value">98.1</span><span class="metafield-dimension_unit">MILLIMETERS</span></span>
```

### file_reference

输出会根据文件类型的不同而变化。文件类型分为以下几类：

| File type | Description |
| --- | --- |
| Image | 格式为 `jpg`、`png`、`gif` 和 `webp` 的图片。 |

#### 图片

输出具有以下属性的 `<img>` 元素：

| Attribute | Value |
| --- | --- |
| `src` | 图片的 URL。 |
| `loading` | `lazy` |
| `class` | `metafield-file_reference` |

**代码**

```liquid
{{ product.metafields.custom.promo_image | metafield_tag }}
```

**输出**

```html
<img src="https://img.staticdj.com/68fcdc4c8b38e14ee60251475c0b8bd4.webp" loading="lazy" class="metafield-file_reference">
```

### volume

输出具有以下属性的 `<span>` 元素：

| Attribute | Value |
| --- | --- |
| `class` | `metafield-volume` |

`<span>` 元素包含以下子元素：

| Child element | HTML element | Attributes |
| --- | --- | --- |
| 体积值。<br>如果它是小数位超过一位的小数，则会被格式化为精度为一位并去除末尾的零。 | `<span>` | `class="metafield-volume_value"` |
| 体积单位。 | `<span>` | `class="metafield-volume_unit"` |

**代码**

```liquid
{{ product.metafields.custom.milk_container_volume | metafield_tag }}
```

**输出**

```html
<span class="metafield-volume"><span class="metafield-volume_value">250</span><span class="metafield-volume_unit">MILLILITERS</span></span>
```

### weight

输出具有以下属性的 `<span>` 元素：

| Attribute | Value |
| --- | --- |
| `class` | `metafield-weight` |

`<span>` 元素包含以下子元素：

| Child element | HTML element | Attributes |
| --- | --- | --- |
| 重量值。<br>如果它是小数位超过一位的小数，则会被格式化为精度为一位并去除末尾的零。 | `<span>` | `class="metafield-weight_value"` |
| 重量单位。 | `<span>` | `class="metafield-weight_unit"` |

**代码**

```liquid
{{ product.metafields.custom.chamomile_base_weight | metafield_tag }}
```

**输出**

```html
<span class="metafield-weight"><span class="metafield-weight_value">50</span><span class="metafield-weight_unit">GRAMS</span></span>
```

## metafield_text

`metafield | metafield_text`

returns  [string](../basics/liquid-types#string)

生成 metafield 数据的文本版本。

以下列出了每种 metafield 类型的输出：

| Metafield type | Output |
| --- | --- |
| `single_line_text_field` | metafield 文本。 |
| `multi_line_text_field` | metafield 文本。 |
| `page_reference` | 页面标题。 |
| `product_reference` | 商品标题。 |
| `collection_reference` | collection 标题。 |
| `variant_reference` | variant 标题。 |
| `file_reference` | 文件 URL。 |
| `number_integer` | 数字。 |
| `number_decimal` | 数字。 |
| `date` | 日期。 |
| `date-time` | 日期和时间。 |
| `url` | URL。 |
| `json` | JSON。 |
| `boolean` | 布尔值 |
| `color` | 颜色值。 |
| `weight` | 重量值和单位。<br>如果它是小数位超过一位的小数，则会被格式化为精度为一位并去除末尾的零。 |
| `volume` | 体积值和单位。<br>如果它是小数位超过一位的小数，则会被格式化为精度为一位并去除末尾的零。 |
| `dimension` | 尺寸值和单位。<br>如果它是小数位超过一位的小数，则会被格式化为精度为一位并去除末尾的零。 |
| `rating` | 评分值。 |
| `money` | 金额值。 |

**代码**

```liquid
{{ product.metafields.custom.shipping | metafield_text }}
```

**输出**

```html
All health potions are made to order, so it might take up to 2 weeks before your order can be shipped.
Thanks for your patience!
```