如何在AnQiCMS的后台自定义字段中，如果某个字段存储的是多选值（数组），通过`join`过滤器将其在前端页面清晰展示？

安企CMS以其灵活的内容模型和强大的自定义功能，为网站运营者提供了极大的便利。在日常的内容管理中，我们常常会遇到需要为文章或产品添加多选属性的情况，例如一个产品可能拥有多种颜色、不同的尺寸等。当这些信息通过自定义字段以多选值的形式存储在后台时，如何在前端页面上以清晰、美观的方式展示它们，就成了我们需要解决的问题。

理解安企CMS的多选自定义字段

在安企CMS的后台，我们可以通过内容模型管理，为不同的内容类型（如文章、产品）创建自定义字段。其中，“多项选择”类型的字段允许内容编辑者为某个内容项选择多个预设值。例如，为一个商品定义“颜色”字段，并设置可选值“红色”、“蓝色”、“绿色”，编辑时即可同时勾选“红色”和“蓝色”。

当这些多选值被存储后，系统通常会将其以数组的形式（或者是一个由特定分隔符连接的字符串，但前端模板引擎会将其识别为可迭代的列表）进行保存。在前端模板中直接输出这个字段，往往会看到一个未经处理的原始数据，如 ["红色", "蓝色"] 或 红色,蓝色，这显然不够美观和用户友好。

在前端模板中访问自定义字段数据

要将这些自定义字段展示在前端页面，我们首先需要通过安企CMS提供的模板标签来获取它们。最常用的方式是使用 archiveParams 标签来循环遍历所有自定义参数，或者直接通过字段名访问。

例如，在文档详情页中，我们可以这样获取所有自定义字段：

{% archiveParams params %}
    {% for item in params %}
        <div>
            <span>{{item.Name}}：</span>
            <span>{{item.Value}}</span>
        </div>
    {% endfor %}
{% endarchiveParams %}

如果您的多选字段名为 productFeatures，您也可以尝试直接访问：

{% archiveDetail productFeatures with name="productFeatures" %}
{{ productFeatures }}

然而，无论是通过循环还是直接访问，对于多选字段 productFeatures 的 item.Value 或 productFeatures，其输出结果可能依然是类似 ["特点A", "特点B", "特点C"] 这样的原始数组字符串。这正是我们需要优化的地方。

巧妙运用 join 过滤器，让多选值清晰展现

为了将这种数组形式的原始数据转换为易于阅读的字符串，安企CMS的模板引擎提供了一个非常实用的过滤器：join。 join 过滤器的作用是将一个数组（或任何可迭代的对象）中的所有元素，通过您指定的连接符拼接成一个单一的字符串。

join 过滤器的基本用法是 {{ obj|join:"连接符" }}。其中，obj 是您要处理的数组或列表，而 "连接符" 则是您希望在元素之间插入的字符串，例如逗号、顿号、斜杠或任何自定义文本。

现在，让我们看看如何将 join 过滤器应用到多选自定义字段的展示上。

场景一：通过 archiveParams 遍历显示所有自定义字段

假设您有一个多选字段名为“产品特点”，在后台输入了“防水”、“防震”、“智能连接”等多个值。在前端模板中，您可以这样处理：

{% archiveParams params %}
    {% for item in params %}
        {% if item.FieldName == "productFeatures" %} {# 假设 productFeatures 是您的多选字段的调用字段名 #}
            <div>
                <span>{{item.Name}}：</span>
                {# 将多选值用中文顿号连接，使其更符合阅读习惯 #}
                <span>{{ item.Value|join:"、" }}</span>
            </div>
        {% else %}
            {# 其他非多选字段的正常显示逻辑 #}
            <div>
                <span>{{item.Name}}：</span>
                <span>{{item.Value}}</span>
            </div>
        {% endif %}
    {% endfor %}
{% endarchiveParams %}

在上面的代码中，我们首先判断当前循环到的 item 是否是我们的多选字段。如果是，我们就对 item.Value 应用 join:"、" 过滤器，将其中的元素用“、”连接起来。这样，前端页面上就能看到“产品特点：防水、防震、智能连接”，而不是原始的数组格式。

场景二：直接访问并显示已知名称的多选自定义字段

如果您明确知道某个多选字段的名称（例如，它的调用字段是 productFeatures），您可以更直接地获取和展示它：

{% archiveDetail productFeatures with name="productFeatures" %}
    {% if productFeatures %} {# 检查字段是否有值，避免显示空行 #}
        <div>
            <span>产品特点：</span>
            {# 使用斜杠和空格作为连接符，适用于产品参数等场景 #}
            <span>{{ productFeatures|join:" / " }}</span>
        </div>
    {% endif %}

这段代码首先通过 archiveDetail 标签获取 productFeatures 字段的值，然后直接对其应用 join:" / " 过滤器。这样，如果该字段选择了“功能A”和“功能B”，页面上将显示“产品特点：功能A / 功能B”。

通过 join 过滤器，我们得以将后台复杂的数据结构转化为前端清晰、易读的展示内容。您可以根据实际需求，选择不同的连接符（如逗号、顿号、斜杠或任意文本），使您的网站内容更加专业和美观。

常见问题 (FAQ)

1. join 过滤器可以处理哪些类型的数据？它对所有字段都有效吗？ join 过滤器主要用于处理数组（slice）或系统内部能识别为列表（例如由逗号分隔的字符串）的数据类型。在安企CMS中，多选自定义字段的值通常会被模板引擎识别为可迭代的列表，因此 join 过滤器能很好地应用于它们。对于单行文本、数字等非列表类型的字段，join 过滤器可能会将其视为单个元素的列表进行处理（例如 {{ "hello"|join:"-" }} 可能输出 h-e-l-l-o），因此建议仅在确实是多选或列表类型的字段上使用。

2. 如果我的多选字段在后台没有选择任何值，前端应用 join 过滤器后会显示什么？ 当多选字段没有选择任何值时，其值通常是一个空数组或空列表。对一个空列表应用 join 过滤器，默认情况下会返回一个空字符串。如果您不希望显示空白，可以在模板中使用条件判断（{% if productFeatures %}）来控制，或者结合 default 过滤器设置一个默认的显示文本，例如 {{ productFeatures|join:"、"|default:"暂无" }}。

3. join 过滤器和 split 过滤器有什么区别？在什么情况下会用到 split？ join 过滤器是将数组元素“连接”成一个字符串，而 split 过滤器则相反，它将一个字符串按指定的分隔符“拆分”成一个数组。如果您在后台自定义字段中存储的是一个纯文本字符串（而不是多选字段自动生成的列表），并且这个字符串是通过某个特定分隔符（如逗号）来表示多个值的，那么您可能需要先使用 split 过滤器将该字符串拆分成数组，然后再使用 join 过滤器将其以另一种方式展示，例如：{{ "值1,值2,值3"|split:","|join:" / " }} 会输出 值1 / 值2 / 值3。