As an experienced website operations expert, I know that even in today's user experience-centric era, details such as website navigation contain huge optimization space.AnQiCMS as an efficient and flexible content management system, its powerful template functions provide us with enough "magic" to cope with various front-end display challenges.Today, let's talk about a common yet often overlooked issue: how to elegantly truncate the display of navigation item descriptions when they are too long in the AnQiCMS template.

Optimize Navigation Experience: Smart Truncation Display Strategy in AnQiCMS Template for Long Descriptions

The website navigation is the first window through which users explore the website content.An intuitive, concise, and responsive navigation system that can significantly improve user experience and even directly affect the conversion rate of the website.DescriptionThis field is used to provide more detailed information or SEO-related keywords.These descriptions undoubtedly enrich the context of navigation, but if not handled properly when displayed on the front end, overly long description text is easy to stretch the layout, especially on mobile devices, which can lead to a chaotic interface and have the opposite effect.

AnQiCMS knows that the flexibility of content display is crucial for operation.It uses a syntax similar to Django template engine, allowing content operators and front-end developers to easily customize page layout and data presentation.When it comes to the long description truncation of navigation, the template tags and filters (Filter) provided by AnQiCMS are exactly the tools to solve this problem.

Obtaining Navigation Item Description Content

In AnQiCMS templates, we usually usenavListLabel to get navigation data. This label will return an array of navigation item objects, each containing a navigation item that includesTitle(Navigation title),Link(Navigation link) and what we are interested in.Description(Navigation description) and other fields.

For example, we might display navigation items in a template like this:

{% navList navs %}
<ul>
    {% for item in navs %}
        <li>
            <a href="{{ item.Link }}">{{ item.Title }}</a>
            <p>{{ item.Description }}</p> {# 这里的描述可能过长 #}
            {%- if item.NavList %}
            <dl>
                {%- for inner in item.NavList %}
                    <dd><a href="{{ inner.Link }}">{{inner.Title}}</a></dd>
                {% endfor %}
            </dl>
            {% endif %}
        </li>
    {% endfor %}
</ul>
{% endnavList %}

As you can see,{{ item.Description }}The navigation description is output directly. If this description text is too long, it will directly affect<li>The layout of the element, even destroying the overall aesthetics. At this point, it is necessary to introduce truncation strategies.

AnQiCMS' 'Content Scissors': Practical Truncation Filter

AnQiCMS template engine built-in a variety of powerful filters, among which several are specifically used for string truncation, which is the key to solving the problem of long navigation descriptions:truncatechars/truncatechars_html/truncatewordsandtruncatewords_html.

  1. truncatecharsEnglish character precise truncationThis filter is very suitable for truncating plain text content. It will truncate according to the number of characters you specify and add an ellipsis at the end....）。For example, if you want the navigation description to display a maximum of 50 characters:

    <p>{{ item.Description|truncatechars:50 }}</p>

    It will count 50 characters from the beginning (including spaces and punctuation), then truncate directly. It should be noted that ifitem.Descriptionit contains HTML tags,truncatecharsIt will truncate directly, which may cause unclosed HTML tags and thus destroy the page structure.

  2. truncatechars_html: HTML-friendly truncationThis is a strongly recommended filter for processing description content containing HTML tags.It can not only truncate characters to a specified length, but more importantly, it can intelligently handle HTML tags to ensure that the truncated HTML structure is still complete and valid.This means that even if your navigation description has been edited in the background rich text editor, including bold, links, and other formats, this filter can ensure that there will be no style issues or unclosed tags after truncation.

    <p>{{ item.Description|truncatechars_html:80|safe }}</p>

    Here I specify a length of 80 characters and add extra|safeFilter.|safeis an important filter in the Django template engine, which tells the template engine that this content is 'safe' HTML code and does not need to be automatically escaped. Sincetruncatechars_htmlProcessed content may still be HTML, plus|safeCan ensure that the browser correctly parses it, rather than displaying the HTML code as is.

  3. truncatewordsandtruncatewords_html: Truncate by wordThese two filters are similar to the ones mentioned above.truncatecharsandtruncatechars_htmlSimilar, but they are truncated based on 'words' rather than 'characters'.This provides a more natural reading experience for English or other languages separated by spaces, avoiding words being harshly cut in the middle.

    • truncatewords:10It will truncate to the 10th word.
    • truncatewords_html:15It will truncate to the 15th word while maintaining the HTML structure.

    For continuous writing languages like Chinese, the concept of a word is not as clear as in English, so it is usuallytruncatecharsortruncatechars_htmlmore applicable.

Integration and Practice: Apply truncation to navigation

Overall, the most universally applicable and secure option is to usetruncatechars_htmlCombine|safeFilter. Let's apply this strategy to the navigation code mentioned earlier:

{% navList navs %}
<ul>
    {%- for item in navs %}
        <li class="{% if item.IsCurrent %}active{% endif %}">
            <a href="{{ item.Link }}">{{ item.Title }}</a>
            {%- if item.Description %} {# 仅当有描述时才显示 #}
            <p class="nav-description">{{ item.Description|truncatechars_html:80|safe }}</p>
            {%- endif %}
            {%- if item.NavList %}
            <dl>
                {%- for inner in item.NavList %}
                    <dd class="{% if inner.IsCurrent %}active{% endif %}">
                        <a href="{{ inner.Link }}">{{inner.Title}}</a>
                    </dd>
                {% endfor %}
            </dl>
            {% endif %}
        </li>
    {% endfor %}
</ul>
{% endnavList %}

Through this optimized code, each navigation item's description will be intelligently truncated to within 80 characters, and the structure of any HTML tags within the description will also be preserved.This way, regardless of how long the original description is, the front-end can maintain a clean and consistent layout.

Beyond truncation: deeper thoughts on content operation

Although template truncation can solve the urgent problem, as a senior operator, we should not stop here. In the long run, content planning and management are also important:

  • Source controlIn AnQiCMS backend navigation description editing, it should be controlled as much as possible according to the actual requirements of the front-end layout.Some descriptions are more suitable for the detail page rather than navigation hints.
  • Interaction optimization：If the truncated description is not sufficient to convey complete information, consider combining front-end technologies (such as CSS'stext-overflow: ellipsiswithhoverDisplay the full content, or use JavaScript to implement click to expand/collapse) to enhance the user experience.
  • Responsive Design：Different screen sizes may have different ideal lengths for navigation descriptions. AnQiCMS templates support adaptive, code adaptation, PC+