It is crucial to present information efficiently and aesthetically in website content operation.Especially when the content contains a large number of URLs or email addresses, manually converting them into clickable links is not only inefficient but also prone to errors.AnQiCMS (AnQiCMS) is well-versed in this, its template system providesurlizeandurlizetruncThese two practical filters can automatically identify URLs in text and intelligently convert them into clickable hyperlinks, greatly enhancing user experience and content management efficiency.
Understanding the template filters of Anqi CMS
In the Anqi CMS template system, filters play the role of a content 'formatting assistant'.They can perform various operations on variables, such as converting text to uppercase, truncating parts of content, or, as we will discuss today, converting plain text URLs into clickable links.usually follow the use of filters{{ 变量名 | 过滤器名称: 参数 }}such as this.
urlizeFilter: Make links clickable immediately
urlizeThe core function of the filter is to intelligently identify URLs and email addresses in text and automatically wrap them in HTML's<a>Tags within it make it clickable hyperlinks. It can also recognizehttp://orhttps://full URLs starting withwww.domain names, even common email addresses.
What's more worth mentioning is,urlizeThe filter will also automatically take care of converting these links<a>tagsrel="nofollow"Properties. For content operators, this means that the website can more effectively manage the loss of external link weight, which helps to concentrate its own SEO value and indicates to search engines that these links should not be tracked or pass on weight, especially suitable for handling scenarios with a large number of external links such as user comments, forum posts, etc.
Usage example:
Assuming your article content contains the following plain text URLs:
<p>我的博客地址是：http://www.anqicms.com，欢迎访问。</p>
<p>您也可以访问我们的官网：www.anqicms.com。</p>
<p>或者直接联系我们：[email protected]。</p>
afterurlizeAfter the filter is processed, cooperate|safeBecause the filterurlizeIt will generate HTML tags, you need|safeTell the template engine that these HTML is safe and can be output directly, avoiding being escaped), the code is as follows:
<p>{{ "我的博客地址是：http://www.anqicms.com，欢迎访问。"|urlize|safe }}</p>
<p>{{ "您也可以访问我们的官网：www.anqicms.com。"|urlize|safe }}</p>
<p>{{ "或者直接联系我们：[email protected]。"|urlize|safe }}</p>
The rendering result will be:
<p>我的博客地址是：<a href="http://www.anqicms.com" rel="nofollow">http://www.anqicms.com</a>，欢迎访问。</p>
<p>您也可以访问我们的官网：<a href="http://www.anqicms.com" rel="nofollow">www.anqicms.com</a>。</p>
<p>或者直接联系我们：<a href="mailto:[email protected]">[email protected]</a>。</p>
Furthermore,urlizeThe filter also supports a boolean parameter to control the escaping of link content. When the parameter istruefor exampleurlize:true），the special characters in the link text (such as&）will be escaped as HTML entities （&); when the parameter isfalsefor exampleurlize:false) it will not be escaped. When processing raw input from users, it is usually recommended to keep the default escaping behavior to enhance security.
urlizetruncFilter: Balance of beauty and practicality
Sometimes, the URL address in the text may be very long, and displaying it directly on the page may take up a lot of space, affecting the aesthetics and reading experience of the overall layout. In order to solve this problem, Anqi CMS providesurlizetruncfilter.
urlizetruncFilter is onurlizeBased on further optimization, it can automatically recognize and convert URLs, and also allows you to specify the maximum length of the link display text. When the displayed text of the URL exceeds the length you set, the extra part will be smartly omitted with an ellipsis....Alternative. Although the displayed text is truncated,hrefthe attribute is still the complete original URL, and the user will still be redirected to the correct address when clicked.
This feature is especially useful in scenarios where space needs to be saved, such as in news list summaries, sidebar recommendations, or content blocks with limited widths. It makes the page look cleaner without losing the availability of links.
Usage example:
Assuming your text contains a very long URL:
{% filter urlizetrunc:30|safe %}
我的博客文章地址是：https://en.anqicms.com/category/1/anqicms-tutorial-how-to-use-urlize-and-urlizetrunc-filters.html，欢迎访问。
{% endfilter %}
Hereurlizetrunc:30Indicating that the link text is displayed at most 30 characters.
The rendering result will be:
`html The address of my blog post is:https://en.anqicms.com/