It is crucial to present information efficiently and aesthetically in website content operation.Especially when the content contains a large number of URLs or email addresses, manually converting them into clickable links is not only inefficient but also prone to errors.urlizeandurlizetruncThese practical filters can automatically identify URLs in text and intelligently convert them into clickable hyperlinks, greatly enhancing user experience and content management efficiency.
Understanding the template filters of Anqi CMS
In the template system of AnQi CMS, filters play the role of a 'formatting assistant' for content.They can perform various operations on variables, such as converting text to uppercase, truncating parts of content, or, as we are going to discuss today, converting plain text URLs into clickable links.{{ 变量名 | 过滤器名称: 参数 }}this syntax.
urlizeFilter: Make links clickable immediately
urlizeThe core function of the filter is to intelligently identify URLs and email addresses in text and automatically wrap them in HTML's<a>Tags within, thus making it a clickable hyperlink. It not only identifieshttp://orhttps://full URL at the beginning, but also identifieswww.domain names at the beginning, even common email addresses.
What's more worth mentioning is,urlizeFilter will also automatically add English<a>Label addrel="nofollow"Property.This means that the website can more effectively manage the weight loss of external links for content operators, helping to concentrate their own SEO value and indicate to search engines that these links should not be tracked or pass on weight, especially suitable for handling scenarios with a large number of external links such as user comments, forum posts, etc.
Example Usage:
Assuming your article content contains the following plain text URLs:
<p>我的博客地址是：http://www.anqicms.com，欢迎访问。</p>
<p>您也可以访问我们的官网：www.anqicms.com。</p>
<p>或者直接联系我们：[email protected]。</p>
AfterurlizeFilter processed, with|safeFilter (becauseurlizewill generate HTML tags, you need|safeTell the template engine that these HTML is safe and can be output directly without escaping), the code is as follows:
<p>{{ "我的博客地址是：http://www.anqicms.com，欢迎访问。"|urlize|safe }}</p>
<p>{{ "您也可以访问我们的官网：www.anqicms.com。"|urlize|safe }}</p>
<p>{{ "或者直接联系我们：[email protected]。"|urlize|safe }}</p>
The rendered result will be:
<p>我的博客地址是：<a href="http://www.anqicms.com" rel="nofollow">http://www.anqicms.com</a>，欢迎访问。</p>
<p>您也可以访问我们的官网：<a href="http://www.anqicms.com" rel="nofollow">www.anqicms.com</a>。</p>
<p>或者直接联系我们：<a href="mailto:[email protected]">[email protected]</a>。</p>
In addition,urlizeThe filter also supports a boolean parameter to control the escaping of linked content. When the parameter istrue[for example]urlize:true)，special characters in the link text (such as&) will be escaped as HTML entities (&）；When the parameter isfalse[for example]urlize:false），no escaping will be performed. When processing raw content from user input, it is usually recommended to maintain the default escaping behavior to enhance security.
urlizetruncFilter: Balance of Beauty and Practicality
Sometimes, the URL address in the text may be very long, which may take up a lot of space when displayed on the page, affecting the aesthetics and reading experience of the overall layout. To solve this problem, Anqi CMS providesurlizetruncFilter.
urlizetruncFilter isurlize的基础上进一步优化，它不仅能自动识别并转换URL，还允许您指定链接显示文本的最大长度。当URL的显示文本超过您设定的长度时，多余的部分将智能地被省略号...English. Although the displayed text is truncated, its underlyinghrefattribute is still the complete original URL, and the user will still be redirected to the correct address after clicking.
This feature is especially useful in scenarios where display space needs to be saved, such as in news list summaries, sidebar recommendations, or content blocks with limited width. It makes the page look neater without losing the usability of the links.
Example Usage:
Assuming your text contains a very long URL:
{% filter urlizetrunc:30|safe %}
我的博客文章地址是：https://en.anqicms.com/category/1/anqicms-tutorial-how-to-use-urlize-and-urlizetrunc-filters.html，欢迎访问。
{% endfilter %}
Hereurlizetrunc:30The displayed text of the link can be up to 30 characters.
The rendered result will be:
"`html The address of my blog post is:https://en.anqicms.com/English