在安企CMS（AnQiCMS）的日常内容运营中，我们经常需要在文章或产品详情页展示相关的关键词。这些关键词不仅有助于搜索引擎理解页面内容，也能引导用户发现更多相关信息。通常情况下，我们会在后台的一个文本框中输入这些关键词，并使用逗号进行分隔，例如：“网站运营,SEO优化,内容营销”。

然而，当我们希望在前端页面上，将这些关键词作为独立的、可点击的标签或者以更美观的卡片形式展示时，直接获取到的“网站运营,SEO优化,内容营销”这样的字符串是无法直接遍历的。这就需要我们对这个字符串进行“加工”，将其拆分成一个独立的关键词列表。

安企CMS强大的模板引擎和内置过滤器，让这项任务变得异常简单和高效。接下来，我们将一步步地探讨如何将后台配置的逗号分隔关键词字符串，巧妙地转化为前端模板中可灵活操作的关键词列表。

后台关键词的录入与前端获取

在安企CMS的后台编辑界面，例如添加或编辑文档时，我们会在“文档关键词”字段中填写相关词汇。根据系统的提示，多个关键词之间使用英文逗号 , 进行分隔。这个设计非常符合内容编辑的习惯，也便于后台管理。

当内容发布后，在前端模板中，我们可以通过 {{archive.Keywords}}（针对文档详情页）或者在循环中通过 {{item.Keywords}}（针对文档列表）来获取到这些关键词字符串。此时，获取到的就是一整串文本，比如“网站运营, SEO优化, 内容营销”。

解决之道：利用 split 过滤器

要将这串关键词文本拆分成独立的列表项，安企CMS模板引擎提供了一个名为 split 的强大过滤器。顾名思义，split 过滤器能够根据指定的分隔符，将一个字符串切割成一个数组（或称作列表）。

核心思路：

  1. 获取后台设置的关键词字符串。
  2. 使用 split 过滤器，以逗号和可能存在的空格作为分隔符，将字符串拆分为多个独立的关键词。
  3. 通过 for 循环遍历这个新生成的关键词列表，逐一展示每个关键词。

实战演练：一步步实现关键词列表

假设我们正在编辑一个文章详情页的模板，并希望在文章底部展示相关的关键词标签。

第一步：获取关键词字符串

首先，在您的模板文件（例如 archive/detail.html）中，获取当前文章的关键词字符串。为了方便后续操作，我们可以使用 {% set %} 标签将其存储在一个变量中：

{% set raw_keywords = archive.Keywords %}

这里，raw_keywords 将会包含类似 “网站运营, SEO优化, 内容营销” 这样的字符串。

第二步：使用 split 过滤器进行拆分

接下来，我们将使用 split 过滤器对 raw_keywords 变量进行处理。由于用户在后台输入关键词时，习惯上可能会在逗号后面添加一个空格，因此，为了确保拆分结果的准确性，建议使用 ,（逗号后加一个空格）作为分隔符。如果确定用户只用逗号分隔，也可以只使用 ,。

{% if raw_keywords %} {# 确保关键词不为空 #}
    {% set keyword_list = raw_keywords|split:", " %}
    {# 此时，keyword_list 将是一个包含 ["网站运营", "SEO优化", "内容营销"] 的数组 #}
{% endif %}

通过这行代码，keyword_list 现在已经是一个包含了三个独立字符串元素的数组了。

第三步：遍历并展示关键词列表

有了 keyword_list 数组，我们就可以使用 {% for %} 循环来遍历它，并为每个关键词生成我们想要的HTML结构，例如显示为带有边框和背景色的标签：

{% if keyword_list %}
    <div class="article-keywords">
        <span class="keywords-label">相关关键词：</span>
        {% for keyword in keyword_list %}
            {# 对每个关键词再次使用 `trim` 过滤器，去除可能存在的额外首尾空格，确保显示整洁 #}
            <a href="/search?q={{ keyword|trim }}" class="keyword-item">{{ keyword|trim }}</a>
        {% endfor %}
    </div>
{% endif %}

在这个例子中，我们为每个关键词添加了一个简单的CSS类 keyword-item，方便进行样式美化。同时，为了提升用户体验和SEO，我们将每个关键词包装成一个 <a> 标签，并将其 href 属性指向一个搜索页，以便用户点击后能搜索到更多相关内容。|trim 过滤器的使用，也进一步保证了关键词显示时的整洁性，避免因为后台录入时的额外空格导致显示异常。

拓展应用与技巧

  • 样式美化： 您可以通过CSS为 article-keywords 和 keyword-item 类添加样式，如背景色、边框、圆角、字体大小等，使关键词标签更加醒目和美观。
  • 空关键词处理： 在上面的例子中，我们通过 {% if raw_keywords %} 和 {% if keyword_list %} 进行了两次判断，确保只有当存在关键词时才渲染相关HTML，避免页面出现不必要的空标签。
  • 限制显示数量： 如果关键词过多，您可能希望只显示前几个。可以使用 slice 过滤器来截取数组的一部分： 
    
{% set limited_keywords = keyword_list|slice:":5" %} {# 只显示前5个关键词 #}
{% for keyword in limited_keywords %}
    <a href="/search?q={{ keyword|trim }}" class="keyword-item">{{ keyword|trim }}</a>
{% endfor %}

通过 split 过滤器的灵活运用，安企CMS的用户可以轻松地将后台的纯文本关键词转化为前端页面上具有更强互动性和视觉吸引力的元素，极大地丰富了网站的内容展示形式，也为SEO和用户体验带来了积极的提升。

常见问题（FAQ）

Q1: 如果我的关键词之间没有用逗号和空格分隔，而是只用了逗号，split:", " 还能正确拆分吗？

A1: 如果您的关键词之间仅用逗号 , 分隔，例如 “网站运营,SEO优化,内容营销”，那么使用 split:", " 可能无法正确拆分，因为它期望逗号后有一个空格。在这种情况下，您应该将分隔符改为 split:","。为了最大限度地兼容，您可以在拆分后，对每个关键词再使用 |trim 过滤器，这样可以去除关键词本身可能存在的首尾空格。

Q2: 我只想显示关键词列表中的前几个关键词，如何实现？

A2: 您可以使用 slice 过滤器来截取关键词列表。例如，如果您想显示前5个关键词，可以在 keyword_list 变量上应用 |slice:":5"。完整的代码可能是这样： {% set limited_keywords = keyword_list|slice:":5" %} 然后您就可以遍历 limited_keywords 来展示前5个关键词了。

Q3: 如何将这些拆分出来的关键词变成可点击的链接，并跳转到安企CMS自带的标签页或关键词库搜索页？

A3: 直接通过 split 过滤器拆分出来的关键词是纯文本。如果您希望它们链接到安企CMS的官方标签页或关键词搜索结果，建议使用 tagList 标签获取与当前文章关联的官方标签列表，因为 tagList 返回的每个标签对象都包含可以直接使用的 Link 属性。例如：

{% tagList tags with itemId=archive.Id limit="10" %}
    {% for tag_item in tags %}
        <a href="{{tag_item.Link}}" class="keyword-item">{{tag_item.Title}}</a>
    {% endfor %}
{% endtagList %}

这种方式可以确保链接的有效性和正确