In daily website content creation and management, we often need to embed links in the main body or description of articles, such as referencing external resources, pointing to product pages, or other related articles.If these URLs are only displayed in plain text, users will have to manually copy and paste them into the browser, which undoubtedly will greatly reduce their user experience.<a>tags, making the website content more friendly and convenient.
This feature is mainly implemented through the template filter of AnQiCMS, which can intelligently scan text content, find strings that match the URL format, and then automatically add HTML hyperlink tags to them.This not only improves the user's browsing efficiency, but also ensures consistency of the content, saving us the麻烦 of manually editing each link.rel="nofollow"[en]Property, this is a very considerate detail for the website's SEO strategy, which helps better manage the weight transfer of external links.
urlize[en]The use of filters
AnQiCMS providesurlizeThe filter automatically completes this transformation. Its usage is very simple, just add it after the text variable that needs to be processed.|urlizeFor example, if your article content is stored inarchive.ContentIn this variable, you can write it like this in the template:
{{ archive.Content|urlize|safe }}
Pay special attention here, when usingurlizeAfter the filter, we still need to add a|safethe filter. This is becauseurlizeThe filter generates HTML code (i.e., <a>Label), while the AnQiCMS template engine, for security considerations, defaults to escaping all output HTML characters, converting them to HTML entities (for example,<Will become<) If not added,|safethe generated link will be displayed as text instead of a clickable link.<a href="...">...</a>.|safeThe function of this value is to inform the template engine that this piece of content is safe HTML code and can be output directly without escaping.
For example, suppose you have the following content in the main body of your article:
欢迎访问我们的官方网站：https://en.anqicms.com，同时您也可以发送邮件到 [email protected] 获取帮助。
After{{ archive.Content|urlize|safe }}After processing, it will be displayed on the front-end page as:
欢迎访问我们的官方网站：<a href="https://en.anqicms.com" rel="nofollow">https://en.anqicms.com</a>，同时您也可以发送邮件到 <a href="mailto:[email protected]" rel="nofollow">[email protected]</a> 获取帮助。
As you can see,urlizeit not only recognizes standardhttp(s)://Links, even email addresses are recognized and converted intomailto:Links, very smart.
More flexible control:urlizetrunc
Sometimes, the URLs in our articles may be very long, which may affect the layout aesthetics if displayed directly. AnQiCMS providesurlizetrunca filter, which inurlizeOn this basis, the function of truncating link display text has been added.
urlizetruncThe filter requires a numeric parameter to specify the maximum length of the displayed text for the link. If the original URL string exceeds this number, it will be truncated and an ellipsis will be added at the end
}]....
The usage example is as follows:
{{ archive.Content|urlizetrunc:20|safe }}
Following the above example, if using:{{ archive.Content|urlizetrunc:20|safe }}To be processed:
Original content:欢迎访问我们的官方网站：https://en.anqicms.com，同时您也可以发送邮件到 [email protected] 获取帮助。
Processed (text display is limited to 20 characters):
欢迎访问我们的官方网站：<a href="https://en.anqicms.com" rel="nofollow">https://www.anqicms...</a>，同时您也可以发送邮件到 <a href="mailto:[email protected]" rel="nofollow">[email protected]...</a> 获取帮助。
This way, even very long URLs can be presented in a more concise and aesthetically pleasing manner on the page, maintaining the neatness of the content.
Examples of practical application scenarios
This feature is very useful in various text content areas of AnQiCMS, such as:
- Article body (
archive.Content)This is the most common application scenario, ensuring that users can easily click on the reference links included in long articles. - Category Description (
category.Description)[en]When mentioning external resources or related topics in the category page description, links can be automatically generated. - [en]Single-page content (
page.Content)For pages such as “About Us” or “Contact Information”, if they contain URLs or email addresses, links can also be automatically generated in this manner.
By simply adding to the template|urlize|safeor|urlizetrunc:数字|safeYou can let AnQiCMS automatically handle URLs in text, greatly enhancing the interactivity and accessibility of the website.This reflects the careful consideration of AnQiCMS in improving content operation efficiency and user experience.
Common Questions (FAQ)
Why is the link still displayed as text instead of clickable after the filter?urlizeThis is usually because you forgot to addthe filter generates HTML code (i.e.|safeFilter.urlize1. Why did we use<a>Tag), but due to security considerations, AnQiCMS's template engine defaults to escaping all output HTML characters. If none of the following has been added,|safe,<a>The尖角符号 in tags and other special characters will be converted to HTML entities, causing the browser to not parse them as clickable links correctly.
2.urlizeLinks generated by the filter will be automatically addedrel="nofollow"Is it a property? Can I remove it?Yes, according to the design of AnQiCMS,urlizethe filter will default to adding to the generated<a>Label addrel="nofollow"Properties, which help manage the SEO impact of external links. Currently throughurlizeThe filter itself does not have any direct parameters that can remove or modify thisnofollowProperty.If you have specific requirements to remove this property, you may need to consider other processing methods, such as manually inserting HTML links in the backend content editor, or engaging in secondary development to customize template functions.
3.urlizeWhat types of URLs can the filter identify? Does it support Chinese domain names?
urlizeThe filter can identify multiple common URL formats, including URLs that start withhttp:///https://as well as URLs that start withwww.The URL at the beginning (it will automatically prepend it)http://). Additionally, it can also recognize email addresses and convert them tomailto:Link. For Chinese domain names, as long as they are complete internationalized domain names (IDN) in the content (such as after Punycode conversion,xn--...Format, or the Chinese format usually displayed by the browser), and conforms to the general pattern recognized by URLs.urlizeFilters can usually also recognize and convert them correctly.