How to use the `add` filter to dynamically add a uniform prefix or suffix to the single page titles in the `pageList`?

In AnQi CMS, content management is not limited to the backend operations of add, delete, modify, and query, but also reflects the flexibility and diversity of front-end display.In the face of common single-page websites (such as "About Us", "Contact Us", etc.), sometimes we hope that when they are displayed in a list or navigation, they can be unified with a specific identifier, such as If each backend title is modified individually, it is not only inefficient but also lacks uniformity and maintainability.At this moment, by utilizing the powerful template engine function of AnqiCMS and with the clever filter, this requirement can be easily achieved.

Background: Understanding the importance of single-page and titles

AnqiCMS providespageListTags, used to conveniently loop through the individual web pages created on the site. Each single page has basic attributes such as title, link, and content. By default, using{{ item.Title }}It can output the original title of a single page. However, in actual operation, a website may need to modify these titles twice to adapt to specific marketing strategies, content classification standards, or simply to make the user interface more friendly and consistent.For example, you may wish to add the prefix "[Legal Statement]" to all legal statement pages, or add the suffix "-Job List" to all recruitment pages.

Core Tool:addThe wonder of filters

The AnqiCMS template system has adopted Django-style tags and filters, providing great flexibility. Among many filters,addA filter is a seemingly simple but powerful tool that can not only be used for arithmetic operations on numbers but also be competent in string concatenation tasks. Its basic usage is{{ obj|add:obj2 }}, it will be used toobjandobj2Concatenate (if it is a string) or add (if it is a number).In the scenario of dynamically adding prefixes or suffixes to single-page titles, we are taking advantage of its excellent string concatenation ability.

Practice: Dynamically Add Prefixes and Suffixes

Let's look at a few specific examples to see how toadda filter topageListtitle on a single page.

First, a typicalpageListThe loop is roughly like this:

{% pageList pages %}
    {% for item in pages %}
        <li>
            <a href="{{item.Link}}">{{item.Title}}</a>
        </li>
    {% endfor %}
{% endpageList %}

Now, let's try to dynamically add prefixes or suffixes to these titles.

1. Add a uniform prefix.

If you want all single-page titles to have a unified prefix, such as “【Latest Release】”, you can modify the template code in this way:

{% pageList pages %}
    {% for item in pages %}
        <li>
            <a href="{{item.Link}}">{{ "【最新发布】"|add:item.Title }}</a>
        </li>
    {% endfor %}
{% endpageList %}

In this code block,"【最新发布】"is a string literal, through the pipe symbol|pass it toaddthe filter, and withitem.Titleas the second argument.addThe filter will concatenate these two strings to form effects like “【Latest Release】About Us”、“【Latest Release】Contact Information” such as this. Please note that it is usually a good habit to add a space at the end of the prefix string, for example"【最新发布】 ".

2. Add a uniform suffix

Similarly, if you want to add a uniform suffix to the title, such as “- Official Information”, just need toaddThe position and parameter order of the filter should be adjusted:

{% pageList pages %}
    {% for item in pages %}
        <li>
            <a href="{{item.Link}}">{{ item.Title|add:" - 官方信息" }}</a>
        </li>
    {% endfor %}
{% endpageList %}

here,item.TitlePassed as the first parameteraddThen concatenate the string literal after the filter" - 官方信息"Similarly, adding a space at the beginning of the suffix string can ensure better readability.

3. Add both prefix and suffix.

Of course, you can also add both prefix and suffix to the title.addThe filter supports chaining calls, making the operation very intuitive:

{% pageList pages %}
    {% for item in pages %}
        <li>
            <a href="{{item.Link}}">{{ "【公司】"|add:item.Title|add:" (必读)" }}</a>
        </li>
    {% endfor %}
{% endpageList %}

Through twiceaddChaining of filters, the single-page title will be displayed in the format “[Company] About Us (Mandatory)”.

4. Dynamically add prefixes or suffixes based on conditions.

In more flexible scenarios, you may need to decide whether to add prefixes or suffixes, or different text based on certain specific properties of a single page. At this point, the AnqiCMS template'sifLogical judgment tags can be put to use:

{% pageList pages %}
    {% for item in pages %}
        <li>
            {% if item.Id == 1 %} {# 假设Id为1的页面是"关于我们" #}
                <a href="{{item.Link}}">{{ "【重磅】"|add:item.Title }}</a>
            {% elif item.Title|contain:"招聘" %} {# 假设标题包含"招聘"字样 #}
                <a href="{{item.Link}}">{{ item.Title|add:" - 最新岗位" }}</a>
            {% else %}
                <a href="{{item.Link}}">{{ item.Title }}</a>
            {% endif %}
        </li>
    {% endfor %}
{% endpageList %}

In this example, we combinedif/elif/elseas well ascontainThe filter has implemented more precise control: if the single-page ID is 1, then add the prefix “[重磅]”; if the title contains the words “Recruitment”, then add the suffix “- Latest Positions”; otherwise, display the original title.

Cautionary notes and **practice

In useaddWhen dynamically modifying the title of the filter, there are several aspects that we should pay attention to:

• Space handling:As mentioned before, be sure to pay attention to whether the prefix or suffix string you add contains the necessary spaces to ensure the natural smoothness of the final display effect.
• Front-end display:This modification only affects the display effect of the front-end page, and does not touch the original single-page title content stored in the database.This means you can adjust the front-end display strategy at any time without causing permanent changes to the content itself, greatly enhancing operational flexibility.
• SEO consideration:Although this is mainly for front-end display, search engines will also see these decorated titles when crawling and rendering the page.Therefore, ensure that the prefix or suffix content is concise, relevant, and can assist rather than interfere with the search engine's understanding of the page topic, and avoid keyword stacking.
• **Readability and User Experience: