How to automatically convert URLs to clickable links in AnQiCMS templates using the `urlize` filter?

In website content management, we often need to display external links in articles, comments, or summaries. Manually adding each URL<a>Tags are not only cumbersome but also prone to errors, especially when dealing with large amounts of user-generated content or importing data from other sources. Fortunately, AnQiCMS provides a very practical template filter -urlizeIt can automatically recognize URL addresses and email addresses in text and convert them into clickable links, greatly simplifying the work of content managers.

urlizeFilter: Magic that Turns Text into Links

urlizeThe core function of the filter is to intelligently scan the text content you provide, identify the strings that match the URL or email format, and then automatically generate the corresponding HTML.<a>Label it to make it clickable as a link on the web. It will intelligently recognizehttp:///https://the URL at the beginning, evenwww.The domain at the beginning, as well as standard email addresses, should be enclosed in HTML tags.<a>the tag.

It is worth mentioning that,urlizeThe filter also automatically adds to the generated links by default.rel="nofollow"Property.This is a beneficial practice for search engine optimization (SEO), which can avoid unnecessary weight transfer to external links, especially for links contained in user comments or third-party content, helping you better control the external link strategy of your website.

When usingurlizeWhen filtering, please remember to add it after|safethe filter. This is becauseurlizeIt generates HTML code, and for security reasons, AnQiCMS's template engine defaults to escaping all output content. If not added|safeYou will see the original HTML code (like<a href="...">), not clickable links.

Basic Usage: Easily convert a single URL

When your text contains one or more URLs, and these URLs are passed as variables to the template, you can use the variable directlyurlizeFilter.

For example, your backend settings may have a field storing an external purchase link or official document link for a product. In the template, you can apply it like thisurlize:

{# 假设变量 my_text 包含一个URL或电子邮件地址 #}
{% set my_text = "访问AnQiCMS官网：https://en.anqicms.com 获取更多信息。" %}
<p>{{ my_text|urlize|safe }}</p>

{# 另一个例子，包含 www. 开头的链接和邮箱 #}
{% set contact_info = "请访问 www.anqicms.com 或发送邮件至 [email protected]" %}
<p>{{ contact_info|urlize|safe }}</p>

This code will output:

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

You can see that the URLs and email addresses in the text have been automatically recognized and converted to those withrel="nofollow"attributes<a>Label.

Advanced usage: Applied to large blocks of content

When you need to handle large blocks of text, such as article content, product descriptions, or user comments, and these contents may contain multiple URLs, use{% filter %}The tag block will be more efficient and concise. This method allows you to apply filters to an entire HTML content block.

Suppose you have aarchive.ContentThe variable stores the HTML body of the article:

<div>
    {% filter urlize|safe %}
    这是文章的正文，里面可能包含一些外部链接，
    比如访问我们的合作伙伴网站：http://partner.example.com。
    或者下载我们的白皮书：https://docs.example.com/whitepaper.pdf。
    您也可以直接联系 [email protected] 获取帮助。
    <br>
    更多详情，请点击这里：anqicms.com
    {% endfilter %}
</div>

In this way,urlizeThe filter processes the entire{% filter %}and{% endfilter %}Translate the content between the brackets, find all URLs and convert them into clickable links, and finally output the rendered HTML content to the page. Here|safeThe filter must also beurlizeUse it later to ensure that the generated HTML is correctly parsed.

urlizetruncTo slim down the long link

Sometimes, layout or design requirements demand that we truncate long URLs to maintain a tidy interface.For example, a URL may contain very long query parameters, which can affect its appearance when displayed directly.urlizetruncThe filter comes into play. It is withurlizeThe function is similar, but allows you to specify a length, with the link text truncated and appended with.......

For example, if you have a very long URL:

{% set long_url = "这是一个非常非常长的链接，可能会影响页面布局：https://en.anqicms.com/very-long-path/to-some-deep-content/with-many-parameters?param1=value1&param2=value2" %}
<p>短链接显示：{{ long_url|urlizetrunc:30|safe }}</p>

{% filter urlizetrunc:20|safe %}
请查看我们的长链接示例：https://www.example.com/product/category/item-details-with-a-super-long-name-and-id-parameters?someparam=somevalue
{% endfilter %}

This code will output:

`html

Short link display:This is a very very long link, it may...

Please check our long link