How to automatically parse URL strings to make them clickable in the article body or description,` tag?

In daily website content creation and management, we often need to embed some links in the article text or description, 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 will undoubtedly greatly reduce their user experience.Fortunately, AnQiCMS is built-in with very practical features that can automatically identify and convert these URL strings into clickable ones<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 content, saving us the麻烦 of manually editing each link.It is especially worth mentioning that the automatically generated links will also be added by defaultrel="nofollow"Attribute, this is a very considerate detail for the website's SEO strategy, which helps to better manage the weight transmission of external links.

urlizeUse of filters

AnQiCMS providedurlizeThe filter automatically completes this conversion. Its usage is very simple, just add it to the text variable that needs to be processed|urlizeIt can be. For example, if your article content is stored inarchive.ContentThis variable, then 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 one|safefilter was used. This is becauseurlizeThe filter generates HTML code (i.e.<a>Tags), while the AnQiCMS template engine, for security reasons, defaults to escaping all output HTML characters and converting them to HTML entities (for example<Will become<If it is not added|safeFilter, then the generated link will be displayed as text<a href="...">...</a>, rather than a clickable link.|safeThe function is to inform the template engine that this content is safe HTML code that can be output directly without escaping.

For example, suppose you have a section of content in 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 also recognizes standardhttp(s)://Link, even email addresses are recognized and converted.mailto:Link, very smart.

More flexible control:urlizetrunc

Sometimes, the URLs in our articles may be very long, and displaying them directly can affect the layout aesthetics. AnQiCMS provides this forurlizetruncFilter, it isurlizeThe function of truncating the link display text has been added.

urlizetruncThe filter requires a numeric parameter to specify the maximum length of text displayed for the link. If the length of the original URL string exceeds this value, it will be truncated and an ellipsis will be added at the end....

How to use as an example:

{{ archive.Content|urlizetrunc:20|safe }}

Following the above example, if you use:{{ archive.Content|urlizetrunc:20|safe }}To be processed:

Original content:欢迎访问我们的官方网站：https://en.anqicms.com，同时您也可以发送邮件到 [email protected] 获取帮助。

After processing (text limit is 20 characters):

欢迎访问我们的官方网站：<a href="https://en.anqicms.com" rel="nofollow">https://www.anqicms...</a>，同时您也可以发送邮件到 <a href="mailto:[email protected]" rel="nofollow">[email protected]...</a> 获取帮助。

In this way, even long URLs can be presented in a more concise and beautiful way on the page, maintaining the cleanliness of the content.

Examples of actual application scenarios

This feature is very useful in various text content areas of AnQiCMS, for example:

• The article body (archive.Content)This is the most common application scenario, ensuring that users can easily click on the reference links contained in long articles.
• Category description (category.Description)When mentioning external resources or related topics in the category page description, links can be automatically generated.
• Single-page content (page.Content)For example, pages such as “About Us” or “Contact Information”, if they contain websites or email addresses, can also be automatically linked in this way.

By simply adding to the template|urlize|safeor|urlizetrunc:数字|safeYou can let AnQiCMS automatically handle URLs in the text, greatly enhancing the interactivity and accessibility of the website.This reflects AnQiCMS's thoughtful consideration in improving content operation efficiency and user experience.

Frequently Asked Questions (FAQ)

1. Why did we useurlizeAfter the filter, the link is still displayed as text instead of clickable?This is usually because you forgot to add|safefilter.urlizeThe filter generates HTML code (i.e.<a>Tags), but the AnQiCMS template engine, for security reasons, defaults to escaping all output HTML characters. If not added|safe,<a>The angle brackets and other special characters in the tag will be converted to HTML entities, causing the browser to fail to correctly parse them as clickable links.

2.urlizeThe links generated by the filter will be automatically added.rel="nofollow"Are you? Can I remove it?Yes, according to the design of AnQiCMS,urlizeThe filter will default to generating when automatically parsing URLs<a>tagsrel="nofollow"Property, this helps manage the SEO impact of external links. Currently throughurlizeThe filter itself does not have any 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 background content editor, or engaging in secondary development to customize template functions.

3.urlizeWhat types of URL can the filter recognize? Does it support Chinese domain names? urlizeThe filter can recognize various common URL formats, including those starting withhttp:///https://Complete URLs starting withwww.The URL at the beginning (it will automatically prepend it)http://). In addition, it can 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 (for example, after Punycode conversion)xn--...Form, or the Chinese form usually displayed by the browser), and conforms to the general pattern recognized by URLs.urlizeFilters can also usually correctly identify and convert.