How to limit the display length of the link text when converting URLs with the `urlizetrunc` filter?

In AnQiCMS (AnQiCMS) content operation practice, we often encounter some details that require fine-grained processing, one of which is how to elegantly display the long URL on the page.When a long URL is included in the text of an article, user comment, or product description, it may destroy the page layout and affect the overall aesthetics and the reading experience of users.Luckyly, Anqi CMS providesurlizetruncA filter that helps us easily solve this problem, allowing the URL to be converted into a clickable link while also controlling its display length.

Why is it necessary to limit the display length of URLs?

Imagine if you had a technical article on your website that referenced a deep path link to a GitHub repository, or if a product parameter description contained a complex link to an external API document.These links are usually very long. When they are displayed directly on the page, they may cause the following problems:

1. Visual confusion:Long URLs make the page look redundant and untidy.
2. Layout destruction:In responsive design, long URLs are prone to overflow the container, especially on mobile devices, causing page elements to be misaligned.
3. Poor reading experience:The user is interrupted by a long URL while reading, reducing the fluidity and readability of the content.
4. Professionalism is受损：A tidy and standardized page can better reflect the professionalism of the website and attention to detail.

Anqi CMS knows the importance of content presentation, its template engine built-inurlizetruncThe filter is designed to solve such pain points, aiming to enhance user experience and website professionalism.

urlizetruncFilter: Intelligent Truncation and Link Conversion

urlizetruncIt is a very practical template filter, its core function is to automatically recognize and convert URLs or email addresses in plain text into clickable HTML<a>Label. And with its brother filterurlizeWhat is different is,urlizetruncAllow us to specify the display length of the converted link text. This means that regardless of the length of the original URL, only the number of characters you set will be displayed on the page, and the part exceeding it will be automatically abbreviated with an ellipsis (...This replaces, but the actual link target is still completehrefThe attribute is still the complete original URL

It is worth mentioning that in order to follow SEO practices,urlizetruncWhen converting a URL to a link, it will also automatically add these external linksrel="nofollow"Property. This helps to inform the search engine not to pass the 'weight' to these links, which is a very useful feature when managing external links, especially user-generated content links.

How to use it in Anqi CMS templateurlizetrunc

UseurlizetruncThe filter is very intuitive, you can apply it to any text variable containing a URL

Basic syntax formatAs follows:

{{ 你的文本变量 | urlizetrunc:指定长度 }}

Here指定长度Is an integer representing the maximum number of characters you want the link text to display, including any ellipses.

Application Example:

Assuming you have a document description variable.archive.DescriptionWhere it may contain various URLs. You want these URLs to be converted to links on the page, and to be displayed with a length not exceeding 25 characters. You can use it in the template like this:

<p>{{ archive.Description | urlizetrunc:25 | safe }}</p>

Please note that,urlizetruncAfter that, we usually follow with using|safeThe filter. This is because the Anqie CMS template engine, in order to prevent cross-site scripting (XSS) attacks and other security issues, defaults to escaping all output content with HTML entities and thenurlizetruncThe filter generates HTML code (<a>Tag), if you do not use|safeThese generated HTML codes will be escaped, and finally displayed on the page as plain text, not as clickable links.|safeThe function is to inform the template engine that this part of the content has been processed and is safe, and can be directly rendered as HTML.

If you need to process a large block of text rather than a single variable, you can also usefilter/endfilterTag pairs:

<div class="article-content">
    {% filter urlizetrunc:30 | safe %}
        这篇文章包含了一些重要的参考链接：
        https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/a
        还有一个非常长的API文档地址：
        http://api.example.com/v1/products/categories/electronics/subcategories/laptops/specifications?version=2.0&lang=en
        欢迎通过邮箱联系我们：[email protected]
    {% endfilter %}
</div>

In the above example, all identified URLs and email addresses will be converted to links and automatically truncated to no more than 30 characters of display text.

Practical suggestions

• Length selection:There is no perfect 'magic number' that applies to all situations.It is recommended that you test on different pages and devices to find the length that best suits your website style and user experience.For a common URL, 15 to 25 characters is usually a good starting point.
• Application scenario:In addition to the article content,urlizetruncit is also very suitable for handling user comments, messages, friend link descriptions, and other scenarios where long URLs may occur.
• Maintain consistency:Maintain consistency throughout the entire website.urlizetruncConsistency in truncation length helps enhance the overall professionalism and user experience of the website.

ByurlizetruncFilter, Anqi CMS allows content operators to focus more on content creation and layout, without worrying about the display issues caused by long URLs.It not only simplifies link management, but also provides strong support for the cleanliness and user-friendliness of the website.

Frequently Asked Questions (FAQ)

Q1:urlizetruncandurlizeWhat are the main differences of the filter?

A1: urlizeandurlizetruncCan convert URLs and email addresses in text to clickable HTML links and automatically add themrel="nofollow"properties. The main difference between them is,urlizetruncAllow you to specify the maximum display length of the link text through a parameter, the part exceeding it will be automatically truncated and displayed with an ellipsis (...），whileurlizeIt will display the full URL text. Which filter to choose depends on whether you need to limit the display length of the link.

Q2: Why did I useurlizetruncFilter, but the links displayed on the page are still plain text and not clickable?

A2:This is usually because you forget tourlizetruncAdd after the filter|safeFilter. The template engine of AnQi CMS defaults to escaping all HTML code for security reasons to prevent XSS attacks.urlizetruncThe generated is HTML<a>Label, if it is not used for the result|safeThese HTML codes will be escaped and displayed as plain text. Add|safeAfter that, you clearly tell the template engine that this part of the HTML is safe and can be rendered directly.

Q3:urlizetruncThe filter automatically adds attributes to external links.rel="nofollow"What are the benefits of this attribute?

A3:Yes,urlizetruncThe filter will automatically add when converting a URL to a linkrel="nofollow"Properties. This is very beneficial for SEO, especially for links in user-generated content on websites (such as comments, forum posts).nofollowThe attribute tells the search engine not to pass 'weight' or 'reliability' to these links, thereby helping the website to better control its link assets, avoid unnecessary SEO risks, and also prevent the appearance of spam links.