In the security CMS, we often encounter scenarios where we need to display URLs or email addresses in the article body, comments, or other user input text.If these addresses are just plain text, users cannot directly click to jump, which will greatly reduce the user experience of the website.urlizeandurlizetruncIt is a tool specifically designed to solve this problem, which can automatically convert recognized URLs and email addresses into clickable HTML links.
Get to know the template filters of Anqi CMS.
The template system of AnQi CMS adopts syntax similar to Django template engine, which makes content display both flexible and powerful.Filter (Filters) is a very useful part of it, allowing us to modify, format, or process the content of variable outputs.urlizeandurlizetruncIt is such a filter that 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 links with<a>The clickable link of the label. This means you do not need to manually add HTML code to each URL or email address.urlizeIt will do the job for you.
Its working 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 them andhttps://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 can be seen that it not only adds to the URLhrefattributes, but also adds to the email addressmailto:Prefix, convenient for users to click to send emails. What's more, it is also worth mentioning that,urlizewill automatically add external linksrel="nofollow"Property, which helps to avoid unnecessary link weight dispersion.
Fine-grained control over character escaping:
urlizeThe filter also has a very practical feature, that is, it can 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 linked text to be displayed as it is, even if it contains some special characters.
You can do this by inurlizeafter: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 preserved 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 correctly parses these links instead of displaying them as plain text, you need to use them in conjunction with the output.|safeFilter.
urlizetrunc：elegant link “tailor”
Sometimes, a URL might be very long, and displaying it in full on the page would make it look cluttered and disrupt the overall layout.urlizetruncFilter isurlizeThe upgraded version, it retainsurlizethe ability to truncate and display the link text on top of all the features.
Its usage is very intuitive:
you need tourlizetruncFollowed by a colon and the expected display length (a number). When the link text exceeds this value,urlizetruncit will be automatically truncated and an ellipsis will be added at the end,...to indicate that some text has been omitted.
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 and maintaining the beauty of the page. Similarly,urlizetruncit will also be added automaticallyrel="nofollow"properties, and also need to be matched when outputting|safeFilter, to ensure that HTML code is parsed correctly.
When and where to use them?
These filters are widely used in the security 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:Users can automatically identify and generate links when mentioning websites or email addresses in comments or messages, enhancing interactivity.
- Product Description:Product details include external review links or supplier websites that can be conveniently converted to live links.
- Any unstructured text content:English version: Any text that needs to be displayed to users and may contain URLs or email addresses should consider using them.
Tip: Make sure security and rendering are correct.
When usingurlizeandurlizetruncWhen, there is a very important detail to pay attention to: **always**