In the content operation practice of AnQiCMS, we often encounter some details that require refined handling, one of which is how to elegantly display the ultra-long URLs on the page.Whether it is the main text of the article, user comments, or product descriptions, when the text contains overly long URLs, they may disrupt the page layout and affect the overall aesthetics and the reading experience of the users.urlizetruncA filter that helps us easily solve this problem, allowing URLs to be converted into clickable links while also controlling their display length.

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

Imagine if your website has a technical article that references a deep path link to a GitHub repository, or if a product parameter description includes a link to a complex external API document.These links are usually very long.

  1. Visual confusion:Long URLs can make the page appear 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 misalign.
  3. Poor reading experience:Users are interrupted by excessively long URLs while reading, reducing the fluidity and readability of the content.
  4. Professionalism受损：A well-organized and tidy page better reflects the professionalism of the website and attention to detail.

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

urlizetruncFilter: Smart Truncation and Link Conversion

urlizetruncis a very practical template filter, its core function is to automatically recognize and convert URL addresses or email addresses in plain text to clickable HTML<a>Tags. And its brother filter.urlizeThe difference lies in,urlizetruncAllow us to further 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 rest will be automatically abbreviated with an ellipsis (...）to replace, but the actual link target is still the full original URL.hrefThe attribute) is still the complete original URL.

It is worth mentioning that to follow SEO **practices,urlizetruncWhen converting URLs to links, these external links will also be automatically addedrel="nofollow"Property.This helps tell search engines not to pass the 'weight' to these links. It is a very useful feature when managing external links, especially in user-generated content links.

How to use in Anqi CMS templateurlizetrunc

UseurlizetruncThe filter is very intuitive, and you can apply it to any text variable containing URLs.

Basic syntax formatAs follows:

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

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

Application example:

Suppose you have a document description variablearchive.DescriptionAmong them may contain various URLs. You want these URLs to be converted to links on the page and 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 inurlizetruncAfter that, we will usually follow with|safeFilter.This is because the template engine of Anqi CMS performs HTML entity escaping on all output content by default to prevent security issues such as cross-site scripting (XSS) attacks.urlizetruncThe filter will generate 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, rather than clickable links.|safeThe function of this content is to inform the template engine that this part of the content has been processed and is safe, and can be rendered directly as HTML.

If you need to handle 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 recognized URLs and email addresses will be converted to links, and automatically truncated to no more than 30 characters of display text.

Practical Tips

  • Length Selection:There is no perfect 'magic number' that applies to all situations.Suggest that you test on different pages and devices to find the length that best suits your website style and user experience.For a standard 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 scenarios where user comments, messages, friend link descriptions, etc., may have long URLs.
  • Maintain consistency:are maintained throughout the websiteurlizetruncConsistency in truncation length helps improve the overall professionalism and user experience of the website.

PassurlizetruncFilter, with Safe CMS, content operators can 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 website's cleanliness and user-friendliness.

Common Questions (FAQ)

Q1:urlizetruncandurlizeWhat are the main differences between the filters?

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

Q2: Why did I useurlizetruncFilter, but the links 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 output is HTML<a>Label, if not using its 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 will automatically add to external linksrel="nofollow"properties? What are the benefits of this?

A3:Yes,urlizetruncThe filter automatically adds 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 search engines not to pass 'weight' or 'trustworthiness' to these links, thereby helping the website better control its link assets, avoiding unnecessary SEO risks, and also preventing the appearance of spam links.