How `urlize` and `urlizetrunc` filters automatically convert URLs and email addresses in text to clickable hyperlinks?

In Anqi CMS, managing website content, especially how to efficiently and beautifully convert large amounts of text containing URLs and email addresses into clickable hyperlinks is a concern for many content operators. Manually adding<a>Tags are not only time-consuming and labor-intensive, but also prone to errors. Fortunately, Anqi CMS provides two very practical template filters -urlizeandurlizetruncThey can automatically complete this task, greatly enhancing the efficiency and user experience of content publishing.

urlizeFilter: Make your URL and email 'alive'.

urlizeThe filter is an intelligent tool, its main function is to automatically identify URLs in text (whetherhttp:///https://they start withwww.Beginning with, even in pure domain name form) and email addresses, and convert them to standard HTML hyperlinks (<a href="...">...</a>). It's also thoughtful that it automatically adds properties for these external links to follow SEO practices.rel="nofollow"This helps the website better manage the weight transmission of external link authority.

Imagine that you are writing a technical article, referencing multiple external resource links, or listing customer service email addresses in a product description.If manually adding link tags one by one, it will undoubtedly take a lot of time.urlizeFilter, simply pass the content containing these texts to it, and it will instantly convert it into a clickable hyperlink, making your content come to life instantly.

Usage example:

Assuming your article content has a section of plain text:请访问我们的官网 https://en.anqicms.com 或发送邮件至 [email protected] 获取帮助。

In Anqi CMS templates, you can use it like this:urlizeFilter:

{# 假设 content 变量包含了上述文本 #}
<p>{{ content|urlize|safe }}</p>

After rendering, this text will automatically become:

<p>请访问我们的官网 <a href="https://en.anqicms.com" rel="nofollow">https://en.anqicms.com</a> 或发送邮件至 <a href="mailto:[email protected]">[email protected]</a> 获取帮助。</p>

It should be noted that,|safeThe filter is indispensable here. BecauseurlizeThe filter generates HTML tags, if it is missing|safeThe template engine may escape these HTML tags for security reasons (for example, converting<Escape as<), which may cause the link to display incorrectly.

urlizeThe filter also supports a boolean parameter to control the escaping of link content. For exampleurlize:trueorurlize:falseIn most cases, the default behavior is sufficient, but if you have special requirements for the display of link text, you can try it.

urlizetruncFilter: Smart truncation, keep the page tidy

In some cases, the URL may be very long, and if displayed in full, it may destroy the overall layout or aesthetics of the page. At this point,urlizetruncThe filter comes into play. Its basic function is consistent withurlizewhich automatically recognizes and converts URLs and email addresses into clickable links, and addsrel="nofollow". The difference lies in,urlizetruncAllow you to specify a length, when the link text exceeds this length, it will be automatically truncated and replaced with “…”, thus maintaining the neatness and consistency of the page.

For example, a very long technical document link may make the page look disorganized, but byurlizetrunc, you can control its display length to ensure the beauty of the content.

Usage example:

Assuming your text has a very long URL:这是一个关于安企CMS高级功能演示的超长链接：https://en.anqicms.com/docs/advanced-features/templates-and-filters/urlize-urlizetrunc-example.html

You want it to show only the first 25 characters (including "..."):

{# 假设 content 变量包含了上述文本 #}
<p>{{ content|urlizetrunc:25|safe }}</p>

After rendering, the text will look something like this:

<p>这是一个关于安企CMS高级功能演示的超长链接：<a href="https://en.anqicms.com/docs/advanced-features/templates-and-filters/urlize-urlizetrunc-example.html" rel="nofollow">https://en.anqicms.com/do...</a></p>

This way, even a long URL will not affect the overall layout of the page.

Why choose these two filters? What is their practical value?

1. Efficiency improvement: Say goodbye to the繁琐 of manually adding links, process links in large amounts of text at one time, and greatly save the precious time for content editing and publishing.
2. User experience optimizationVisitors do not need to copy and paste to click the link directly, which improves the interactivity and ease of use of the website.
3. Content is tidy and beautifulEspeciallyurlizetruncIt can intelligently handle long links, avoiding content overflow or layout errors, keeping the page with a unified visual style.
4. SEO-friendly: Automatically add external links torel="nofollow"Attribute, helps the website better control the link weight in search engine optimization and avoid unnecessary loss.
5. Cross-platform consistency: Regardless of the source of the content, after the filter is processed, the display method of the links will remain consistent, enhancing the professionalism of the website.

In AnQi CMS,urlizeandurlizetruncThe filter is an indispensable tool for content operations.They achieve powerful automation functions with concise syntax, making content publishing more efficient and beautiful, while also considering the needs of search engine optimization.By proficiently using these two filters, you can easily create a user-friendly, content-oriented website.

Frequently Asked Questions (FAQ)

1. Why when usingurlizeorurlizetruncAfter, sometimes it is also necessary to add|safeFilter?Answer: This is becauseurlizeandurlizetruncThe filter will convert URLs and email addresses in the text to HTML<a>Label. The Anqi CMS template engine, to prevent potential XSS attacks (cross-site scripting attacks), defaults to escaping all output content, which means it will convert<to<If missing.|safeFilter generated.<a>The tag will be displayed as plain text instead of being parsed by the browser as a clickable hyperlink. Adding|safeIt tells the template engine that this part of the content is safe HTML that does not need to be escaped and can be output directly.

2. What is the impact of using these two filters if my text does not contain any URLs or email addresses?Answer: There will be no impact.urlizeandurlizetruncThe filter will only search and process strings in the text that match the URL or email address format.If the text does not contain any strings that match these formats, they will return the original text unchanged, without changing the content, without causing any errors or additional overhead.So, even if it is uncertain whether the text contains a link, you can use it with confidence.

3. Can I apply these two filters to all the text in the article (rich text)?Yes, absolutely.When you need to process a large block of text containing URLs and email addresses (such as article content, comments, message board entries, etc.), you can pass these texts as variables to the filter.{% filter %}{% endfilter %}To enclose a large block of content, so that the filter will process the entire block of text. For example:

{% filter urlize|safe %}
    {{ article.Content }} {# article.Content 是文章正文内容 #}
{% endfilter %}

Or use it directly after a variable:

<p>{{ article.Content|urlize|safe }}</p>

Both methods can effectively convert URLs and email addresses in article content to clickable hyperlinks automatically.