In website content display, controlling the length of article titles is a common requirement, especially on list pages, recommended positions, and other scenarios. Long titles may destroy the page layout and affect user experience. AnQiCMS (AnQiCMS) provides powerful and flexible template tags and filters to help users easily implement article title controlarchive.TitlePerform length acquisition and truncation display.

Article title in AnQiCMS template

In the AnQiCMS template, when we process article data, we usually go througharchiveDetailTag to get the details of a single article, or inarchiveListLoop through the list of articles with the tag. Either way, the article title can be accessed through{{archive.Title}}or{{item.Title}}such a variable form directly.

For example, on the article detail page, we can directly get the title like this:

<div>文章标题：{{ archive.Title }}</div>

And on the article list page, by usingarchiveListLooping through each article obtained by the tag, the title can be accessed throughitem.TitleVisit:

{% archiveList archives with type="list" limit="10" %}
    {% for item in archives %}
        <h3>{{ item.Title }}</h3>
    {% endfor %}
{% endarchiveList %}

Understood how to access the title variable, we can then use the built-in filters of Anqi CMS to further process it.

Get the character length of the article title:lengthFilter

Sometimes, we need not only to truncate the title, but also need to make some logical judgments based on the actual length of the title.For example, when the title is too long, it will display the truncated content, otherwise, it will display the full title. At this time,lengthThe filter comes into play.

lengthThe filter can return the number of characters in a string. It is worth mentioning that Anqi CMS handles Chinese characters very well, treating one Chinese character as one character rather than multiple bytes.

The usage is very simple:

{# 假设我们有一个文章标题变量 `archive.Title` #}
{% set title_length = archive.Title|length %}
<div>文章标题的长度是：{{ title_length }}</div>

In practical applications, we can use the title length for conditional judgments:

{% if archive.Title|length > 30 %}
    <p>该标题超过30个字符，需要截断显示。</p>
{% else %}
    <p>标题长度适中：{{ archive.Title }}</p>
{% endif %}

BylengthFilter, we can accurately obtain the character length of the title, providing data support for subsequent display logic.

Implement content truncation display:truncatecharsandtruncatewordsFilter

After obtaining the title length, the more direct need is often to truncate it to fit the display space. Anqi CMS provides two very practical filters to achieve this function: truncatecharsandtruncatewords.

1. Truncate by character:truncatechars

truncatecharsThe filter will truncate the string according to the specified number of characters. If the length of the original string exceeds the specified character count, it will automatically add an ellipsis at the end of the truncation....），and these three ellipses are also included in the specified total character count.

For example, we want to truncate the article title to a maximum of 20 characters:

{# 原始标题: "安企CMS：高效、可定制的企业级内容管理系统，致力于提供..." #}
<div>短标题：{{ archive.Title|truncatechars:20 }}</div>
{# 假设原始标题为“安企CMS：高效、可定制的企业级内容管理系统” #}
{# 输出可能为: 安企CMS：高效、可定制... #}

This filter is very suitable for scenarios that require strict control of display width, such as the title in card layout.

2. Truncate by word:truncatewords

Compared totruncatecharsstrict character counting,truncatewordsThe filter is more concerned with the semantic integrity. It will truncate by word count, and if the number of words in the original string exceeds the specified value, an ellipsis will also be added at the end (...This way, we can avoid words being cut off in the middle, making the text look more natural.

For example, we will truncate the article title into 5 words:

{# 原始标题: "安企CMS：高效、可定制的企业级内容管理系统，致力于提供..." #}
<div>自然截断标题：{{ archive.Title|truncatewords:5 }}</div>
{# 输出可能为: 安企CMS：高效、可定制的企业级... #}

This filter is more suitable in scenarios where the title content is relatively long and it is desired to maintain readability.

Application based on actual scenarios

In the actual template development, we usually combine it with the list page.archiveListTags use these filters to ensure that all article titles are displayed uniformly.

{# 假设这是一个文章列表页的模板文件 #}
{% archiveList archives with type="page" limit="10" %}
    {% for item in archives %}
        <div class="article-item">
            {# 将标题截断为最多 30 个字符显示 #}
            <h3><a href="{{ item.Link }}">{{ item.Title|truncatechars:30 }}</a></h3>
            <p>{{ item.Description|truncatechars:100 }}</p>
            <span class="meta">{{ stampToDate(item.CreatedTime, "2006-01-02") }}</span>
        </div>
    {% empty %}
        <p>暂时没有文章发布。</p>
    {% endfor %}
{% endarchiveList %}

By the above code, all article titles in the list will be uniformly truncated to 30 characters, and the parts that exceed will be automatically added with an ellipsis, thus ensuring the neatness and beauty of the list page.

Summary

The Anqi CMS template system provideslength/truncatecharsandtruncatewordsA series of powerful and intuitive filters that allow website operators and template developers to easily control the display length of article titles.By flexibly using these tools, we can create content display interfaces that are both aesthetically pleasing and user-friendly, effectively enhancing the overall quality of the website.

Frequently Asked Questions (FAQ)

1.truncatecharsandtruncatewordsWhat are the differences between filters? truncatecharsThe filter truncates by character count, including Chinese characters, with each character counting as one length, and an ellipsis is added when the specified length is reached.It is suitable for scenarios that require strict control of display width.truncatewordsThe filter is truncated by word count (separated by spaces), it adds an ellipsis after the last complete word.It is more suitable for scenarios where content truncation maintains semantic integrity and a natural reading experience.

2. What happens when my article title contains HTML tags, and it gets truncated?Of Security CMStruncatecharsandtruncatewordsThe filter defaults to treating the title content as plain text. This means that if the title contains<strong>or<em>Tags such as HTML, which are also counted in the number of characters or words, and may be damaged when truncated, causing the HTML tags to be rendered incorrectly. Therefore, it is recommended to title the articlearchive.TitleIt usually only contains plain text content, avoid using HTML tags. For rich text content containing HTML, Anqicms providestruncatechars_htmlandtruncatewords_htmlFilters that can intelligently truncate content and attempt to preserve the integrity of the HTML structure.

3. I can customize the ellipsis displayed after truncation (...) right?The built-in of AnQi CMStruncatecharsandtruncatewordsThe filter will automatically add a default ellipsis when truncating...Currently, it is not supported to directly customize the style or content of the ellipsis through parameters. If you really need to customize it, you may need to combine the use ofsliceA filter to截取 a specified length of string, then manually concatenate the custom ellipsis you want.However, this will slightly increase the complexity of the template, and in most cases, the default ellipsis can meet the needs.