In website content display, controlling the length of article titles is a common requirement, especially in 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 achieve article title control.archive.TitlePerform length acquisition and truncation display.
Article title in AnQiCMS template
In the template of AnQiCMS, when we process article data, we usually go througharchiveDetailLabel to get the detailed information of a single article, orarchiveListLoop through the article list in the label loop. Either way, the article title can be accessed through{{archive.Title}}or{{item.Title}}such variable form directly.
For example, on the article detail page, we can directly obtain the title like this:
<div>文章标题：{{ archive.Title }}</div>
And on the article list page,archiveListthe title of each article obtained by tag loop can be accessed byitem.TitleAccess:
{% archiveList archives with type="list" limit="10" %}
{% for item in archives %}
<h3>{{ item.Title }}</h3>
{% endfor %}
{% endarchiveList %}
After understanding how to access the title variable, we can then use the built-in filters of the Anqi CMS to further process it.
Get the character length of the article title:lengthFilter
Sometimes, we may not only need to truncate the title, but also need to make some logical judgments based on the actual length of the title.For example, the content is truncated if the title is too long, otherwise the full title is displayed.lengthThe filter comes into play.
lengthThe filter can return the number of characters in a string.It is worth mentioning that the Anqi CMS is very friendly to Chinese characters, with each Chinese character being counted as a single character instead of multiple bytes.
The method of use 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 judgment:
{% if archive.Title|length > 30 %}
<p>该标题超过30个字符，需要截断显示。</p>
{% else %}
<p>标题长度适中：{{ archive.Title }}</p>
{% endif %}
PasslengthFilter, 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 requirement is often to truncate it to fit the display space. Anqi CMS provides two very practical filters to achieve this function:truncatecharsandtruncatewords.
1. Character truncation:truncatechars
truncatecharsThe filter will truncate the string to the specified number of characters. If the length of the original string exceeds the specified number of characters, 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 titles in card layouts.
2. Truncate by word:truncatewords
Compared withtruncatecharsStrict character count,truncatewordsThe filter pays more attention to semantic integrity. It truncates based on the number of words, and if the number of words in the original string exceeds the specified value, an ellipsis will also be added at the end....This approach can avoid words being cut off in the middle, making the truncated 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 readability is desired.
Application based on actual scenarios.
In the actual template development, we usually combine it with the list page.archiveListUse these filters to ensure that all article titles are displayed in a uniform manner.
{# 假设这是一个文章列表页的模板文件 #}
{% 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 %}
Through the above code, all article titles in the list will be uniformly truncated to 30 characters, and the exceeded part will be automatically added with an ellipsis to ensure the neatness and beauty of the list page.
Summary
The template system provided by Anqi CMS offerslength/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 aesthetic and user-friendly, effectively enhancing the overall quality of the website.
Common 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 scenes that require strict control of the display width.truncatewordsThe filter is a truncation based on the number of words (separated by spaces), it adds an ellipsis after the last complete word.It is more suitable for scenarios where you want to truncate content while maintaining semantic integrity and a natural reading experience.
2. If my article title contains HTML tags, what will happen when it is truncated?Anqi CMS'struncatecharsandtruncatewordsThe filter will default to treating the title content as plain text. This means that if the title contains<strong>or<em>HTML tags, which themselves are also counted as characters or words, and may be broken during truncation, resulting in incorrect rendering. Therefore, it is recommended for article titlesarchive.Titleusually only contains plain text content, avoid using HTML tags. For rich text content containing HTML, Anqi CMS providestruncatechars_htmlandtruncatewords_htmlFilters that can intelligently truncate content and attempt to preserve the integrity of the HTML structure.
3. Can I customize the ellipsis displayed after truncation?...）Built-in in AnQi CMStruncatecharsandtruncatewordsFilter automatically adds an ellipsis when truncating...The current version does not support customizing the style or content of the ellipsis directly via parameters. If you indeed need to customize it, you may need to use a combination of methods.sliceFilter to truncate strings to a specified length and then manually concatenate the custom ellipsis you want.However, this will slightly increase the complexity of the template, and the default ellipsis is usually sufficient to meet the needs.