In website operation, we often encounter such needs: In order to make the page layout beautiful, present information concisely, 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.

AnQi CMS adopts a template engine syntax similar to Django, one of its core advantages lies in the powerful "tags (tags)" and "filters (filters)" mechanism.Tags are used to retrieve data from the database or implement logic control, while 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 title truncation in this 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 add an ellipsis, we mainly use the built-in Anqi CMS template.truncatecharsA filter that truncates strings to a specified character length and automatically adds an ellipsis at the end of the truncated string if the original string exceeds this length....)

truncatecharsThe basic usage format of the filter is:{{ 变量名|truncatechars:N }}. Here,变量名It is the title of the article you get from the AnQi CMS backend, andNwhich represents the number of characters you want to截取 from the title.NIt should be noted that,NThe value will include automatically added ellipses.

How to apply: actual operation steps

In Anqi CMS templates, whether it is the article list page, home recommendation position, or other places that need to display article titles, as long as you can get the article title variable, you can apply ittruncatecharsfilter.

Apply title truncation on the article list page

On the article list page, we usually usearchiveListTags to cyclically display article data. Within the loop, the title of each article is usually accessed through{{ item.Title }}Get it. Suppose 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 block,{{item.Title|truncatechars:30}}This line completes the title truncation work. Ifitem.TitleThe actual length exceeds 30 characters, for example,

Apply title truncation in other scenarios

In any corner of the website, as long as you pass through, except for the article listarchiveDetailtags,categoryDetailLabels or other ways to obtain the title of the article (or any other string that needs to be truncated), can be used flexiblytruncatecharsFilter. For example, if you need to display a short title summary on the article detail page, you can use it as well:

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

It should be noted 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 operation of truncation 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 a cut may destroy the HTML structure, causing the page to display abnormally. Anqi CMS also provides a special filter for this:

  • truncatechars_html:N: For strings containing HTML tags,截取 according to character count, while preserving the integrity of the HTML tags to prevent structural damage.
  • truncatewords_html:N: Similarly applicable to strings containing HTML tags, but it is truncated 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 safer guarantees when processing rich text fields such as article descriptions.

Summary

The template filter of Anqi CMS provides great convenience for website operators. Through simpletruncatecharsFilter, we can easily implement the fixed-length truncation of article titles and automatically add ellipses, which not only helps to maintain the neat layout of the page but also makes the presentation of content more in line with user reading habits.Flexibly utilizing these powerful built-in functions will elevate the content management and display of your website to a new level.

Frequently Asked Questions (FAQ)

  1. Question:truncatecharsCan the ellipsis generated by the filter be customized in style or content?Answer:truncatecharsThe ellipsis within the filter is fixed to the English "…" symbol and cannot be customized directly via parameters. If your design requires a different ellipsis style or text, you may need to first obtain the full title, then use conditional judgment and string concatenation in the process (for example, usingsliceThe filter extracts a part and then manually concatenates a custom ellipsis to achieve more complex custom effects.

  2. Question: When truncating Chinese string,truncatecharsIs it calculated by bytes or by the actual number of characters (Chinese characters)?Answer: In the Anqi CMS template,truncatecharsThe filter calculates the actual number of Chinese characters when cutting a Chinese string. For example,{{ "你好世界"|truncatechars:2 }}It will display as "Hello…", rather than being truncated by bytes, which can cause garbled characters. This ensures the accuracy and display effect of truncating mixed Chinese and English content.

  3. Ask: 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 accidentally 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 extracting, ensuring that the page structure is not affected.