How to automatically capitalize the first letter of an article title, or to achieve full uppercase/lowercase conversion?

In content operation, a standardized and unified title format is crucial for the brand image of the website and the user reading experience.In order to enhance the visual neatness or meet specific design styles, automatically adjusting the case of article titles is a very practical feature.AnQiCMS as a flexible content management system, provides a convenient way to help us achieve this goal without complex programming, making it easy to handle.

AnQiCMS's template engine is powerful and easy to use, it comes with a variety of filters (Filter), which are like small tools that can process and format data.The automatic conversion of article titles to uppercase, full uppercase, or full lowercase is exactly done through these filters.

Capitalize the first letter of the title automatically (Capfirst)

If you want the first letter of the article title to be automatically capitalized while the rest of the letters remain unchanged (for example, “hello world” becomes “Hello world”),capfirstThe filter is your ideal choice. It can make the title look more formal and standardized in many cases.

How to use:Suppose you pass through it in the template.{{ item.Title }}To display the article title, just in.TitleAdd after|capfirstthe filter.

Code example:

{# 假设 item.Title 的原始值为 "anqicms 让内容管理更简单" #}
<div>文章标题：{{ item.Title|capfirst }}</div>
{# 输出效果: 文章标题：Anqicms 让内容管理更简单 #}

{# 或者获取单篇文章详情时的标题 #}
{% archiveDetail articleTitle with name="Title" %}
<div>文章标题：{{ articleTitle|capfirst }}</div>
{# 输出效果（假设原始标题为 "安企cms：网站运营新选择"）：文章标题：安企cms：网站运营新选择 #}
{# 注意：capfirst 仅对英文字母有效，中文字符不会被转换。#}

Capitalize the title (Uppercase)

Sometimes, to emphasize a title or meet specific design requirements, you may need to convert all the letters of the article title to uppercase (for example, “hello world” becomes “HELLO WORLD”). At this point, you can useupperfilter.

How to use:Likewise, in displaying the article title's{{ item.Title }}Add after|upperfilter.

Code example:

{# 假设 item.Title 的原始值为 "anqicms is awesome" #}
<div>文章标题：{{ item.Title|upper }}</div>
{# 输出效果: 文章标题：ANQICMS IS AWESOME #}

Lowercase the title in full

The opposite of all uppercase, if your website design style is more relaxed, informal, or has other special requirements, you may want to convert all article titles to lowercase (for example, "Hello World" becomes "hello world").lowerThe filter can help you achieve this.

How to use:In{{ item.Title }}Add after|lowerthe filter.

Code example:

{# 假设 item.Title 的原始值为 "AnQiCMS CONTENT MANAGEMENT SYSTEM" #}
<div>文章标题：{{ item.Title|lower }}</div>
{# 输出效果: 文章标题：anqicms content management system #}

Additional hint: Capitalize the first letter of each word in the title (Title case)

Except for the few common conversions mentioned above, AnQiCMS also provides atitleA filter that can capitalize the first letter of each word in a title and convert the rest to lowercase (for example, “hello world” becomes “Hello World”).This is a very standard title format, commonly used for book chapters, news headlines, etc.

How to use:In{{ item.Title }}Add after|titlefilter.

Code example:

{# 假设 item.Title 的原始值为 "how to use anqicms filters" #}
<div>文章标题：{{ item.Title|title }}</div>
{# 输出效果: 文章标题：How To Use Anqicms Filters #}

Apply these formatting in the AnQiCMS template

These filters need to be modified in your website template file. Typically, the article title will bearchiveDetailtags (used to display the details of a single article) orarchiveListTags (used to call the article list) are called.

1. Locate the template file:The template files of AnQiCMS are usually located in the root directory of the system under./templateThe folder and named with.htmlThe end. You need to find the corresponding file responsible for displaying the article title according to the actual template structure of the website (for examplearchive/detail.htmlfor the article detail page,archive/list.htmlor the homepageindex/index.htmlfor the article list).
2. Find the title output position:Find similar in these template files:{{ archive.Title }}or{{ item.Title }}This is where the article title is output.
3. Add a filter:InTitleAdd the corresponding filter after the variable, such as{{ item.Title|capfirst }}.

It is noteworthy that these filters only change the display effect of the title on the front-end page, they will not modify the original article title data stored in the database.This means you can flexibly use different formatting methods on different pages or locations without worrying about data consistency issues.

By flexibly using these built-in filters, you can easily achieve the standardization and beautification of article titles, thereby enhancing the overall professionalism and user experience of the website.Choose the formatting style that best suits your website's style and content needs, making your content more outstanding.

Frequently Asked Questions (FAQ)

Ask: Does this title formatting affect the SEO effect of the article?Answer: Generally speaking, capitalizing article titles in the template layer will not have a negative impact on SEO. Search engines primarily focus on the page<title>The text of the title (H1, H2, etc.) in the label and content.If the content of these tags is accurate and relevant, search engines can usually understand and index them correctly.These filters only change the display style and do not change the semantic content of the title.

Ask: If I want to format the article titles of specific categories or models, how should I operate?Answer: You can use conditional judgment in the template (iftag) combined withcategoryIdormoduleIdTo implement. For example, inarchiveListorarchiveDetailAfter getting the article data through the tag, proceed toif item.CategoryId == 10orif item.ModuleId == 2Such conditions are used to determine whether to apply a specific filter. This can customize the title display format for different content types.

Ask: Besides the title, where can these filters be applied?Answer: These string processing filters can be applied to any text type variable.For example, you can apply them to article descriptions (Description), category names (Category Title), tag names (Tag Title), or any custom text field.Any text output in the template can be converted to uppercase or lowercase as needed to achieve a unified display style.