As an experienced website operations expert, I know that in today's user experience-centric era, even details like 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 meet various front-end display challenges.Today, let's talk about a common yet often overlooked issue: how can we elegantly truncate the display of navigation item descriptions in the AnQiCMS template.

Optimize navigation experience: Smart truncation display strategy in AnQiCMS template

The website navigation is the first window for users to explore the website content.A clear, concise, and responsive navigation system that can significantly improve user experience and even directly affect the conversion rate of the website.In the AnQiCMS backend, we can add a "navigation description" for navigation items (DescriptionThis field is used to provide more detailed information or SEO-related keywords.These descriptions undoubtedly enrich the context of navigation, but when displayed on the front end, if handled improperly, overly long description text can easily stretch the layout, especially on mobile devices, leading to a chaotic interface and the opposite effect.

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

Obtaining navigation item description content

In the AnQiCMS template, we usually usenavListTag to retrieve navigation data. This tag will return an array object of navigation items, each containingTitle(Navigation title),Link(navigation link) and the ones we are interested inDescription(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 element's layout, even destroying the overall aesthetics. At this point, it is necessary to introduce a truncation strategy.

AnQiCMS's 'Content Scissors': Practical Truncation Filter

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

  1. truncatecharsCharacter 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 start counting from the beginning for 50 characters (including spaces and punctuation), and then truncate directly. It should be noted that ifitem.Descriptionit contains HTML tags,truncatecharsIt will be truncated directly, which may cause unclosed HTML tags and thus destroy the page structure.

  2. truncatechars_html: HTML-friendly truncationThis is highly recommended for processing descriptions containing HTML tags.It not only truncates characters to a specified length, but more importantly, it can intelligently handle HTML tags to ensure that the truncated HTML structure remains 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 chaos or unclosed tags after truncation.

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

    This specifies a length of 80 characters and adds extra|safefilter.|safeIt is 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. Becausetruncatechars_htmlThe processed content may still be HTML, plus|safeIt can ensure that the browser correctly parses it, rather than displaying the HTML code as it is.

  3. truncatewordsandtruncatewords_html: Truncate by wordThese 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 in English or other space-separated languages, avoiding the word being abruptly cut off 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 intact.

    For Chinese and other continuous writing languages, the concept of words is not as clear as in English, so in most casestruncatecharsortruncatechars_htmlit may be more appropriate.

Integration and practice: applying truncation to navigation

In general, the most universal and reliable solution is to usetruncatechars_htmlCombine|safefilter. Let's apply this strategy to the navigation code in front:

{% 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, the description content of each navigation item will be intelligently truncated to within 80 characters, and the structure of the HTML tags in the description will also be preserved intact.This way, no matter how long the original description is, the front-end can maintain a tidy and consistent layout.

Beyond truncation: deeper thoughts on content operation thinking

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 control: When editing the navigation description in the AnQiCMS backend, it should be controlled as much as possible according to the actual needs of the front-end layout.Some descriptions are more suitable for the detail page than for navigation prompts.
  • Interaction optimizationIf the truncated description is not sufficient to convey complete information, consider combining frontend techniques (such as CSS'stext-overflow: ellipsiscooperatehoverDisplay the full content or use JavaScript to implement click to expand/collapse to enhance user experience.
  • Responsive Design: The ideal length of navigation descriptions may vary depending on screen size. AnQiCMS templates support adaptive, code adaptation, PC+