In the Auto CMS, content management is not limited to the backend's add, delete, modify, and query operations, but also manifests in the flexibility and variety of front-end display.Facing common single-page websites (such as "About Us", "Contact Us", etc.), sometimes we want them to display specific identifiers when listed or navigated, such as "[Company Announcement]" or " - Official Information", to enhance brand recognition or distinguish content types.If each backend title is modified individually, it is not only inefficient but also lacks unity and maintainability.Now, using AnqiCMS's powerful template engine feature, combined with clever filters, this requirement can be easily achieved.
Background: Understanding the Importance of Single Page and Title
AnqiCMS providespageListLabels for conveniently displaying each individual page created on the website. Each page has basic attributes such as title, link, and content. By default, using{{ item.Title }}English translation: It can output the original title of a single page.However, in actual operation, the 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 that all legal statement pages are prefixed with “[Legal Statement]”, or that all recruitment pages are suffixed with “-Position List”.
Core Tools:addThe magic of filters
AnqiCMS's template system takes inspiration from Django-style tags and filters, providing exceptional flexibility. Among the many filters, addThe filter is a seemingly simple but powerful tool, which can not only be used for arithmetic operations on numbers, but also be competent for string concatenation tasks. Its basic usage is{{ obj|add:obj2 }}, it willobjandobj2Perform connection (if it is a string) or addition (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 capability.
实战演练：动态添加前缀与后缀
让我们通过几个具体的例子，看看如何将addapply thepageList中的单页面标题上。
首先，一个典型的pageList循环大致是这样的：
{% 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 unified 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,"【最新发布】"is a string literal, through the pipe symbol|pass it toadda filter, and withitem.Titleas the second argument.addThe filter will concatenate these two strings to form effects like "About Us"【最新发布】 ".
2. Add a unified suffix
Similarly, if you want to add a unified suffix to the title, such as “ - Official Information”, justaddThe position and parameter order of the filter need to 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 parameter.addThen concatenate the string literal with 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.addFilter supports chained calls, making operations very intuitive:
{% pageList pages %}
{% for item in pages %}
<li>
<a href="{{item.Link}}">{{ "【公司】"|add:item.Title|add:" (必读)" }}</a>
</li>
{% endfor %}
{% endpageList %}
Through two timesaddThe chain call of filters, the single page title will be displayed as “[Company] About Us (Required)” in this format.
4. Dynamically add prefix or suffix based on conditions
The more flexible scenarios are, you may need to decide whether to add a prefix or suffix, or add different text based on certain specific attributes of a single page. At this time, the AnqiCMS template'sifLogic 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 combined:if/elif/elseandcontainFilter, implementing finer control: if the single page ID is 1, add the prefix “”; if the title contains the words “Recruitment”, add the suffix “- Latest Positions”; otherwise, display the original title.
Attention Points and **Practice
In the applicationaddThe filter dynamically modifies the title, and there are several aspects that we need to pay attention to:
- Space handling:As previously mentioned, be sure to check if the prefix or suffix string you add contains the necessary spaces to ensure a natural and smooth display effect.
- Front-end display:This modification method only affects the display effect of the front-end page and does not affect 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 the flexibility of operations.
- SEO considerations:Although this is mainly for frontend display, search engines will also see these modified titles when crawling and rendering pages.Therefore, ensure that the content of the prefix or suffix is concise, relevant, and assists rather than interferes with the search engine's understanding of the page's theme, and avoid keyword stuffing.
- **Readability and user experience:**