How to precisely set the truncation length of the URL link text for the `urlizetrunc` filter (e.g., 15 characters)?

In website content operation, we often encounter situations where it is necessary to display external links.These links may sometimes be very long, and displaying them directly can not only affect the overall aesthetics of the page, but may also destroy the layout, especially on mobile devices.Aqiq CMS understands this pain point and provides us with a very practical template filter——urlizetruncIt helps us elegantly handle these long URLs, keeping them clickable while also having a neat display effect.

Get to knowurlizetruncFilter: The combination of intelligent links and length restrictions

In simple terms,urlizetruncIt is a powerful content processing tool. Its core function is to intelligently recognize URLs in text (includinghttp:///https://URLs starting with,www.Domain names at the beginning, even email addresses, and then automatically convert them to clickable HTML<a>Link. What's more, it allows us to precisely set the display length of the link text. Once the link text exceeds the length we set,urlizetruncIt will automatically truncate and add an ellipsis (...To ensure that the link clearly conveys information without being too long.

This is similar to its "brother" filter.urlizeIt is somewhat similar,.urlizeIt can also convert URLs to links, but it does not truncate the link text, suitable for those who do not mind the complete display of links.urlizetruncIt focuses more on visually optimizing the page, providing a more refined display of content.

Why to useurlizetrunc?

Imagine that your article references a very long research report link, or a user submits a URL with complex query parameters. If noturlizetruncThese long links may stretch your article layout, causing paragraphs to be uneven or not fit in list items.Especially in responsive design, long URLs can easily cause text overflow, affecting the user's reading experience.

urlizetruncThe value lies here. By setting an appropriate truncation length, we can:

• Keep the page tidy:Make the link length uniform, enhance visual consistency.
• Optimize the reading experience:Avoid users from being distracted by a long URL and clearly knowing that there is a link.
• Prevent layout destruction:Especially in card layouts or containers with fixed widths, long URLs are no longer a hassle.
• Enhance mobile-friendliness:On small screen devices, concise link text can better adapt to limited display space.

How to precisely set the truncation length of URL link text.

urlizetruncThe filter is very intuitive to use, it is the same as the template filter of other safe CMS, through the pipe character|Apply it. The most common use is to apply it to a variable and pass a numeric parameter to specify the truncation length.

Basic syntax:

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

Here, the 'length' is an integer representing the maximum number of characters you want the link text to display, this lengthContainsEllipsis at the end (...)

For example, to truncate a URL to display up to 15 characters:

Assuming we have a variabledocumentUrlIts value is"https://en.anqicms.com/documentation/template/filters/urlizetrunc-usage-guide".

We can apply it like this:urlizetrunc:

<p>原始链接: {{ documentUrl }}</p>
<p>截断为15个字符显示: {{ documentUrl | urlizetrunc:15 | safe }}</p>

The output of this code might look like this:

原始链接: https://en.anqicms.com/documentation/template/filters/urlizetrunc-usage-guide 截断为15个字符显示: <a href="https://en.anqicms.com/documentation/template/filters/urlizetrunc-usage-guide" rel="nofollow">https://www.an...</a>

Please note that we have additionally used|safefilter was used. This is becauseurlizetruncConverts the URL in the text to HTML<a>Label, in order for the browser to correctly parse and display this link instead of treating it as plain text, we need to explicitly tell the template engine that this content is 'safe' HTML code. If not|safeYou may see it displayed directly on the page<a href="...">...</a>Such original HTML string.

Process multiple URLs in a large block of text:

If you need to handle a complex text containing multiple URLs rather than a single variable, you can usefilterLabel collaborationurlizetruncto wrap the entire text block