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 introductions. Manually add 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 identify URLs and email addresses in text and convert them into clickable links, greatly simplifying the work of content managers.

urlizeFilter: Magic of Text to Link

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 so that it becomes clickable on the web page. It will intelligently identifyhttp:///https://even the websites starting withwww.domains at the beginning, as well as standard email addresses, and wrap them in HTML's<a>in the tag.

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

While usingurlizeWhen using the filter, be sure to add it after|safefilter was used. This is becauseurlizeIt will generate HTML code, and AnQiCMS's template engine, for security reasons, defaults to escaping all output content. If not|safeYou will see the original HTML code (such as<a href="...">), instead of clickable links.

Basic usage: easily convert a single URL

When you 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 the external purchase link or official document link of a product. You can apply it in the template 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 torel="nofollow"properties<a>.

Advanced usage: Applies to large blocks of content

When you need to process a large amount of text, such as an article body, product description, or user comment, and these contents may contain multiple URLs, use{% filter %}This tag block will be more efficient and concise. This method allows you to apply a filter 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>

By this means,urlizeThe filter will process the entire{% filter %}and{% endfilter %}content between, 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 parsed correctly.

urlizetruncTo slim down long links:

Sometimes, page layout or design requires us to truncate long URLs to maintain the interface's neatness.For example, a URL may contain a long query parameter that can affect the appearance when displayed directly. At this point,urlizetruncThe filter comes into play. It is withurlizeThe function is similar, but it allows you to specify a length, and the text of the link that exceeds this length will be displayed as truncated and appended with....

For example, if you have a 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 long link that may affect...

Please check our long link