In the daily content operation of AnQiCMS, we often need to display related keywords on article or product detail pages.These keywords not only help search engines understand the content of the page, but also guide users to discover more relevant information.In most cases, we input these keywords into a text box on the back end, separated by commas, for example: 'website operation, SEO optimization, content marketing'.

However, when we want to display these keywords as independent, clickable tags or in a more aesthetic card form on the front-end page, the string '网站运营,SEO优化,内容营销' that is directly obtained cannot be traversed directly.This requires us to 'process' this string, splitting it into a list of independent keywords.

The powerful template engine and built-in filters of AnQi CMS make this task extremely simple and efficient.Next, we will step by step explore how to cleverly convert the comma-separated keyword string configured on the backend into a flexible keyword list in the frontend template.

The entry of background keywords and the front-end acquisition

In the backend editing interface of AnQi CMS, for example, when adding or editing documents, we will fill in relevant terms in the "Document Keywords" field. According to the system prompts, multiple keywords are separated by English commas,Splitting. This design is very in line with the habits of content editing, and is convenient for backend management.

After the content is published, we can access it through the front-end template,{{archive.Keywords}}[For document detail page] or through the loop{{item.Keywords}}To obtain these keyword strings for the document list. At this point, what is obtained is a whole string of text, such as 'website operation, SEO optimization, content marketing'.

The Solution: UtilizesplitFilter

To split this keyword text into individual list items, the security CMS template engine provides a namedsplitpowerful filter. As the name suggests,splitThe filter can split a string into an array (or list) based on the specified delimiter.

Core idea:

  1. Retrieve the keyword string from the backend settings.
  2. UsesplitFilter, separated by commas and possibly spaces, to split the string into multiple independent keywords.
  3. PassforIterate over this newly generated list of keywords, displaying each keyword one by one.

Practical Exercise: Implement the list of keywords step by step

Assuming we are editing a template for an article detail page and we want to display related keyword tags at the bottom of the article.

Step 1: Obtain the keyword string

First, in your template file (for example,archive/detail.htmlIn 【en】, obtain the keyword string of the current article. For the convenience of subsequent operations, we can store it in a variable using the tag 【en】:{% set %}The tag 【en】into a variable:

{% set raw_keywords = archive.Keywords %}

Here,raw_keywordsThis will include strings similar to 'website operation, SEO optimization, content marketing'.

Step 2: UsesplitFilter splits

Next, we will usesplitFilter forraw_keywordsHandle the variable. Since users are accustomed to adding a space after a comma when entering keywords in the background, it is recommended to use,Comma followed by a space as a separator. If it is certain that the user only uses commas to separate, it can also be used alone,.

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

Through this line of code,keyword_listNow it is an array containing three independent string elements.

Step three: Traverse and display the keyword list

Hencekeyword_listwe can use the array{% for %}Loop through it, and for each keyword generate the HTML structure we want, such as displaying it as a tag with a border and background color:

{% 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 %}

In this example, we have added a simple CSS class for each keywordkeyword-item[en] for easy styling. At the same time, in order to enhance user experience and SEO, we wrap each keyword into a<a>tag and set itshrefThe property points to a search page, so that users can search for more related content after clicking.|trimThe use of filters also ensures the neat display of keywords, avoiding abnormal display due to additional spaces entered during backend entry.

Expansion of applications and techniques

  • [en] Style beautification:You can use CSS toarticle-keywordsandkeyword-itemadd styles to the class, such as background color, border, rounded corners, font size, etc., making the keyword tag more prominent and beautiful.
  • Handling empty keywords:In the above example, we through{% if raw_keywords %}and{% if keyword_list %}made two judgments to ensure that only when keywords exist, the relevant HTML is rendered, thus avoiding unnecessary empty tags on the page.
  • Limit the display quantity:If there are too many keywords, you might want to only display the first few. You can useslicea filter to extract a part of the array:
    
{% 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 %}

PasssplitThe flexible application of filters, users of Anqi CMS can easily convert the plain text keywords in the backend to elements with stronger interactivity and visual appeal on the frontend, greatly enriching the form of content display on the website and bringing positive improvements to SEO and user experience.

Common Questions (FAQ)

Q1: If my keywords are not separated by commas and spaces, but only by commas,split:", "Can they still be split correctly?

A1: If your keywords are separated by commas only,Separate, for example, “Website Operation, SEO Optimization, Content Marketing”, then usesplit:", "May not be split correctly as it expects a space after a comma. In this case, you should change the delimiter tosplit:","In order to maximize compatibility, you can further split each keyword and then use|trima filter to remove any leading or trailing spaces that the keyword itself may have.

Q2: How can I display only the first few keywords from the keyword list?

A2: You can usesliceFilter to extract a list of keywords. For example, if you want to display the first 5 keywords, you cankeyword_listapply to variables|slice:":5". The complete code might look like this:{% set limited_keywords = keyword_list|slice:":5" %}Then you can iterate overlimited_keywordsShow the first 5 keywords.

Q3: How can these split keywords be turned into clickable links that jump to the Anqi CMS built-in tag page or keyword library search page?

A3: Directly throughsplitThe keywords split from the filter are plain text. If you want them to link to the official tag page or keyword search results of Anqi CMS, it is recommended to usetagListLabel retrieval and the official tag list associated with the current article, becausetagListEach tag object returned contains properties that can be used directlyLinkFor example:

{% 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 %}

This method can ensure the validity and correctness of the link