How to automatically identify URLs and email addresses in the text and convert them into clickable links in `urlize` and `urlizetrunc` filters in AnQi CMS?
In Anqi CMS, we often encounter scenarios where we need to display URLs or email addresses in the article content, comments, or other user input text.If these addresses are just plain text, users cannot click to jump directly, which will greatly reduce the user experience of the website. 幸运的是，AnQi CMS内置了强大的模板过滤器，其中urlizeandurlizetruncIt is a tool specifically designed to solve this problem, which can automatically convert recognized URLs and email addresses into clickable HTML links.
Familiar with Anqi CMS template filters
The Anqi CMS template system adopts a syntax similar to the Django template engine, which makes content display both flexible and powerful.Filters are a very useful part of it, allowing us to modify, format, or process the output content of variables.urlizeandurlizetruncis such a filter, which can intelligently scan text, automatically identify and wrap links.
urlize：The 'magician' of smart links
urlizeThe core function of the filter is to automatically detect URLs (Uniform Resource Locators) and email addresses in text and convert them into带有<a>Clickable tags. This means you don't have to manually add HTML code to each URL or email,urlizeWe'll take care of it for you.
The principle is very simple:
When you pass a text content containing URLs or email addresses throughurlizethe filter, for example:
<p>{{ "请访问我们的网站：https://en.anqicms.com 或联系我们：[email protected]"|urlize|safe }}</p>
Anqi CMS will automatically identify themhttps://en.anqicms.comand[email protected]and convert them into the following HTML format:
<p>请访问我们的网站：<a href="https://en.anqicms.com" rel="nofollow">https://en.anqicms.com</a> 或联系我们：<a href="mailto:[email protected]">[email protected]</a></p>
It not only adds to the URLhrefproperties, but also to the email addressmailto:Prefix, convenient for users to click to send emails. What's more, it is also added for SEO considerationsurlizeIt will automatically add to external linksrel="nofollow"Property, this helps to avoid unnecessary link weight dispersion.
About detailed control of character escaping:
urlizeThe filter also has a very useful feature, which is to control the character escaping of the link text itself.By default, for security reasons, the template engine may escape HTML special characters.But in some cases, we may want the link text to be displayed as is, even if it contains some special characters.
You can do this byurlizeadded afterwards:And a boolean value (trueorfalse) to control:
urlize:true: If the link text contains special HTML characters (such as"), they will be escaped.urlize:false: Special HTML characters will be retained as is and not escaped.
For example, if your URL contains query parameterstest="test":
<p>{% filter urlize:true|safe %}</p>
<p>请访问：www.anqicms.com/test="test" 了解详情</p>
<p>{% endfilter %}</p>
<p>{% filter urlize:false|safe %}</p>
<p>请访问：www.anqicms.com/test="test" 了解详情</p>
<p>{% endfilter %}</p>
The output might be:
<p>请访问：<a href="http://www.anqicms.com/test=%22test%22" rel="nofollow">www.anqicms.com/test="test"</a> 了解详情</p>
<p>请访问：<a href="http://www.anqicms.com/test=%22test%22" rel="nofollow">www.anqicms.com/test="test"</a> 了解详情</p>
Please note, whether it isurlize:trueOrurlize:falseSince they generate HTML tags, to ensure that the browser parses these links correctly instead of treating them as plain text, you need to use them in conjunction with the output.|safefilter.
urlizetrunc: Elegant link 'Tailor'
Sometimes, a URL may be very long, and displaying it in full on the page may look cluttered and disrupt the overall layout.urlizetruncFilter isurlizeThe upgraded version retainsurlizeall the features and adds the ability to truncate displayed link text.
Its use is very intuitive:
you need tourlizetruncImmediately followed by a colon and the desired display length (a number). If the link text exceeds this value,urlizetruncit will be automatically truncated and an ellipsis will be added at the end....to indicate omission.
For example, if we have a long URL text:
<p>{% filter urlizetrunc:20|safe %}</p>
<p>查看详细文档：https://en.anqicms.com/docs/template/filters/urlize-and-urlizetrunc.html</p>
<p>{% endfilter %}</p>
afterurlizetrunc:20The output HTML will be:
<p>查看详细文档：<a href="https://en.anqicms.com/docs/template/filters/urlize-and-urlizetrunc.html" rel="nofollow">https://www.anqicms...</a></p>
The originally long link address is elegantly shortened, maintaining clickable while maintaining the beauty of the page. Similarly,urlizetruncwill be automatically addedrel="nofollow"properties, and also need to be matched when outputting|safeFilters to ensure that HTML code is parsed correctly.
When and where to use them?
These filters have a wide range of applications in Anqi CMS, especially suitable for handling text areas that contain user-generated content or may contain uncertain links:
- Article detail page:When you paste external reference links in the article body, they can be automatically converted into clickable forms.
- Comment section or message board:When a user posts a comment or message and mentions a website or email address, the system can automatically recognize and generate a link, enhancing interactivity.
- Product Description:Product details include external review links or supplier websites that can be easily converted to active links.
- Any unstructured text content:Any text that needs to be displayed to the user and may contain URLs or email addresses can be considered for use.
Tip: Ensure security and correct rendering.
While usingurlizeandurlizetruncAt the moment, there is a very important detail that needs to be paid attention to:**always