In the template development of AnQi CMS,urlizeThe filter is undoubtedly a very practical tool, it can intelligently identify URLs or email addresses in text and automatically convert them into clickable links<a>Label. This is very beneficial for processing user submitted content or importing plain text from external sources to provide a better user experience and SEO friendliness.
However, when usingurlizeAt times, some developers may encounter a perplexing issue: why do the URLs in the original text, especially those with query parameters or special characters, lose their links after being converted?hrefSpecial characters in attribute values will be escaped by HTML entities, causing links to fail to work or display abnormally? For example, the original link should behttps://example.com/?param=值&other=更多and the link may becomehttps://example.com/?param=值&other=更多of which&escaped into&.
To solve this core problem, we need to understand deeplyurlizeA key parameter of the filter. The template engine of Anqi CMS, by default, for security reasons, will automatically escape the output HTML content to prevent potential XSS attacks. WhenurlizeThe filter processes a URL, if it is not specially indicated, it will treat the URL string as part of ordinary text and will interpret the special characters (such as&/"/'Convert to the corresponding HTML entity, ensuring that the generated HTML code is valid and safe. But for<a>label'shrefattributes, it often disrupts the structure and function of URLs.
The key to solving this problem lies inurlizeThe filter provides an optional boolean(true/false) parameter, specifically used to control the HTML entity escaping behavior of the URL string itself.
Core solution: useurlize:falseParameter
When we willurlizethe filter meetsfalseWhen used together, we are explicitly telling the template engine: Please identify the URLs in the text and generate<a>tags in the template,Do notYeshrefThe URL string in the attribute is HTML entity escaped. This ensures that the URL maintains its original form and functionality.
At the same time, we also need to pay attention to a common misconception. Evenurlize:falsePreventing the URL itself from escaping, the generated<a>Tags (for example<and>symbols) may still be escaped by the template engine by default.<and>，causing the HTML code of the link to be displayed directly on the page instead of a clickable link. In order to<a>tags to be correctly parsed and rendered by the browser, we need to use them in conjunction with|safefilter.|safeThe filter tells the template engine that the marked content is 'safe' and does not need to be escaped as HTML entities, and can be output directly as HTML code.
Therefore, ensure that the original URL is not escaped by HTML entities and is rendered correctly as a clickable link:
{{ 你的文本变量 | urlize:false | safe }}
Let's see the effect through a specific example:
Assuming we have a text variablecontent_textIts content is:请访问我们的安企CMS教程：https://en.anqicms.com/docs?id=123&category=入门指南&lang=zh-CN
If we just use{{ content_text|urlize|safe }}(DefaulturlizeBehavior, equivalent tourlize:true)Generated linkhrefAttributes may contain escaped characters:<a href="https://en.anqicms.com/docs?id=123&category=入门指南&lang=zh-CN" rel="nofollow">...</a>Such a link may fail to jump to the expected page when clicked due to incorrect parameter parsing.
And using the correcturlize:falseparameters:{{ content_text | urlize:false | safe }}The following HTML code will be generated:<a href="https://en.anqicms.com/docs?id=123&category=入门指南&lang=zh-CN" rel="nofollow">请访问我们的安企CMS教程：https://en.anqicms.com/docs?id=123&category=入门指南&lang=zh-CN</a>at this point,hrefThe URL in the attribute retains the original correct format, and the link function works normally.
When to chooseurlize:false?
In most cases, when you obtain content from a trusted data source (such as a database storing known valid links, or links generated automatically by the system) and these links need to accurately retain their query parameters or special characters, useurlize:falseIt is a wise choice. For example, links in the article content after collection, links to external APIs, or links containing dynamic tracking parameters, and so on.
Maintain for user input that is not strictly verified, keepurlizeThe default behavior (i.e.,urlize:trueAllowing special characters within URLs to be escaped will be safer, which can further reduce potential security risks, although this may affect the accuracy of links in some edge cases.In these scenarios, we tend to prioritize security over the complete originality of the URL.
MasterurlizeThis parameter of the filter can help us control the presentation of website content more flexibly and accurately, ensuring that the link retains the integrity of the function while also considering the safety and aesthetics of the page.
Frequently Asked Questions (FAQ)
urlizeandurlizetruncWhat is the difference?urlizeThe filter will convert URLs in the text to full<a>tags, displaying the full URL text. Andurlizetruncbesides havingurlizeIn addition to the function, you can also specify an additional numeric parameter to specify the length of the text displayed in the link. If the URL text exceeds the specified length, it will use an ellipsis (...This replaces the overflow part, which is very useful in limited display areas. For example,{{ some_url_text|urlizetrunc:20|safe }}.Why did I use
urlize:falseBut the link is not clickable, and the HTML code is directly displayed on the page?This is usually because you forgot to add|safefilter.urlize:falseThe parameter ensures that the URL itself is inhrefThe attribute is not escaped, but the entire<a>Tag (including</>HTML symbols) may still be escaped by the template engine. Only by adding|safeOnly then can the template engine be told that this HTML fragment is safe, and can be rendered directly as a clickable link. The correct syntax is{{ 你的文本变量 | urlize:false | safe }}.urlizeThe filter will automatically addrel="nofollow"Should I add the attribute?Yes, according to the Anqi CMS documentation,urlizeThe filter converts URLs in plain text to<a>Labels are automatically added for it,rel="nofollow"Attribute. This is a beneficial SEO practice, which helps to avoid unintentionally passing the current page's weight to external links, especially when dealing with user-generated content or unlinked links.