How to convert the first letter or the first letter of each word in an English string to uppercase in AnQiCMS?

Calendar 👁️ 68

In daily website content management, we often need to finely control the display format of English strings, such as capitalizing the first letter of an article title or making each word of a product name start with an uppercase letter to enhance the professionalism and uniformity of the content.AnQiCMS (AnQiCMS) understands the importance of these subtle details for the website's image, and therefore provides convenient and powerful string processing functions in the template design, allowing you to easily meet these formatting needs.

The Anqi CMS adopts a template engine syntax similar to Django, which means that when using variables in templates, you can use the pipe symbol|Introduce various "filters" to process the data. These filters are like small tools that can help us convert strings, format dates, perform calculations, etc.For the case of case conversion of English strings, Anqi CMS provides several very practical filters to make your content more standardized and beautiful.

to elegantly format strings:capfirstandtitleFilter

Let's take a look at two core filters that can help you easily implement the title case or all words capitalized of English strings:

  1. capfirstFilter: Sentence title caseIf you need to capitalize the first letter of an English string while keeping the rest of the string unchanged (unless it is already capitalized),capfirstThe filter is exactly your ideal choice. It is usually used at the beginning of a sentence to ensure that the first word of each sentence starts with a capital letter, in line with English writing standards.

    Usage example:Suppose you have a variable namedarticleTitleThe variable, its value is"this is a great article about anqicms".

    {{ articleTitle|capfirst }}
    

    Output Result: This is a great article about anqicms

    You can see that only the first letter 't' of the entire string has been changed to uppercase 'T'.

  2. titleFilter: Capitalize the first letter of each wordWhen your requirement is to let the string inThe initial letter of each word.When converted to uppercase,titleThe filter comes into play. This filter is particularly suitable for titles, product names, or any text that needs to be displayed in a 'titleized' format, making each main word stand out.

    Usage example:Continue from the previousarticleTitleThe variable has the value"this is a great article about anqicms".

    {{ articleTitle|title }}
    

    Output Result: This Is A Great Article About Anqicms

    withcapfirstdifferent,titleThe filter has processed each word in the string, capitalizing the first letter.

Extended application: full uppercase and full lowercase (upperandlowerFilter)

In addition to the two common needs for capitalizing the first letter of each word, Anqi CMS also provides filters to convert the entire string to uppercase or lowercase to meet more comprehensive formatting requirements.

  1. upperFilter: Convert to uppercaseIf you need to convert the entire English string to uppercase, you can useupperfilter.

    Usage example:

    {{ "welcome to anqicms"|upper }}
    

    Output Result: WELCOME TO ANQICMS

  2. lowerFilter: Convert to lowercaseOn the contrary, if you need to convert all letters to lowercase, you can uselowerfilter.

    Usage example:

    {{ "WELCOME TO ANQICMS"|lower }}
    

    Output Result: welcome to anqicms

In actual use in the template

These filters are very flexible in Anqi CMS templates.You can use them when displaying article titles, product names, tag (Tag) titles, even any English string data obtained from the background.

For example, in your article detail page template, you might display the article title and category name like this:

<h1 class="article-title">{{ archive.Title|title }}</h1>
<p class="article-category">分类:<a href="{{ archive.Category.Link }}">{{ archive.Category.Title|capfirst }}</a></p>
<span class="article-tag">标签:
    {% tagList tags with itemId=archive.Id limit="5" %}
        {% for item in tags %}
            <a href="{{ item.Link }}">{{ item.Title|title }}</a>
        {% endfor %}
    {% endtagList %}
</span>

In this example,archive.Title(Article Title) istitleprocessed by a filter to ensure that the first letter of each word is capitalized; andarchive.Category.Title(Category title) is beingcapfirstFiltered, only the first letter is capitalized. Document tagitem.Titleis also beingtitleFiltered and formatted to make the display more unified and professional.

Some usage suggestions

  • Focus on content type:Remember, these case conversion filters are mainly designed for English strings.Although they can be applied to strings containing Chinese, they usually only affect the English letters in the string, leaving the Chinese part unchanged.
  • Flexible combination application:The Anqi CMS filter supports chained calls. This means you can combine multiple filters to achieve more complex formatting requirements.For example, first convert the string to lowercase, then capitalize the first letter of each word:{{ myString|lower|title }}.
  • Consider|safeFilter:If the string you are processing may contain HTML tags and you want these tags to be parsed by the browser normally rather than as plain text, then you may need to add extra after applying the case filter|safea filter. For example:{{ archive.Content|striptags|capfirst|safe }}Of course, **the practice is usually to clean and format the content before output to avoid potential security risks.

These built-in filters of AnQi CMS greatly simplify the formatting work of front-end content, allowing website administrators and developers to focus more on the content itself and not have to worry about complex string processing logic.By a simple line of code, your website content can be presented to users in the most standardized and attractive way.


