README

Statamic 国家和地区字段类型插件是一个插件，包含了您在网站上存储和显示国家和地区的所有需求。

功能

• 支持所有在 ISO 3166-1 中标准化的国家。
• 支持所有在 ISO 3166-2 中标准化的地区（主要子区域；例如：州、省）。
• 多选国家和地区。
• 设置默认国家或地区。
• 在地区字段类型配置中，可以指定一个或多个国家，其地区将作为选项显示。
• 这些字段类型的区域设置在控制面板中工作。
• 在多站使用时，这些字段类型将在（多）站点的区域设置中显示国家或地区。

如何安装

在 Statamic 控制面板的 工具 > 插件 部分搜索 '国家和地区' 插件，点击 安装，或者从您项目的根目录运行以下命令

composer require kadegray/statamic-country-and-region-fieldtypes

如何使用

您会注意到该插件中有三种字段类型，这为您提供了最大的控制权，以便您按照自己的意愿存储国家/地区数据。

• 国家字段类型
• 地区字段类型
• 国家中的地区

国家字段类型

将国家字段类型添加到您的蓝图并编辑条目后，选择输入将显示国家名称。然而，当您保存条目时，字段类型将存储两位字母的国家代码作为值。

如果您将字段处理程序指定为 "country"，您可以在模板中使用以下代码来显示国家名称。

{{ country }}

如果您正在使用多站，上述代码将正确显示您正在访问的当前站点的语言相关的国家名称。

地区字段类型

地区字段类型的功能类似于国家字段类型。但是，为了确定一个国家的哪些地区应显示，您需要使用国家配置来配置它们。

国家配置提供两种选项

1. 手动 - 此选项允许您手动选择一个国家。
2. 字段 - 通过选择此选项，您可以在同一蓝图内定义一个国家字段类型的处理程序。当在字段类型中选择国家时，地区字段类型将动态更新其地区列表以匹配所选国家。

国家中的地区

国家中的地区字段类型是国家和地区字段类型的组合。为了选择地区，必须先选择国家。这种选择国家的操作将动态更新地区字段类型中可用的选项。

区域配置

控制面板

在控制面板中，这些字段类型被设计为支持不同的区域设置。这意味着当您更改控制面板的区域设置时，字段类型将以相应的语言显示。

要配置控制面板的区域设置，您需要在 config/app.php 文件中设置 locale 值。之后不要忘记运行 php artisan config:clear 命令以确保更改生效。

多站点

在使用多站点时，在 Antler 的 {{ region }} 中渲染字段类型将显示特定于站点区域设置的值。

这些区域设置的配置可以在 config/statamic/sites.php 文件中找到。

countries_and_regions 标签

使用 countries_and_regions 标签在 Antlers 中遍历国家或地区。

国家 countries_and_regions:countries

可以使用 default 参数将匹配的国家设置为 selected 为 true。

<ul>
{{ countries_and_regions:countries default="AU" }}
    <li>{{ isoCode }} - {{ countryName }}</li>
{{ /countries_and_regions:countries }}
</ul>

示例使用在注册表单中

{{ user:register_form }}
...
<label for="country">Country:</label>
<select name="country" id="country">
    {{ countries_and_regions:countries default="AU" }}
    <option value="{{ isoCode }}" {{ selected }}>
        {{ countryName }}
    </option>
    {{ /countries_and_regions:countries }}
</select>
...
{{ /user:register_form }}

地区 countries_and_regions:regions

可以使用 country 参数通过代码过滤国家。这也可以是多个："AU,US"。可以使用 default 参数将匹配的地区设置为 selected 为 true。

<ul>
{{ countries_and_regions:regions country="AU" default="AU-NSW" }}
    <li>{{ isoCode }} - {{ regionName }} - {{ selected }}</li>
{{ /countries_and_regions:regions }}
</ul>

示例使用在注册表单中

{{ user:register_form }}
...
<label for="region">Region:</label>
<select name="region" id="region">
    {{ countries_and_regions:regions country="AU" default="AU-NSW" }}
    <option value="{{ isoCode }}" {{ selected }}>{{ regionName }}</option>
    {{ /countries_and_regions:regions }}
</select>
...
{{ /user:register_form }}

如果您有一个位于地区选择器上方的国家选择器，请参阅以下小标题。

端点：/countries_and_regions/{countryCode}/regions

如果您有一个位于地区选择器上方的国家选择器，并且希望在选中国家时更新地区选项，请参阅以下示例。

<select name="country" id="country" onchange="reloadRegions()">
    ...options
</select>

<select name="region" id="region">
    ...options
</select>

<script>
    async function reloadRegions() {
        const countryCode = document.getElementById("country").value;
        if (!countryCode) {
            return;
        }
        const response = await fetch(
            `/countries_and_regions/${countryCode}/regions`,
            {
                method: "POST",
                headers: {
                    "X-CSRF-Token": "{{ csrf_token }}",
                },
            }
        );
        const regions = await response.json();
        const regionElement = document.getElementById("region");
        regionElement.innerHTML = "";
        for (let region of regions) {
            let option = document.createElement("option");
            option.text = region.label;
            option.value = region.value;
            regionElement.add(option);
        }
    }
</script>