How to control the display length of the link text and automatically add an ellipsis when the `urlizetrunc` filter converts URLs in the AnQiCMS template to links?

In website content management, we often need to display various links on the page, whether it is the reference URL in the article or the external links submitted by users.However, these links are sometimes very long, not only affecting the aesthetics of the page, but also possibly destroying the original layout, making the page look chaotic.AnQiCMS provided a very practical template filter——urlizetruncIt can help us solve this problem elegantly, allowing the long link to remain clickable while presenting in a concise and beautiful manner.

urlizetruncThe filter is specifically designed to automatically convert URLs and email addresses in text to clickable HTML links. Like its sibling filterurlizebut similar,urlizetruncThe unique feature lies in its ability to intelligently control the display length of link text and automatically add an ellipsis at the end when it exceeds the specified length (...This means that regardless of the length of the original link, you can ensure that it occupies a preset, aesthetically pleasing length on the page without arbitrarily expanding the layout.

How to use in AnQiCMS templateurlizetruncFilter

UseurlizetruncThe filter is very intuitive, it is usually applied to text variables containing potential URLs or email addresses. Its basic usage is as follows:

{{ 文本变量 | urlizetrunc:长度 | safe }}

Let's parse this expression one by one:

• 文本变量This typically includes text content with links, such as paragraphs in the main body of an article, abstracts, custom fields of content models, or user comments, etc.urlizetruncAutomatically identify URLs and email addresses in this variable.
• urlizetrunc:长度This is the core part of the filter.长度Is an integer value that defines the maximum number of characters that can be displayed for the link text. This length includes the number of characters occupied by the automatically added ellipsis. For example, if you set长度With30So a long link (such ashttps://www.example.com/very-long-and-descriptive-path/to/an-article.html) may only display the first 27 characters on the page, followed by....
• |safeIn AnQiCMS's template rendering mechanism, to prevent potential XSS attacks, all content output to the page will be automatically escaped.urlizetruncThe filter generates an HTML link (<a href="...">...</a>tag), if not used|safeFilter, these HTML tags will be output as is and not parsed by the browser as clickable links. Therefore, when usingurlizetruncit must be followed by|safeMake sure the generated link displays and clicks normally.

An actual example.

Assuming we want to display the article summary on the article detail page, and this summary may contain some very long URLs. We can use it like thisurlizetrunc:

<div class="article-description">
    <p>
        {% archiveDetail articleDescription with name="Description" %}
        {{ articleDescription | urlizetrunc:50 | safe }}
    </p>
</div>

In this example,archiveDetailThe tag fetched the article's summary content and assigned it toarticleDescriptionthe variable. Then,articleDescriptionThe variable isurlizetrunc:50The filter processes, converting the recognized URLs into clickable links, and limiting the display length of the link text to 50 characters (if over), finally through|safeMake sure the HTML structure is rendered correctly.

so ifarticleDescriptioncontains a very long URL, for examplehttps://en.anqicms.com/how-to-optimize-your-website-for-better-performance-and-seo-results.htmlThen it may be displayed on the page as<a href="..." rel="nofollow">https://en.anqicms.com/how-to-optimiz...</a>. The link text seen by the user is concise, but it still jumps to the full link address when clicked.

urlizetruncBenefits brought

UseurlizetruncA filter that not only keeps the text area containing URLs neat but also prevents page elements from deforming due to long links and improves user experience.The reader can clearly see the general content of the link without having to see a long string of possibly meaningless characters.This is crucial for maintaining the visual consistency and professional image of the website, especially in news lists, blog summaries, card displays, or any layout with restricted display areas.It also helps optimize page loading speed and rendering efficiency, because the browser does not need to handle overly long text content.

It is worth noting that,urlizetruncandurlizeThe links generated by the filter are added by default.rel="nofollow"The attribute tells the search engine not to follow this link. For links pointing to external websites, this is often a good SEO practice and can avoid unnecessary weight transfer.

Summary

In short,urlizetruncIt is a powerful and detailed tool in the AnQiCMS template, making the display of links both beautiful and practical. By simply applying this filter in the template and with|safeYou can easily manage the display style of links on the page, effectively enhancing the overall appearance and user experience of the website.

Frequently Asked Questions (FAQ)

1. urlizeandurlizetruncWhat are the differences between filters? urlizeThe filter will convert all URLs and email addresses in the text to clickable HTML links, but it will not limit the display length of the link text, instead showing the full URL or email address. AndurlizetruncThen this function has been added to control the length, which allows you to specify a maximum display length and automatically add an ellipsis to the end of the link text when it exceeds the length, to keep the page neat.

2. Why did I useurlizetruncFilter, but the link did not become clickable, but displayed instead<a href="...">...</a>What kind of label text?This is usually because you forget tourlizetruncafter the filter|safeFilter. The AnQiCMS template engine, for security reasons, defaults to escaping all output content to HTML.urlizetruncThe HTML tag is generated, if it is not processed|safeProcessing, the template engine treats it as plain text and escapes it, causing the tags to be displayed on the page instead of clickable links.

3. urlizetruncDoes the filter support truncation of Chinese URL? urlizetruncThe filter mainly truncates based on the number of characters. For URLs containing Chinese characters (usually after URL encoding), it calculates the length based on the number of encoded characters (usually English characters).In the actual display, due to the browser's parsing of URL encoding, the user still sees Chinese, but the truncation logic is still based on the original character count, so some tests may need to be performed when setting the length to ensure that the Chinese display effect meets expectations.