Frequently Asked Questions (FAQ)

1. Q: Do these case conversion filters work for Chinese content?A: These filters are mainly designed for English strings.When applied to a string containing Chinese characters, they will only perform case conversion on the alphabetic part of the string, and the Chinese part will remain unchanged. For example,"你好 world"|capfirstIt will output."你好 World".

2. Q: Can I apply multiple filters to the same string at the same time?A: Can. The Anqi CMS template filter supports chaining calls. You can use the pipe character.|Connect multiple filters together, each filter will operate on the result of the previous filter. For example,{{ myVariable|lower|title }}Will firstmyVariablethe value is converted to lowercase, and then

Related articles

How does the `truncatechars_html` filter safely truncate HTML content without breaking the tag structure?

In website operation, we often need to display an abstract of a large amount of content on a page, such as the article list on the homepage, a brief introduction on the product details page, or recommended content for a module.These summaries must be able to attract readers to click and maintain the neat and beautiful layout of the page.However, when the content itself contains rich HTML formatting (such as bold, italic, images, links, etc.), simply truncating the character length often leads to a headache: the HTML tag structure is destroyed, causing the page to display incorrectly and even affecting the overall style.Imagine

2025-11-08

How to truncate a long string and automatically add an ellipsis (...)?

In website operation, we often encounter situations where we need to display a piece of text, but we cannot let it be too long to avoid affecting the page layout or reading experience.Whether it is the title, abstract, or product description of an article, if the content exceeds the expected length, the usual practice is to truncate a part of it and add an ellipsis at the end to indicate that the content has not yet ended.For AnQiCMS users, achieving such an effect is not complicated, thanks to its flexible and powerful template engine, we have a variety of built-in filters (Filters) that can easily handle it

2025-11-08

What are the similarities and differences between the `stampToDate` and `date` filters in handling time formatting and their applicable scenarios?

In Anqi CMS template development, we often need to display time data in a user-friendly format.The system provides two very practical tools for handling time: the `stampToDate` function and the `date` filter.Although they can all help us format time, there are some key similarities and differences as well as applicable scenarios, understanding these can make our template development more efficient and accurate.## `stampToDate`: A timestamp handler In AnQi CMS

2025-11-08

How to format a Unix timestamp into a readable date and time string?

In website content management, the way time is presented is crucial to user experience.Although the system may prefer a unified and efficient Unix timestamp format for background data processing, for visitors, a string of random numbers is obviously not as intuitive and easy to understand as AnQi CMS knows this and provides a simple and powerful tool to solve this problem.### Unix timestamp: The 'time language' in the database Unix timestamp, in short

2025-11-08

What are the limitations of the `lower` and `upper` filters when dealing with case conversion (such as Chinese)?

In AnQiCMS template development, the `lower` and `upper` filters are commonly used tools for handling text case conversion.They are designed to help us quickly standardize the display of text, such as converting the irregular content entered by users to lowercase or uppercase to maintain consistent page style or meet certain data processing requirements.However, when using these convenient filters, we may encounter some "edge" cases that they cannot handle, especially when it comes to non-English characters, such as Chinese.### `lower` and `upper`

2025-11-08

How to ensure that single quotes, double quotes, and backslashes are correctly escaped in HTML output?

During website operation and template creation, we often need to output dynamic content to the HTML page.This is a common but often overlooked question: How to ensure that special characters such as single quotes, double quotes, and backslashes in the content do not破坏 the page structure or cause security issues when output to HTML?Don't worry, AnQiCMS provides very friendly built-in mechanisms and flexible tools in this aspect, which help us handle it easily.### AnQiCMS's default security mechanism: automatic escaping AnQiCMS has taken full consideration of content security in its design

2025-11-08

What is the use of the `addslashes` filter in JavaScript or JSON data output?

In website content management, especially when we want to insert dynamic data into JavaScript code or construct JSON formatted output, handling special characters is a non-negligible aspect.The AnQiCMS template engine provides a rich set of filters to help us elegantly handle such issues, with the `addslashes` filter being a practical tool specifically designed for this kind of scenario.The purpose of the `addslashes` filter explained

2025-11-08

How does the `yesno` filter handle boolean or null values and customize the display of 'Yes/No/Unknown'?

In AnQi CMS template development, how to display boolean (true/false) states or handle unknown (empty) values in an intuitive and concise manner is an important aspect for improving user experience and code readability.The `yesno` filter is designed for this purpose, it can simplify complex logical judgments into a single line of code, and allows you to customize the output results, such as displaying as "yes/no/unknown".### `yesno` filter: Smart converter for boolean and null values In a content management system, we often encounter situations where we need to display whether a project is enabled or a feature is turned on

2025-11-08