In website operation, we often need to embed various links in the content, whether they point to in-site resources or external references.Manually converting plain text links into clickable hyperlinks is not only inefficient but also prone to errors.It is more important that standardized link handling is crucial for search engine optimization (SEO) and user experience.urlizeandurlizetruncThese filters can intelligently identify URLs and email addresses in text and automatically convert them to standard and SEO-friendly<a>Label, greatly simplifies this process.

Automatic recognition and conversion:urlizeFilter

urlizeThe core function of the filter is to automatically scan the text content, identify the strings that match the URL or email address format, and then wrap them in HTML's<a>Tags in. This makes the links on the page clickable without manually adding HTML code, providing great convenience to visitors.

This filter can not only identifyhttp://orhttps://Complete URLs starting with also supportwww.URLs starting with even some bare domain names such asanqicms.com) It can also automatically convert email addresses in text such as[email protected]) tomailto:links.

A noteworthy detail is,urlizeThe filter generates,<a>Labels are automatically added for it,rel="nofollow"Property.This is particularly useful for handling external links, as it tells search engines not to pass 'weight' to these links, thereby helping us better manage the SEO strategy of the website.

Below is a simple example showing,urlizeHow the filter works:

{# 假设我们有一段包含纯文本URL和邮箱的文字 #}
{% set content = "请访问我们的官网：https://en.anqicms.com，或者发送邮件到 [email protected]" %}

{# 使用 urlize 过滤器进行转换，并使用 |safe 确保HTML代码被正确渲染 #}
<p>{{ content|urlize|safe }}</p>

This code is rendered by AnQiCMS template and the output HTML will be like this:

<p>
  请访问我们的官网：<a href="https://en.anqicms.com" rel="nofollow">https://en.anqicms.com</a>，
  或者发送邮件到 <a href="mailto:[email protected]">[email protected]</a>
</p>

The plain text URL and email addresses have been converted to clickable links withnofollowattributes.

urlizeThe filter also has an optional parameter to control whether the output link content is HTML entity escaped. When set tourlize:trueWhen, the filter ensures that special characters (such as quotes) in the URL text are correctly converted to HTML entities to avoid parsing errors in the browser.

{% filter urlize:true|safe %}
这个链接有特殊字符：www.anqicms.com/path?param="value"
{% endfilter %}

In most cases, combining|safeusing a filterurlizecan achieve the desired effect, that is, allowing the browser to correctly parse the generated<a>.

elegantly truncating the link: urlizetruncFilter

In some cases, the URL in the content may be very long, which may affect the appearance and layout of the page if displayed in full. At this point,urlizetruncthe filter comes into play. It is inurlizeBased on that, the feature of link text truncation has been added.

urlizetruncThe filter accepts a numeric parameter to specify the maximum display length of the link text. If the original link text exceeds this limit, it will truncate the text at the specified length and add...To indicate omission. This makes the page better control the visual effects while maintaining the clickable links.

The followingurlizetruncExample of using a filter:

{# 假设有一个非常长的链接 #}
{% set long_url_content = "请访问我们超长的链接：https://en.anqicms.com/path/to/a/very/very/long/page/with/many/parameters?id=12345&category=tech" %}

{# 使用 urlizetrunc 过滤器，并指定链接文本最大显示长度为 30 #}
<p>{{ long_url_content|urlizetrunc:30|safe }}</p>

After the template is rendered, the output HTML looks like this:

<p>
  请访问我们超长的链接：<a href="https://en.anqicms.com/path/to/a/very/very/long/page/with/many/parameters?id=12345&category=tech" rel="nofollow">https://www.anqicms....</a>
</p>

The actual URL is still complete, but the text displayed on the page is intelligently shortened, saving space while maintaining an overview of the information.

Application scenarios and **practice

urlizeandurlizetruncFilters are widely used in website content operations:

  • Dynamic content display such as article text, product descriptions, and user comments:These areas often contain user input or automatically captured text, which may include various forms of links.Use these two filters to ensure that all links are correctly identified and converted to clickable status.
  • Improve user experience:Visitors do not need to copy and paste and can directly click to jump, simplifying the operation process.
  • Maintain the cleanliness of the page:Especially,urlizetruncCan effectively avoid long link text from breaking the page layout and maintain the visual balance of the content.
  • SEO friendly:Automatically addedrel="nofollow"The attribute helps prevent external links from dispersing the internal weight of the website, making the SEO strategy more controllable.

When using these two filters, remember to combine them.|safeBecause the filter.urlizeandurlizetruncWill generate HTML code, the AnQiCMS template engine defaults to escaping output for security reasons, if not|safegenerated,<a>The tag itself will be displayed as plain text, rather than an actual hyperlink.

By mastering the use ofurlizeandurlizetruncThe filter allows us to make websites built with AnQiCMS more intelligent, user-friendly, and compliant with modern Web standards.

Frequently Asked Questions (FAQ)

1. Why did I useurlizeorurlizetrunc, but the page only showed the original text and did not generate links?

This is usually because you forgot to add|safeFilter. The AnQiCMS template engine defaults to escaping all output content to prevent XSS attacks.urlizeandurlizetruncThe one generated is an HTML tag, if not using|safeExplicitly tell the template engine that this content is "safe" HTML, it will then<Escape to&lt;,>Escape to&gt;Causes the link to be displayed as plain text. The correct usage is{{ 变量|urlize|safe }}.

2.urlizeandurlizetruncThe filter automatically adds to all links generatednofollowShould I add the attribute?

Yes, according to the design of AnQiCMS, these two filters are used to convert URLs in the text to<a>Labels are automatically added for it,rel="nofollow"Property. This is a common practice for SEO, especially when linking to external websites or user-generated content (such as comments), which can avoid unnecessarily