在安企CMS的日常运营中,我们经常会遇到需要对内容中的一些结构化信息进行灵活展示的场景。比如,在为文章或产品设置关键词时,我们可能会在后台的“文档关键词”字段中输入一个包含多个标签的字符串,例如“SEO,关键词,优化”。这样的字符串虽然方便录入,但在前端展示时,我们通常希望将这些标签分别显示,甚至将它们转化为独立的、可点击的元素。

如何将这样一个以逗号分隔的标签字符串,在安企CMS的模板中高效地拆分成独立的标签,从而实现更精细化的内容展示和交互呢?

安企CMS的模板引擎提供了强大的过滤器功能,其中split过滤器正是解决这个问题的利器。它能帮助我们轻松地将一个字符串按照指定的分隔符切割成一个数组(或称为切片),然后我们就可以对数组中的每个元素进行单独处理了。

巧妙运用 split 过滤器

想象一下,你在为一篇关于SEO的文章设置关键词,并在后台的“文档关键词”字段中填写了SEO,关键词,优化,内容营销。在文章详情页,你希望这些词不是作为一个长字符串出现,而是以独立的小标签形式展示。

这时,split过滤器就派上用场了。它的基本用法非常直观:

{{ 你的字符串变量|split:"分隔符" }}

比如,如果你想将SEO,关键词,优化这个字符串以逗号为分隔符进行拆分,你可以这样操作:

{% set keywordString = "SEO,关键词,优化,内容营销" %}
{% set keywordArray = keywordString|split:"," %}

在这段代码中:

  • 我们首先使用{% set keywordString = "..." %}定义了一个变量keywordString,存储了包含所有标签的原始字符串。
  • 接着,{% set keywordArray = keywordString|split:"," %}这一行代码是核心。它将keywordString变量的内容作为输入,通过|split:","过滤器,以逗号,作为分隔符,将字符串拆分成一个数组,并将结果赋值给keywordArray

现在,keywordArray变量中就存储了一个包含["SEO", "关键词", "优化", "内容营销"]这些元素的数组了。

遍历拆分后的数组,实现灵活展示

拥有了这个数组后,你就可以利用安企CMS模板的循环标签{% for %}来遍历它,并对每个标签进行个性化处理。为了让每个标签看起来更整洁,尤其是在手动输入时可能存在不小心留下的空格,我们还可以结合trim过滤器来去除标签两端的多余空格。

下面是一个完整的示例,演示如何将后台输入的标签字符串拆分并展示为页面上的可点击小标签:

{% set articleTags = "SEO, 关键词 , 优化 , 内容营销 , AnQiCMS" %} {# 假设这是从文档详情获取的标签字符串,可能包含一些空格 #}
{% set tagListArray = articleTags|split:"," %}

{# 检查数组是否为空,避免渲染空标签或不必要的结构 #}
{% if tagListArray %}
<div class="article-tags-container">
    <span class="tags-label">标签:</span>
    {% for tagItem in tagListArray %}
        {# 仅显示非空且去除空格后的标签,并为每个标签添加链接或样式 #}
        {% if tagItem|trim %}
        <a href="/tag/{{ tagItem|trim }}" class="tag-button">{{ tagItem|trim }}</a>
        {% endif %}
    {% endfor %}
</div>
{% endif %}

在这段代码中:

  1. 我们首先通过split:","articleTags字符串拆分成了tagListArray数组。
  2. {% if tagListArray %}用于判断拆分后的数组是否包含任何元素,避免在没有标签时显示空的容器。
  3. {% for tagItem in tagListArray %}则会逐一取出数组中的每个标签。
  4. {% if tagItem|trim %}是一个非常实用的判断。|trim过滤器(参考安企CMS文档中的filter-trim.md)能够去除字符串两端的空格。这个判断确保我们只处理并显示有效(非空)的标签。
  5. {{ tagItem|trim }}则在显示标签内容时再次应用trim过滤器,确保显示效果干净整洁。
  6. 这里我们还给每个标签包裹了<a>链接,并假定 /tag/{{ tagItem|trim }} 是该标签对应的详情页URL,这样用户点击标签就可以查看相关内容,极大地提升了网站的交互性和SEO友好性。

通过这样的方式,即使你在后台的“文档关键词”字段中输入的字符串是SEO, 关键词 , 优化 , 内容营销(包含不规范的空格),前端也能整洁地显示为SEO关键词优化内容营销这些独立的标签。

总结

在安企CMS中,利用split过滤器将包含多个标签的字符串拆分成数组,是一个非常基础但极其强大的内容运营技巧。它不仅让内容展示更加灵活和美观,也为网站的SEO和用户体验带来了实实在在的提升。配合trim过滤器清理空格,以及for循环和if判断进行条件渲染,你将能够构建出更加动态和健壮的模板。


常见问题 (FAQ)

1. 如果我的标签字符串为空(例如,后台没有填写任何关键词),页面会显示什么?

当标签字符串为空时(如""),split过滤器会返回一个包含单个空字符串的数组([""])。但在上述示例中,我们添加了{% if tagListArray %}来检查整个数组是否为空,以及{% if tagItem|trim %}来检查数组中的每个元素在去除空格后是否有效。这意味着,如果标签字符串为空,页面上将不会显示任何标签或article-tags-container这个容器,保持页面整洁。

2. 除了逗号,我可以使用其他字符作为分隔符来拆分字符串吗?

当然可以。split过滤器的第二个参数就是指定分隔符。如果你在后台习惯使用分号;或竖线|来分隔标签,那么你只需要将代码中的,替换为对应的分隔符即可。例如,如果你的标签字符串是`SEO;关键词;优化