安企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 }}

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

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

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

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