In website operation, we often encounter such needs: in order to make the page layout beautiful, present information in a concise manner, or improve search engine friendliness, it is necessary to truncate article titles and add an ellipsis at the end when the title is too long.AnQiCMS (AnQiCMS) flexible template system and rich built-in filters make this operation very simple and efficient.

The AnQi CMS uses a template engine syntax similar to Django, one of its core advantages being the powerful "tags" and "filters" mechanism.Tags are used to retrieve data from a database or implement logical control, and filters allow us to perform secondary processing on these data, such as formatting dates, truncating strings, etc.Understand and make good use of these tools, and you can easily meet various content display needs.For the title truncation scenario, Anqi CMS provides a very convenient filter that allows us to accurately control the display length of the title.

Core function implementation:truncatecharsFilter

To implement the truncation of article titles and the addition of ellipses, we mainly use the built-in templates of Anqi CMS.truncatecharsFilter. The function of this filter is to truncate strings according to the specified character count, and if the original string's length exceeds this number, it will automatically add an ellipsis at the end of the truncated string....).

truncatecharsThe basic usage format of the filter is:{{ 变量名|truncatechars:N }}Here,变量名就是您从安企CMS后台获取到的文章标题，而N则代表您希望截取标题的前N个字符。需要注意的是，N的值会包含自动添加的省略号在内。

How to Apply: Actual Operation Steps

In the template of AnQi CMS, whether it is the article list page, the home page recommendation position, or any other place that needs to display article titles, as long as you can obtain the variable of the article title, you can apply ittruncatecharsFilter.

Apply title truncation on the article list page

We usually use in the article list page,archiveListTags are used to cyclically display article data. In the loop body, the title of each article is usually{{ item.Title }}Get it. Assuming we want to truncate the article title to the first 30 characters and add an ellipsis at the end, we can write the template code like this:

{% archiveList archives with type="page" limit="10" %}
    {% for item in archives %}
    <li>
        <a href="{{item.Link}}">
            {# 截取文章标题的前30个字符，并添加省略号 #}
            <h5>{{item.Title|truncatechars:30}}</h5>
            <div>{{item.Description|truncatechars:80}}</div> {# 描述同样可以截取 #}
            <div>
                <span>{% categoryDetail with name="Title" id=item.CategoryId %}</span>
                <span>{{stampToDate(item.CreatedTime, "2006-01-02")}}</span>
                <span>{{item.Views}} 阅读</span>
            </div>
        </a>
    </li>
    {% empty %}
    <li>
        当前列表没有任何内容。
    </li>
    {% endfor %}
{% endarchiveList %}

In this code,{{item.Title|truncatechars:30}}This line completes the title truncation task. Ifitem.TitleThe actual length exceeds 30 characters, for example, “AnQi CMS: A Deep Analysis of an Efficient Enterprise-Level Content Management System”, it may be displayed as “AnQi CMS: A Deep Analysis of an Efficient Enterprise-Level Content…”.

In other scenarios, apply title truncation

In any corner of the website, as long as you go througharchiveDetailtags,categoryDetailTags or other methods to obtain the article title (or other strings that need to be extracted) can be used flexiblytruncatecharsFilter. For example, if you need to display a brief title summary on the article detail page, you can also use:

{# 获取当前文章的完整标题 #}
{% archiveDetail currentArchiveTitle with name="Title" %}
{# 显示截取后的标题摘要 #}
<p>摘要：{{ currentArchiveTitle|truncatechars:20 }}</p>

It is worth noting that on the article detail page, the full title is usually displayed, but if you have specific design requirements, such as displaying the title of "related articles" in the sidebar, the cut operation is very useful.

Advanced Consideration: Handling Content with HTML Tags

In some cases, the title (or summary) of the article may contain HTML tags. If used directlytruncatecharsPerforming the cut may destroy the HTML structure, resulting in abnormal display of the page. The Safe CMS also provides a special filter for this:

  • truncatechars_html:N: For strings containing HTML tags, the string is截取by character count while retaining the integrity of HTML tags to prevent structural damage.
  • truncatewords_html:N: Similarly applicable to strings containing HTML tags, but it truncates by word count, suitable for English content.

Although the topic is about title truncation, the title is usually plain text, but understanding these filters for HTML content can provide more convenience and a safer guarantee when handling rich text fields such as article descriptions.

Summary

The template filters of Anqi CMS provide great convenience for website operators. Through simpletruncatecharsFilter, we can easily achieve the fixed-length truncation of article titles and automatically add ellipses, which not only helps to maintain the tidy layout of the page but also makes the presentation of content more in line with user reading habits.Efficiently utilize these powerful built-in features will enhance your website content management and presentation to a higher level.

Common Questions (FAQ)

  1. Q:truncatecharsCan the ellipsis generated by the filter be customized in style or content?Answer:truncatecharsThe ellipsis used in the filter is fixed as the English “…” symbol and cannot be customized directly through parameters. If your design requires a different ellipsis style or text, you may need to first obtain the complete title, then use conditional judgment and string concatenation methods (such as usingsliceFilter a portion and then manually concatenate a custom ellipsis to achieve more complex custom effects.

  2. Q: When truncating Chinese character strings,truncatecharsIs it calculated by bytes or by the actual number of characters (Chinese characters)?Answer: In the template of Anqi CMS,truncatecharsThe filter calculates the number of actual characters (Chinese characters) when truncating Chinese strings. For example,{{ "你好世界"|truncatechars:2 }}This will display as “Hello…”, instead of being truncated by bytes, causing garbled characters. This ensures the accuracy and display effect when truncating mixed Chinese and English content.

  3. 问：If my article title contains some HTML tags,truncatecharswill it break these tags?Answer:truncatecharsThe filter is designed for extracting plain text. If the title variable inadvertently contains HTML tags, using it directly may cause the tags to be truncated, thereby breaking the HTML structure. To safely extract strings containing HTML tags, it is recommended to usetruncatechars_html:NFilter. It will intelligently close HTML tags while cutting to ensure the page structure is not affected.