How to use `upper`, `lower`, `capfirst`, and `title` filters to unify the English title case format of the CMS frontend page?

In website operation, the professionalism and consistency of content display are crucial for improving user experience and brand image.Especially when dealing with English titles, consistent capitalization not only makes the page look neater but also indirectly affects the readability of the content.AnQiCMS (AnQiCMS) leverages the powerful features of the Django template engine to provide several very practical filters that can help us easily implement the case formatting of English titles on the front-end page.

These filters includeupper/lower/capfirstandtitleThey allow us to flexibly control the display style of content on the page without modifying the original data. Below, we will learn about their functions and application scenarios one by one.

Learn about AnQiCMS template filters

The AnQi CMS template system supports Django template engine syntax, which means we can make full use of its rich filter (filter) functions.The filter is like a small data processing tool that takes a variable as input, then processes this variable according to specific rules, and finally outputs the processed result.{{ 变量名|过滤器名称:参数 }}Parameters are usually not required for case conversion filters.

upperFilter: All letters uppercase

upperThe filter's role is to convert all the letters in a string to uppercase.

Application scenarios:When you want to highlight a title or phrase in uppercase, for example:

• to emphasize some important information.
• Display the company's brand name or abbreviation.
• Make a specific item stand out in the navigation menu.

Example of usage:Assuming your article title (archive.TitleIt is "welcome to anqicms", appliedupperAfter the filter, it will display as "WELCOME TO ANQICMS".

{# 在文章详情页显示全大写标题 #}
<h1>{{ archive.Title|upper }}</h1>

{# 在文章列表页显示全大写分类名称 #}
{% categoryList categories with moduleId="1" parentId="0" %}
    {% for item in categories %}
        <p>{{ item.Title|upper }}</p>
    {% endfor %}
{% endcategoryList %}

lowerFilter: All letters lowercase

lowerThe filter can convert all English letters in a string to lowercase.

Application scenarios:When you need to convert text to lowercase to maintain a soft visual appearance or for internal processing, for example:

• In some designs, it is desired that the title not be too prominent.
• Before generating URLs or performing keyword matching, unify the text format.

Example of usage:If your product name (product.Nameis the "AnQiCMS Content Management System", an applicationlowerAfter the filter, it will display as “anqicms content management system”.

{# 在产品详情页显示全小写产品名称 #}
<h2>{{ product.Name|lower }}</h2>

{# 在页脚显示全小写的网站名称 #}
<p>&copy; {{ "Your Website Name"|lower }}</p>

capfirstFilter: Capitalize the first letter.

capfirstThe filter will capitalize the first letter of the entire string while keeping the rest of the string unchanged.

Application scenarios:When you need to ensure that the beginning of a sentence or phrase is always capitalized, in accordance with basic grammatical conventions, for example:

• When displaying the abstract or description of an article, make sure the first letter is capitalized.
• Process user input that has not been capitalized.

Example of usage:If your article description (archive.Descriptionis a brief introduction to anqicms.capfirstAfter the filter, it will display as “This is a brief introduction to anqicms.“.

{# 在列表页显示首字母大写的文章描述 #}
<p>{{ archive.Description|capfirst }}</p>

{# 在用户评论中，对评论内容进行首字母大写处理 #}
{% commentList comments with archiveId=archive.Id type="list" limit="6" %}
    {% for item in comments %}
        <p>{{ item.Content|capfirst }}</p>
    {% endfor %}
{% endcommentList %}

titleFilter: Capitalize the first letter of each word

titleThe filter will capitalize the first letter of each word in a string and convert the rest to lowercase. This is one of the most commonly used filters for processing title format.

Application scenarios:When you want the title to be displayed in title case, that is, with the first letter of each major word capitalized, for example:

• The title of articles, products, pages, and other content.
• Navigation menus or category names.

Example of usage:If the title of your articlearchive.Titleis "how to use anqicms filters effectively", applytitleAfter the filter, it will display as “How To Use Anqicms Filters Effectively”.

{# 在博客列表页显示标题化格式的文章标题 #}
<h2><a href="{{ item.Link }}">{{ item.Title|title }}</a></h2>

{# 在面包屑导航中确保每个层级的名称都符合标题化格式 #}
{% breadcrumb crumbs %}
    {% for item in crumbs %}
        <li><a href="{{item.Link}}">{{ item.Name|title }}</a></li>
    {% endfor %}
{% endbreadcrumb %}

Apply in practice: unify the front-end title display format

In the development of an actual Anqi CMS template, you can flexibly select these filters according to the page layout and content type. For example, you may want the titles of all articles on the website to be in the format of 'capitalize the first letter of each word', so that you only need to use it uniformly in the place where the article title is displayed.|titlefilter.

{# 示例：在一个文章列表模板中统一标题格式 #}
{% archiveList articles with type="page" limit="10" %}
    {% for article in articles %}
        <div class="article-item">
            {# 确保文章标题以每个单词首字母大写的形式显示 #}
            <h3><a href="{{ article.Link }}">{{ article.Title|title }}</a></h3>
            <p>{{ article.Description|capfirst }}</p> {# 描述首字母大写 #}
            <small>发布于: {{ stampToDate(article.CreatedTime, "2006-01-02") }}</small>
            <span class="read-more"><a href="{{ article.Link }}">READ MORE</a></span> {# 按钮文字全大写 #}
        </div>
    {% empty %}
        <p>目前没有文章。</p>
    {% endfor %}
{% endarchiveList %}

In this way, even if the content entered in the background is inconsistent in capitalization, the front-end page can maintain a unified and professional display effect, greatly enhancing the visual quality of the website.

Important reminder

• Only affects display, does not change the source data:These filters only take effect when the content is rendered on the front-end page, they will not modify the original title content stored in the AnQi CMS database.This means you can format the same content with different cases according to different templates or page requirements.
• Mainly for English characters:Although these filters do not report errors for Chinese characters, their original intention and main function are to handle the case of English characters.Applying these filters to Chinese characters usually does not produce the expected case conversion effect.
• Can be used in chain:Multiple filters can be combined, for example:{{ variable|lower|capfirst }}Will first convert the variable to lowercase, then capitalize the first letter. Please combine according to your specific needs.

Summary

Provided by AnQi CMSupper/lower/capfirstandtitleThe filter is a tool to manage the English title case format of the front-end page.They are simple to use, can effectively enhance the professionalism and consistency of website content, and provide a better reading experience for visitors.Reasonably using these filters will make your website content management more refined.

Frequently Asked Questions (FAQ)

1. Will these filters modify the original title entered in the AnQi CMS backend content management?won't.These filters only process the display format when the content is rendered on the front-end page, they will not change the original title content stored in the AnQi CMS database.Therefore, you can safely use them in the template without worrying that the data will be permanently modified.

2.capfirstandtitleWhat are the differences between the filters? How should I choose? capfirstOnly willThe first letter of the entire stringConvert to uppercase while keeping the other letters in the string unchanged. For example, "hello world" aftercapfirstThe processing is "Hello world".titleThe filter will capitalize the first letter of each word in the **string.