In website operation, we often encounter such needs: in article content or description text, there may be some web addresses or email addresses, but they are just plain text, and users cannot directly click to access them.Adding HTML links manually to each URL is not only inefficient but also prone to errors, especially when dealing with a large amount of content.AnQiCMS (AnQiCMS) understands this pain point and provides powerful built-in filters that can help us easily convert URLs in text, making the website content more friendly and convenient.

Automating Links: The Key to Enhancing User Experience

Imagine that when a user is browsing your article, they see an interesting website URL. If they need to manually copy and paste it into the browser to open it, it undoubtedly increases the operation cost and reduces the reading experience.If these URLs can be automatically turned into clickable links, users can simply tap to jump to the target page, which will greatly enhance the ease of use and professionalism of the website.The filter feature of Anqi CMS is born for this.

Understanding Core Tools:urlizeandurlizetruncFilter

In the template system of AnQi CMS, filters play a role in processing and formatting variable content. They are usually through the pipe symbol|Connected to a variable, it can achieve various functions. For converting text URLs into clickable links, we mainly use two very practical filters:urlizeandurlizetrunc.

1.urlizeFilter: Smartly identify and convert to links

urlizeThe filter can smartly identify URLs contained in a piece of text (including)http:///https://starting with, orwww.Starting, even in pure domain name format), and email addresses, and automatically wrap them in<a href="...">tags to make them clickable links.

Working principle:WhenurlizeThe filter processes text by searching for string patterns that match URLs or email formats. Once found, it generates the corresponding<a>Tags. It is worth noting that to follow SEO **practices,urlizethe generated links will be added withrel="nofollow"attributes, which helps to avoid unnecessary "link weight" loss.

Example Usage:Assuming your article content (or other text field) includes the following plain text URLs and email addresses: 请访问我们的官网 https://en.anqicms.com 或发送邮件至 [email protected] 获取帮助。您也可以尝试 anqicms.cn。

In your CMS template, it is usually like this to call the article content variable, and cooperate withurlizeFilter:

{# 假设 articleContent 是包含上述文本的变量 #}
{{ articleContent|urlize|safe }}

Effect display:AfterurlizeAfter the filter is processed, the following HTML will be rendered on the page:safeThe filter is to ensure that HTML code is parsed correctly by the browser and not displayed as plain text:)

请访问我们的官网 <a href="https://en.anqicms.com" rel="nofollow">https://en.anqicms.com</a> 或发送邮件至 <a href="mailto:[email protected]">[email protected]</a> 获取帮助。您也可以尝试 <a href="http://anqicms.cn" rel="nofollow">anqicms.cn</a>。

At this point, users can directly click on these links and email addresses.

2.urlizetruncFilter: Elegant display of long URLs

When the text contains a particularly long URL, displaying the full link directly may destroy the aesthetic beauty of the page layout.urlizetruncFilter isurlizeOn the basis of this, an truncation feature has been added, which allows you to specify the maximum display length of the link text. If the length of the original URL string exceeds the value you set, it will be truncated and a suffix will be added at the end....Thus, the page remains neat.

Working principle: urlizetruncWithurlizeThe core recognition mechanism is the same, but it has an additional parameter to control the display length. You need to provide a number representing the maximum number of characters for the link text.

Example Usage:Assuming your article contains a very long URL:这是一个很长的链接，指向了我们的产品页面：https://en.anqicms.com/products/category/detail/long-product-name-with-many-words.html，欢迎查看。

If you want to truncate this link to display a maximum of 30 characters (including),...), you can use it in the template like this.urlizetruncFilter:

{# 假设 articleContent 包含上述长链接文本 #}
{{ articleContent|urlizetrunc:30|safe }}

Effect display:After rendering to the page, you will see a more concise link displayed:

这是一个很长的链接，指向了我们的产品页面：<a href="https://en.anqicms.com/products/category/detail/long-product-name-with-many-words.html" rel="nofollow">https://en.anqicms.com/products/categ...</a>，欢迎查看。

This preserves the link's availability while avoiding the impact of long links on page layout.

The actual application in the AnQi CMS template

These filters can be used at any place where text content needs to be output in the AnQi CMS template, such as:

  • Article details page (tag-archiveDetail.md)In displaying the document content (Content) or document description (Description).
    
<div class="article-content">
    {{ archive.Content|urlize|safe }}
</div>
  • Category details page (tag-categoryDetail.md)In displaying the category description (Description) or category content (Content).
    
<p class="category-description">
    {{ category.Description|urlize|safe }}
</p>
  • Single page detail page (tag-pageDetail.md): In displaying single page content (Content) or single page description (Description).
    
<div class="page-content">
    {{ page.Content|urlizetrunc:50|safe }}
</div>
  • Other custom text fieldIf you add custom text fields in the background content model and expect these fields to contain URLs, you can also apply these fields tourlizeorurlizetruncFilter.

Important reminder:definitely remember inurlizeorurlizetruncadd after the filter|safethe filter. This is becauseurlizeThe variants generated are HTML code, and for security reasons, the template engine of Anqi CMS defaults to escaping all output content (i.e., converting<Converted to&lt;Prevent Cross-Site Scripting (XSS) attacks.|safeThe filter explicitly tells the template engine that this content is safe HTML, which does not require escaping and can be rendered directly.

Summary

PassurlizeandurlizetruncThese two simple yet powerful filters greatly simplify the management of URL text in the website content of Anqi CMS.They not only enhance the website user experience, making the content more interactive, but also help operators balance the readability of the content with certain SEO considerations.In daily operations, flexibly using these filters can make your website content management more efficient and professional.

Common Questions (FAQ)

Q1: Why did I useurlizethe filter, but the page still displays plain text instead of clickable links?

A1:This is usually because you forget tourlizeadd after the filter|safeFilter. The template engine of Anqi CMS defaults to escaping all output content to prevent potential security risks (such as XSS attacks).urlizeThe filter generates HTML code (<a>tag), if not added|safethese<a>The label itself will also be escaped as plain text, causing the link to be unclickable. Make sure your code is similar to.{{ 您的内容变量|urlize|safe }}.

Q2:urlizeDoes the filter support the recognition and conversion of Chinese URLs?

A2: urlizeFilter mainly relies on recognizing URL protocols (such ashttp:///https://) and structure (such aswww.[en] for domain suffixes, etc.). For URLs containing Chinese paths or parameters, as long as their overall structure conforms to the URL specification and has been URL encoded, theoreticallyurlizeThe filter can identify and convert it to a link. However, when displayed in actuality, especially when usingurlizetruncWhen truncating, the truncation effect of URLs mixed with Chinese and English may need to be adjusted according to the specific situation to ensure aesthetics and readability.

Q3:urlizeAll links generated by the filter are accompanied byrel="nofollow"[en] Can I customize or remove this attribute?

A3: urlize[en] The filter adds the generated link automatically for default SEO considerations (to prevent weight loss)rel="nofollow"If your operational strategy requires removingnofollowproperties or adding other custom properties, then throughurlizeThe filter itself cannot be configured directly. In this case, you need to consider manually writing HTML links in the template, or utilizing other features of the Anqi CMS backend (such as "anchor text" management, if it supports more flexible link attribute configuration), rather than relying on it completelyurlizeThe filter performs automatic processing.