In website operation, we often need to format content meticulously to enhance user experience and page aesthetics.Especially when dealing with article titles, if each word's first letter can be automatically capitalized, it will undoubtedly make the title look more standardized and professional.So, as a user of AnQiCMS, can we achieve this requirement through its powerful template functions?

The good news is that the Django-style template engine built into Anqi CMS indeed provides this feature, which is what we are going to introduce todaytitleFilter. This filter is specifically designed to capitalize the first letter of each word in a string and convert the other letters to lowercase, which is very suitable for formatting article titles.

核心功能揭秘：English 的titleFilter

titleThe filter is a convenient tool in the AnQi CMS template system, its function is to traverse a string, find each word in it, and convert the first letter to uppercase and the rest to lowercase.This keeps the title visually consistent and leaves a standardized and professional impression.

Give an example, if the title of your article is “hello world in anqicms”, aftertitleFilter processed, it will become 'Hello World In Anqicms'. This is exactly the effect we want to achieve.

It is very intuitive to use it in the template, you just need to add it after the variable showing the title|title. For example, if the variable of your article title isarchive.Title, then you can write it like this in the template:

<h1>{{ archive.Title|title }}</h1>

However, there is a point that needs special attention here. titleThe filter mainly deals with English strings. If you try to apply it to Chinese titles, such as{{ "你好世界"|title }}The output will still be 'Hello, World!', and it will not change the case of Chinese characters.Therefore, this filter is more suitable for English websites or for scenarios that require formatted English titles.

How to apply in templatestitleFilter

ApplytitleThe filter is very simple, whether you are displaying the article title on the article detail page, or displaying the article summary title on the website homepage or list page, it can be easily applied.

Assuming you are editing a template for an article detail page, the article title is usuallyarchive.TitleSuch a variable to obtain. If you want this title to be displayed with each word capitalized, you can write the code like this: 

<div class="article-header">
    <h1>{{ archive.Title|title }}</h1>
</div>

Similarly, for the TDK (Title, Description, Keywords) settings at the top of the page, if you wish to<title>Label content also follows the rule of capitalizing the first letter of each word, and you can also applytdk.Titlevariable applicationtitleFilter:

<head>
    <title>{{ tdk.Title|title }}</title>
    <meta name="keywords" content="{% tdk with name="Keywords" %}">
    <meta name="description" content="{% tdk with name="Description" %}">
</head>

in this way, no matter which page the user visits, as long as the template is applied|titleFilter, all related English string titles will be automatically formatted.

Practical suggestions and precautions

  • Language suitability:[en]Again, I emphasize,titleThe filter is most suitable for English content. It will not produce any visible effect on Chinese titles. Therefore, please make sure of your content language type before use.
  • Compatibility with other filters:If your requirement is not limited to capitalizing the first letter of each word, for example, you may need to capitalize the entire title (upper), or only capitalize the first letter of each sentence (capfirst)，English CMS also provides the corresponding filters. Understanding these diverse tools can help you more flexibly meet various content formatting needs.
  • Application scope: titleThe filter can be applied to any string variable that you want to format with each word capitalized, not just article titles, but also product names, category names, etc., as long as they are primarily in English words.

Visible, the CMS of AnQititleThe filter is a very practical tool that can help us easily enhance the professionalism and reading experience of the website content.Master these little tricks, and it will make our website operation more efficient.

Common Questions (FAQ)

Q1: If I only want the first letter of the article title to be capitalized instead of the first letter of each word, which filter should I use?

A1:If you only need to capitalize the first letter of the entire title (similar to sentence case), you can usecapfirstfilter. For example:{{ archive.Title|capfirst }}.

Q2: Besides capitalizing the first letter of each word, what are some common formatting treatments I can apply to the article title?

A2:安企CMS provides various filters to handle string formatting:

  • upper：Convert all letters to uppercase. For example:{{ archive.Title|upper }}.
  • lower：Convert all letters to lowercase. For example:{{ archive.Title|lower }}.
  • truncatechars:N：Truncate the string to a specified length and end with “…”. For example:{{ archive.Description|truncatechars:100 }}.

Q3: Why did my Chinese title use|titleno change after the filter?

A3:This is becausetitleThe filter is mainly designed to process English strings. Chinese characters do not have uppercase and lowercase, so the filter is invalid for Chinese titles and will not produce any format changes.