In AnQi CMS template development, it is often encountered that article titles need to be displayed on the list page, but in order to ensure the beauty of the layout and unified layout, long titles need to be truncated and accompanied by an ellipsis.This has improved the user experience and also made the page look neater and more professional.AnQi CMS with its flexible Django template engine syntax makes it very direct and efficient to meet this requirement.
Understand the template basics of Anqi CMS
In AnQi CMS, content management and display are core functions. We usually get the article list data througharchiveListtags and then loop through the data.forLabel) show the detailed information of each article. The article title is usually stored inTitlein the field.
For example, a basic article list loop might look like this:
{% archiveList articles with type="list" limit="10" %}
{% for item in articles %}
<div class="article-card">
<h3><a href="{{ item.Link }}">{{ item.Title }}</a></h3>
<p>{{ item.Description }}</p>
</div>
{% endfor %}
{% endarchiveList %}
Here{{ item.Title }}The full title of the article will be output directly. When the title is too long, it may burst the layout and affect the overall aesthetics.
Core technique: applytruncatecharsTitle truncation filter
The Django template engine of AnQi CMS provides a series of powerful filters to process variable content, among whichtruncatecharsThe filter is the ideal tool for us to handle title truncation.
truncatecharsThe filter's function is to automatically truncate the string when its length exceeds the number of characters you specify, and add an ellipsis at the end (...It is important that the number of characters you specify isincludeincluding the total length of the ellipsis.
Its basic usage is very simple:
{{ 您的变量 | truncatechars: 期望的长度 }}
Assuming we want the title to display up to 25 characters, the rest will be indicated with an ellipsis, then we can modify the template like this:
{% archiveList articles with type="list" limit="10" %}
{% for item in articles %}
<div class="article-card">
<h3><a href="{{ item.Link }}">{{ item.Title|truncatechars:25 }}</a></h3>
<p>{{ item.Description }}</p>
</div>
{% endfor %}
{% endarchiveList %}
In this way, regardless of the length of the original title, the displayed title on the page is at most 25 characters, and if it is truncated, an ellipsis (...) is automatically added at the end, which is both aesthetic and practical.
Advanced application: Determine whether to add an ellipsis based on actual length
AlthoughtruncatecharsThe filter automatically adds an ellipsis, but sometimes we may want to display an ellipsis only when the title actually exceeds a specific length, and for titles that are not long, to keep them unchanged without any truncation. In this case, we can combineifLogical judgment andlengthTo implement a filter.
lengthA filter can get the actual character length of a string. Through it, we can first judge the length of the title and then decide whether to apply it.truncatechars.
Let's take a more complete example:
{% archiveList articles with type="list" limit="10" %}
{% for item in articles %}
<div class="article-card">
<h3>
<a href="{{ item.Link }}">
{% if item.Title|length > 30 %}
{{ item.Title|truncatechars:30 }}
{% else %}
{{ item.Title }}
{% endif %}
</a>
</h3>
<p class="article-meta">发布时间：{{ stampToDate(item.CreatedTime, "2006-01-02") }}</p>
<p class="article-summary">{{ item.Description|truncatechars:80 }}</p>
</div>
{% empty %}
<p>暂无相关文章。</p>
{% endfor %}
{% endarchiveList %}
In this example, we set a 30-character length limit for the title. Ifitem.Titleis longer than 30 characters, it will be applied.truncatechars:30Filter; otherwise, output the complete one directly.item.TitleThis ensures that truncation only occurs when necessary, and the ellipsis is only used when needed, providing a better user experience.
At the same time, you can also see that for the article abstractitem.Descriptionwe also appliedtruncatecharsa filter to maintain the high consistency of list items, avoiding long abstracts from destroying the layout.
Summary
In Anqi CMS template, it is a simple optimization measure that can significantly enhance the beauty and user experience of the page by truncating the article title and displaying an ellipsis. By flexibly using the Django template engine providedtruncatecharsandlengthFilter, we can easily implement intelligent title truncation.This is not only applicable to article titles, but also can be used for any text content that needs to control display length, such as article summaries, product descriptions, etc., making your Anqie CMS website content display more exquisite.
Frequently Asked Questions (FAQ)
1.truncatecharsCan the filter modify the style or content of the ellipsis (for example, change it to “…” instead of the default “…”)?
truncatecharsThe ellipsis content of the filter output is fixed, currently not supported to modify its specific characters or style directly. If you need to customize the ellipsis, you may need to obtain the complete title, manually judge the length, and then usesliceThe filter extracts the string and manually concatenates the custom ellipsis character.
2. If my article title contains HTML tags,truncatecharsHow will it be handled?
truncatecharsThe filter truncates based on characters and does not parse HTML tags.If the title contains HTML, it will also count the characters of the angle brackets and other HTML tags inside.truncatechars_htmlA filter that attempts to maintain the integrity of the HTML structure when truncating. However, for regular article titles, it is usually recommended to keep plain text,truncatecharsis perfectly applicable.
3. Where can I apply this truncation feature other than the article title?This truncation feature is very versatile. You can apply it to the summaries in the article list (such as in the example of theitem.Description|truncatechars:80) Product names or descriptions in the product list, long texts in the navigation menu, user comment summaries, etc. Any place where you want to limit the display length of text to maintain a tidy page and unified layout, you can use it flexibly.truncatecharsfilter.