In Anqi CMS, when processing text content, we often need to automatically convert URLs or email addresses contained in it into clickable links.This not only improves the user experience, but also helps search engines better understand the page content.For this, AnQi CMS provides two very practical filters:urlizeandurlizetrunc. Their core function is to intelligently convert URLs and email addresses in text to HTML.<a>Labels, but in terms of specific application scenarios and effects, there are key differences between the two.

urlizeFilter: Make links stand out.

urlizeFilters are mainly used to extract URLs from a block of plain text, for examplehttp://example.com/www.example.comAnd email address (for example[email protected]Is automatically recognized and converted to a standard clickable HTML link. It will automatically add the link withrel="nofollow"Property, this is very important for the website's SEO strategy, it can avoid unnecessary weight loss and at the same time indicate to search engines that these links are user-generated or external links and should not pass on weight.

The advantage of this filter lies in its automation and ease of use. You do not need to manually write complex regular expressions to match and replace links, just simply apply it to the text variable that needs to be processed.It is very suitable for handling article text, detailed descriptions, or any area where you want users to be able to click directly and access the full link.

Usage example:

Assuming your content variablearchiveContentContains the following text:请访问我们的官网：www.anqicms.com，或发送邮件至 [email protected] 获取更多信息。

applyurlizeAfter the filter:

{# 假设 archiveContent 是您要处理的文本内容 #}
{{ archiveContent|urlize|safe }}

It will be displayed on the page:

请访问我们的官网：<a href="http://www.anqicms.com" rel="nofollow">www.anqicms.com</a>，或发送邮件至 <a href="mailto:[email protected]">[email protected]</a> 获取更多信息。

Please note that due tourlizeThe filter generates HTML tags, so it must be used in conjunction with|safeFilter to ensure that the browser can correctly parse and render these links, rather than displaying the HTML code as is.

urlizetruncFilter: Optimize display, streamline text.

urlizetruncFilter is onurlizeBased on this, a very useful feature has been added:Text truncation of the linkIt can also automatically identify and convert URLs and email addresses in text to clickable hyperlinks, but on top of that, you can also specify a number as a parameter to limit the display length of the link text.If the length of the original link text exceeds the specified number,urlizetruncIt will be truncated and an ellipsis will be added at the end (...)

The value of this feature is mainly reflected in the consideration of page layout and visual neatness.In limited space areas, such as article comment sections, sidebar widgets, list item summaries, or brief prompts, the original full URL may appear too long, destroying the page's aesthetics or occupying too much space.urlizetruncCan intelligently shorten these long links while preserving the availability of the links and maintaining the interface's neatness.

Usage example:

Assuming your comment content variablecommentTextContains the following text:我发现了一个很棒的资源，链接是：https://very-long-and-descriptive-url-for-a-great-resource.com/path/to/specific/page/index.html

applyurlizetruncFilter and specify the truncation length to 25:

{# 假设 commentText 是您要处理的评论内容 #}
{{ commentText|urlizetrunc:25|safe }}

It will be displayed on the page:

我发现了一个很棒的资源，链接是：<a href="https://very-long-and-descriptive-url-for-a-great-resource.com/path/to/specific/page/index.html" rel="nofollow">https://very-long-and-...</a>

Similarly,urlizetruncThe filter also generates HTML, therefore it must also match|safethe filter together.

How to choose:urlizeOrurlizetrunc?

Select to useurlizeOrurlizetrunc, mainly depends on the context of content presentation and the user experience requirements:

  • SelecturlizeWhen you want users to see the full link information, and the page space allows it, for example, in the article body, product details, important announcements, and other areas.It ensures the complete transmission of information.
  • SelecturlizetruncWhen you need to display links in limited space, prioritize the page's neatness and readability, such as in comment lists, sidebar recommendations, list summaries, and user activity areas.It can optimize the visual effects without sacrificing the link function.

Understanding the differences between these two filters and applying them flexibly according to the actual situation will help you build beautiful and functional website content in Anqi CMS.

Frequently Asked Questions (FAQ)

  1. Why are you usingurlizeorurlizetruncAfter, the HTML tags are displayed on the page instead of clickable links?This is usually because you forgot to add at the end of the filter chain.|safeThe filter. The AnQi CMS template engine, for security reasons, defaults to escaping all output content to HTML entities to prevent XSS attacks. WhenurlizeorurlizetruncGenerated<a>After such HTML tags, if missing|safeThese tags will be escaped and displayed as is, rather than being parsed by the browser as clickable links. The correct usage is:{{ 您的变量|urlize|safe }}or{{ 您的变量|urlizetrunc:数字|safe }}.

  2. urlizeandurlizetruncCan it automatically recognize all forms of URLs?These filters can intelligently recognize common URL patterns, including those that start withhttp:///https://complete URLs starting with, as well as commonwww.yourdomain.comFormatted URLs, even withoutwww.bare domain names (such asyourdomain.com) and email addresses. Their design goal is to cover most of the link forms that users naturally input in text.

  3. urlizeandurlizetruncThe generated link will be automatically addedrel="nofollow"Can this property be modified or removed?According to AnQi CMS design,urlizeandurlizetruncThe filter will automatically append when converting URLs to linksrel="nofollow"Property. This is a built-in security and SEO optimization mechanism, mainly used to avoid unnecessary page authority transfer due to user-generated content (such as comments) or external links.Through the filter itself, it is currently not possible to directly configure or remove thisnofollowProperty. If you have special requirements for customizing link attributes, you may need to consider processing them on the front-end JavaScript level or through backend customized development.