# 店铺前台语言文件

> 店面 locale 文件保存 JSON 翻译字符串，Shoplazza 主题用 Liquid 的 t 过滤器输出它们，本页含文件命名与插值写法。

店面 locale 文件是扩展名为 `.json` 的 JSON 文件，用于存储 theme 中店面内容的翻译字符串。商家可以通过 [Shoplazza 语言编辑器](../../developer-tools/language-editor)访问这些翻译内容。

:::note
Shoplazza 通过语言编辑器提供结账和系统消息的翻译，但这些数据由 Shoplazza 单独存储，不在店面 locale 文件中。
:::

Theme 的 layout、template 和 snippet 可以使用 Liquid [翻译 filter](/docs/theme/references/liquid/filters/localization#t)（`t` filter）来引用这些翻译，而不是硬编码文本字符串。该 filter 会从当前激活语言的 locale 文件中返回对应的翻译字符串。

使用 `t` filter 时，您可以对翻译进行[插值](./storefront-locale-files#插值)处理。

## 位置

店面 locale 文件位于 theme 的 `locales` 目录下：

```text title="目录"
└── theme
    ...
    ├── config
    └── locales
      ├── ar-SA.json
      ├── en-US.json
      ...
```

## Schema

请参考 [Locale Schema](/docs/theme/architecture/locales/overview#schema)。

## 内容

为确保翻译正确映射，并尽可能简化商家的操作流程，您应该按照 theme 结构来组织键名层级。

例如，前两级结构可能如下：

| 第一级       | 第二级                                                                                   |
| :----------- | :--------------------------------------------------------------------------------------- |
| `general`    | 404、面包屑导航、分页、搜索（结果页和空白页）                                            |
| `blogs`      | 文章、博客                                                                               |
| `cart`       | 购物车内容、更新、备注、前往结账的链接                                                   |
| `collection` | 专辑                                                                                     |
| `products`   | 商品、相关商品                                                                           |
| `customers`  | 账户、订单（列表和详情）、地址、登录、注册、密码                                         |
| `home_page`  | 空白页、精选内容                                                                         |

:::note
如果您在 snippet 中使用翻译，应将其归入与该 snippet 功能最相关的分类。例如，如果有 `related_products.liquid` snippet，相关翻译应归入 products 分组。
:::

## 使用说明

使用店面 locale 文件时，请注意以下内容：

* [引用店面翻译](./storefront-locale-files#引用店面翻译)
* [插值](./storefront-locale-files#插值)

### 引用店面翻译

要从 theme 当前激活语言的店面 locale 文件中引用翻译，您可以使用翻译键名和 Liquid [翻译 filter](/docs/theme/references/liquid/filters/localization#t)（`t` filter）。

例如，假设您有英语、法语和西班牙语的 locale 文件，各文件中可能包含以下内容：

```json title="/locales/en-US.json (英语)"
{
  "products": {
    "product": {
      "sold_out": "Sold out"
    }
  }
}
```

```json title="/locales/fr-FR.json (法语)"
{
  "products": {
    "product": {
      "sold_out": "Épuisé"
    }
  }
}
```

```json title="/locales/es-ES.json (西班牙语)"
{
  "products": {
    "product": {
      "sold_out": "Vendido"
    }
  }
}
```

引用该翻译时，可以使用如下代码：

```liquid title="输入"
{{ 'i18n.products.product.sold_out' | t }}
```

输出结果根据各 locale 文件的设置进行定制：

```html title="输出"
<!-- 英语 -->
Sold out

<!-- 法语 -->
Épuisé

<!-- 西班牙语 -->
Vendido
```

### 插值

翻译字符串支持插值，即您可以在字符串中包含变量，以便在 Liquid 中引用时动态填充。例如，您可以在 locale 文件中添加以下内容：

```json title="/locales/en-US.json"
{
  "products": {
    "product": {
      "save": "Save {{amount}}"
    }
  }
}
```

在 theme 中引用该翻译时，您可以为 `amount` 变量指定一个值：

```liquid title="输入"
{{ 'i18n.products.product.save' | t: amount: 18.88 }}
```

该代码的输出结果如下：

```html title="输出"
Save 18.88
```

#### 传递多个参数

使用插值时，可以传递多个参数，参数之间用逗号（`,`）分隔。例如，如果您想将上述示例扩展为同时显示节省的金额和货币符号，可以按如下方式调整翻译字符串和 theme 引用：

```json title="/locales/en-US.json"
{
  "products": {
    "product": {
      "save": "Save {{amount}}{{amount_symbol}}"
    }
  }
}
```

```liquid title="输入"
{{ 'i18n.products.product.save' | t: amount: 18.88, amount_symbol: '$' }}
```

该代码的输出结果如下：

```html title="输出"
Save 18.88$
```