In website content operations, we often encounter situations where we need to display external links.These links may be very long at times, and displaying them directly can not only affect the overall appearance of the page, but may also destroy the layout, especially on mobile devices.urlizetruncIt can help us elegantly handle these long URLs, making them clickable while also having a neat display.

KnowurlizetruncFilter: A combination of intelligent linking and length restriction.

In simple terms,urlizetruncIt is a powerful content processing tool. Its core function is to intelligently recognize URLs in the text (including)http:///https://Starting URLs,www.Starting domains, even email addresses), and then automatically converting them into clickable HTML<a>Link. What's more, it allows us to precisely set the display length of these link texts. Once the link text exceeds the length we have set,urlizetruncIt will automatically truncate and add an ellipsis at the end....), thus ensuring that the link clearly conveys information without being too long.

This is similar to its 'sibling' filter.urlizeSome are similar,urlizeIt can also convert URLs to links, but it will not truncate the link text, which is suitable for those who do not mind the complete display of links.urlizetruncIt focuses more on visually optimizing the page and providing a more refined display of the content.

Why useurlizetrunc?

Imagine that your article references a very long research report link, or a user submits a URL with complex query parameters. If there is nourlizetruncThese long links may stretch your article layout, causing paragraphs to be uneven or to look out of place 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 neat:Make the link length uniform, enhancing visual consistency.
  • Optimize the reading experience:Avoid users being distracted by overly long URLs while clearly knowing that there is a link here.
  • Prevent layout destruction:Especially in card layouts or containers with fixed widths, long URLs are no longer a hassle.
  • Improve 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, just like the template filters of other security CMS, through the pipe character|Apply to it. The most common usage is to apply it to a variable and pass a numeric parameter to specify the truncation length.

Basic syntax:

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

The term “length” is an integer representing the maximum number of characters you want the linked text to display, this lengthincludesthe ellipsis at the end of...).

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

Suppose we have a variabledocumentUrlwith the value"https://en.anqicms.com/documentation/template/filters/urlizetrunc-usage-guide".

We can apply it like thisurlizetrunc:

<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|safethe filter. This is becauseurlizetruncit will convert the URL in the text to HTML<a>Tags, in order for the browser to correctly parse and display this link instead of outputting it as plain text, we need to explicitly tell the template engine that this content is 'safe' HTML code. If not|safeYou might see the content directly displayed on the page.<a href="...">...</a>Such original HTML strings.

Handle multiple URLs in a large text block:

If you need to handle a complex text containing multiple URLs, not a single variable, you can usefilterlabel combined withurlizetruncto wrap the entire text block