How to truncate a string and add an ellipsis (...) to limit the display length in AnQiCMS template?

In AnQiCMS template development, we often need to refine the content displayed on the website, such as article titles, summaries, or abstracts of a text.If content is too long, it not only affects the beauty of the page, but may also reduce the reading experience of users.AnQiCMS's powerful template engine provides a simple and efficient way to solve this problem, allowing us to easily extract strings and automatically add ellipses (…), thereby elegantly limiting the display length of content.

AnQiCMS's template system adopts a syntax similar to the Django template engine, which is flexible and easy to use.When handling string slicing, the built-in 'filter' function is mainly relied upon.These filters are like little tools that can process the content of variables and then output the processed results.

Smartly using AnQiCMS string truncation filter

AnQiCMS provides us with four main and very practical string truncation filters, each catering to different scenarios:

1. truncatechars: Truncate by character count (ignoring the integrity of words)This filter will truncate the string according to the number of characters you specify.It should also take into account the ellipsis (...) that is automatically added.If the cut-off position is exactly in the middle of a word, it will also be cut off directly.Usage: {{ 变量 | truncatechars:长度 }} Example:Assumearchive.TitleThe content is “AnQiCMS is a powerful enterprise-level content management system”.{{ archive.Title|truncatechars:15 }} output: AnQiCMS是一个功...You can see that the word "function" has been cut off.

2. truncatewords: Cut by word count (keep the integrity of the word)withtruncatecharsdifferent,truncatewordsWill try to maintain the integrity of the words.It will truncate the number of words you specify and add an ellipsis at the end.This filter works very effectively when processing English content because it recognizes spaces between words.truncatecharsSimilar.Usage: {{ 变量 | truncatewords:单词数量 }} Example:Assumearchive.DescriptionThe content is 'AnQiCMS is a powerful enterprise content management system developed using Go language.'{{ archive.Description|truncatewords:8 }} output: AnQiCMS is a powerful enterprise content management system...

3. truncatechars_html: Safely truncate HTML content by character countIf the content to be truncated may contain HTML tags, use it directlytruncatecharsIt could cause the label to be truncated, thereby destroying the HTML structure of the page, causing a display mess.truncatechars_htmlThe filter can solve this problem well. It will intelligently close unclosed HTML tags during extraction, ensuring that the extracted content is still valid HTML.Usage: {{ 变量 | truncatechars_html:长度 | safe }} Important reminder:Since this filter processes HTML content, it must be added when outputting|safeA filter to inform the template engine that the content is safe, does not require escaping, and thus the HTML tags can be rendered correctly.

4. truncatewords_html: Safely truncate HTML content by word count.withtruncatechars_htmlsimilar,truncatewords_htmlUsed to truncate HTML content while maintaining the integrity of the HTML structure. Similarly, it also needs to be配合 in the output|safefilter usage.Usage: {{ 变量 | truncatewords_html:单词数量 | safe }}

Example in actual application

Now, let's demonstrate how to apply these filters to AnQiCMS templates in a real scenario, for example, displaying article titles and summaries on a document list page:

We need to display multiple articles in a loop, and the title and summary of each article need to be limited in length.

{# 假设我们正在循环一个名为 archives 的文档列表 #}
<ul class="article-list">
    {% for item in archives %}
    <li class="article-item">
        <h3 class="article-title">
            <a href="{{ item.Link }}">
                {# 截取标题，限制为30个字符，并自动添加省略号 #}
                {{ item.Title|truncatechars:30 }}
            </a>
        </h3>
        <div class="article-summary">
            {# 截取简介（假设可能包含少量HTML），限制为100个字符，并安全地处理HTML #}
            {{ item.Description|truncatechars_html:100|safe }}
        </div>
        <a href="{{ item.Link }}" class="read-more">阅读更多</a>
    </li>
    {% empty %}
    <li class="no-content">暂无相关文章。</li>
    {% endfor %}
</ul>

In this example, we usedtruncatecharsMake sure the title is not too long and that the synopsis has been usedtruncatechars_htmland|safeTo avoid HTML tags from being destroyed. This way, no matter how long or complex the original content is, the page can maintain a neat and beautiful appearance.

By flexibly using these string truncation filters provided by AnQiCMS, we can easily control the length of page content, greatly enhancing the visual experience and professionalism of content presentation.

Frequently Asked Questions (FAQ)

1. Ask: After truncation, do I want to display an ellipsis, but only want pure truncation? Can it be implemented?Answer: AnQiCMS built-intruncatecharsandtruncatewordsThe series filter is designed to automatically add ellipses. If you really do not need ellipses, you can consider usingsliceThe filter performs pure string truncation. For example:{{ 变量|slice:":30" }}It will truncate the first 30 characters without an ellipsis. But this requires you to judge the original string length yourself, and add an ellipsis manually if needed.

2. Question: When handling Chinese content,truncatewordsThe filter effect is not noticeable, what are some alternatives?Answer:truncatewordsThe filter mainly identifies spaces between English words to extract. Since Chinese does not have a natural word separator, when used directly on pure Chinese content, its performance will be different andtruncatecharsVery similar, both are cut by character number. Therefore, it is usually recommended to use it directly when dealing with Chinese content.truncatecharsortruncatechars_htmlTo cut by character number, which can better control the display length.

3. Ask: Why do we need to extract HTML content besidestruncatechars_htmlortruncatewords_html, we also need to add|safeFilter?Answer: AnQiCMS template engine, for security reasons, defaults to escaping all output content to prevent XSS attacks. This means that like<p>/<a>Such HTML tags will be escaped into<p>/<a>Thus, they are displayed as plain text rather than actual HTML structure. When you use_htmlThe filter in the series captures the content containing HTML, and if you want these HTML tags to be correctly parsed and rendered by the browser, you need to explicitly add|safeFilter, tell the template engine: "This content has been processed, it is safe, please do not escape, and output HTML directly."