AutoCMS template tips: Gracefully truncate overly long category names and add ellipsis

In website operation, the display of category names may seem trivial, but it actually has a significant impact on user experience and page aesthetics.An elegantly designed website ensures that all its elements coexist harmoniously, especially the text in navigation and lists.When the category name is too long, it may cause layout confusion, text overflow, and even poor display effects on different devices, seriously affecting the user's reading experience.

Auto CMS provides great convenience for content management with its powerful Go language backend and flexible Django-like template engine.It allows us to fine-tune the content through simple template tags and filters.categoryListIn the loop, long classification names are truncated and ellipses are cleverly added to maintain the page's neatness and professionalism.

Understand the foundation of templates in the CMS systemcategoryListtags

Let's quickly review the basic structure of the Anqi CMS template. The Anqi CMS template syntax is similar to Django, using double curly braces{{ 变量名 }}Output variable values using curly braces and percent signs{% 标签 %}Execute logical operations such as loops, conditional judgments, etc.

categoryListTags are the core tools we use to display category navigation or lists on our website. When we usecategoryListTags to cyclically output category lists, they provide us with a series ofitemobjects, eachitemEach represents a category, which includes such asTitle(Category Name),Link(Category Link) and other core information. Typically, we will traverse and display categories in this way:

{% categoryList categories with moduleId="1" parentId="0" %}
    <ul>
        {% for item in categories %}
            <li>
                <a href="{{ item.Link }}">
                    {{ item.Title }}
                </a>
            </li>
        {% endfor %}
    </ul>
{% endcategoryList %}

This code can successfully list all categories, but when a certainitem.Title(i.e., the category name) is particularly long, problems arise.

Core solution: usetruncatecharsfilter to truncate

To solve the problem of long classification names, the template filter built-in to Anqi CMS comes into play, especiallytruncatecharsthis filter.

truncatecharsThe role of the filter:truncatecharsThe filter is specifically used to truncate strings to a specified length, and if the string is actually truncated, it will automatically add an ellipsis at the end....This feature is very effective for maintaining consistent text length while implying that content has been omitted.

How to use:truncatecharsThe filter accepts a numeric parameter representing the character length you wish to truncate to. For example,item.Title|truncatechars:15will attempt toitem.TitleTruncate to 15 characters. If the original string's length is less than or equal to 15, it will be output as is; if it is greater than 15, it will be truncated and appended with...Ensure the total length (including the ellipsis) does not exceed the specified value.

Let's apply this filter to ourcategoryListthe loop:

{% categoryList categories with moduleId="1" parentId="0" %}
    <ul class="category-list">
        {% for item in categories %}
            <li class="category-item">
                <a href="{{ item.Link }}" title="{{ item.Title }}">
                    {# 应用 truncatechars 过滤器截断分类名称 #}
                    {{ item.Title|truncatechars:15 }}
                </a>
            </li>
        {% endfor %}
    </ul>
{% endcategoryList %}

code parsing:

  • {{ item.Title|truncatechars:15 }}: This line is crucial.item.TitleIt is the string of category name to be processed.|The symbol is the filter pipe, it willitem.TitlePass totruncatecharsFilter.:15then tellstruncatecharsTruncate the string to a maximum of 15 characters.
  • title="{{ item.Title }}"：To enhance user experience, even if the name is truncated, we can still view the full name throughtitlethe attribute when the mouse hovers over it, which is a very friendly practice.

Through this simple modification, all overly long category names will be elegantly truncated and visually presented with a consistent length, greatly enhancing the page's tidiness and professionalism.

Advanced Consideration: Dynamic Length and HTML Content Truncation

In practice, you may also encounter some more complex requirements:

  1. Dynamic Truncation LengthIf you want the truncation length to be configurable instead of hard-coded, you can define it as a variable. For example, use it at the top of the template.{% set max_length = 20 %}and then use it in the filter.{{ item.Title|truncatechars:max_length }}.

  2. Category name contains HTML tagsIf your category name (item.Title) occasionally contains HTML tags (such as for bold or highlighting), use them directlytruncatecharsMay destroy HTML structure, causing the page to display abnormally. At this time, Anqi CMS providestruncatechars_htmlFilter. This filter intelligently parses HTML, maintains the integrity of the tag structure during truncation, and avoids page errors.

    {# 如果分类名称中可能包含HTML，则使用 truncatechars_html #}
{{ item.Title|truncatechars_html:20 }}

  3. Word truncationIn some languages (such as English), truncating by character may result in words being cut off. If you prefer to maintain the integrity of words, you can usetruncatewordsFilter. It truncates by word count and adds an ellipsis after the last complete word. Similarly, alsotruncatewords_htmlused to process strings with HTML.

    {# 按单词截断，适用于需要保持单词完整性的场景 #}
{{ item.Title|truncatewords:5 }}

Summary

Passtruncatecharsor its variants (truncatechars_html,truncatewords,truncatewords_html）等安全CMS内置的强大过滤器，我们可以轻松地管理模板中动态内容的显示长度。This is not only a small trick to enhance the beauty of the website, but also an important part to optimize user experience and ensure the effectiveness of responsive design.Remember, details determine success or failure. A tidy and organized website always leaves a better impression on users.

Common Questions and Answers (FAQ)

Q1: Why do we need to truncate the category name? Isn't it okay to display the full name?A1: Truncating the category name is mainly to enhance user experience and page aesthetics.Long names in the navigation bar, list, or widget may cause layout confusion, text overflow, and disrupt the layout balance, especially on mobile devices.titleProperty (hover tip) provides complete information, balancing aesthetics and information integrity.

Q2:truncatecharsCan the ellipsis (…) added by the filter be customized? For example, can it be changed to...[更多]?A2:truncatecharsThe ellipsis within the filter is fixed...It cannot be directly modified through filter parameters. If you need to customize the ellipsis style or content, you need to combinelengthFilters and condition judgment to implement manually. For example, first judgeitem.TitleThe actual length whether exceeds the expected, if exceeds, then manually truncate the string and concatenate the custom ellipsis. This will increase the complexity of the template, usually the default...It is enough to meet the needs.

Q3: If my category name is multilingual, how should I set the truncation length?A3: For multilingual websites, the setting of truncation length needs to be more careful.Different languages (such as Chinese, English, Japanese, etc.) have significant differences in character width and information density.For example, a Chinese character usually contains much more information than an English character.

  1. Adjust the truncation length according to the language：In multilingual templates, you can dynamically set the length parameter based on the current language environment (throughsystemtags to getLanguageinformation).truncatechars.'s length parameter.
  2. Prioritize the visual effect.：The actual display effect shall prevail, perform more tests and find a balance point that is acceptable in all target languages.
  3. Usetruncatewords：For languages such as English that are unitized by words,truncatewordsmay be more thantruncatecharsIt is more appropriate because it does not truncate words, avoiding reading obstacles.