In website content operation, we often need to handle various links, whether they are external resources cited in articles or websites left in user comment sections.However, when these links are too long, they may not only destroy the overall layout of the page and affect its beauty, but may also reduce the user's reading experience.urlizeandurlizetruncThey can help us manage and display these long or unformatted URLs elegantly.

Say goodbye to manual copy and paste:urlizeThe magic of automatic linking

Imagine that you are writing a piece of content that requires referencing a large number of external websites or email addresses.How cumbersome it would be if you had to manually copy the URL and then add it as a hyperlink through an editor.It is not only unattractive but also not convenient to click on the URLs left by users in the comment section as plain text.

AnQiCMSurlizeThe filter is designed to solve these problems. Its core function is to extract plain text URLs from the text (includinghttp:///https://links that start withwww.The links at the beginning, even the naked domain names), as well as email addresses, are automatically converted into clickable HTML<a>Label.

For example, if you have a piece of text containing web addresses:

<p>欢迎访问我们的网站：https://en.anqicms.com，或通过邮箱联系我们：[email protected]。</p>

AfterurlizeFilter processed, with|safeDeclare content safety, it will become:

<p>{{ "欢迎访问我们的网站：https://en.anqicms.com，或通过邮箱联系我们：[email protected]。"|urlize|safe }}</p>

The output HTML will be:

<p>欢迎访问我们的网站：<a href="https://en.anqicms.com" rel="nofollow">https://en.anqicms.com</a>，或通过邮箱联系我们：<a href="mailto:[email protected]">[email protected]</a>。</p>

As you can see,urlizeNot only did it automatically create links, but it also intelligently added links for external links.rel="nofollow"This property is very friendly to SEO. It tells search engines not to pass 'link weight' to these external links, which helps maintain the weight distribution of the website itself.

In addition,urlizeSupports an optional parameter to control the escaping of link content. By default, the link text is escaped as HTML entities (equivalent totrue), such as in URLs."will be converted to&quot;，以确保在HTML中正确显示。如果你需要展示原始的URL字符串而不想进行转义，可以显式地设置为EnglishfalseThis is not recommended as it may bring potential security risks.

Elegantly truncate long URLs:urlizetruncAesthetics

urlizeThe filter is powerful, but it will display the full link text as is when handling ultra-long URLs.In some cases, this may lead to the page layout being stretched, or the link text occupying too much space, especially on mobile devices, which will seriously affect the user experience.

At this time,urlizetruncThe filter comes into play.urlizetruncfunctionality isurlizeSimilar, but it adds a key feature: you can specify the maximum display length of the link text. When the displayed text of the original URL exceeds this length,urlizetruncIt will truncate and add at the end...at the bottom layerhrefthe property still retains the complete URL.

For example, a long URLhttps://en.anqicms.com/category/anqi-cms-features-and-benefits/anqi-cms-template-development-guideif we want it to only display the first 15 characters:

<p>{{ "访问此页面了解更多：https://en.anqicms.com/category/anqi-cms-features-and-benefits/anqi-cms-template-development-guide"|urlizetrunc:15|safe }}</p>

The output HTML might be:

<p>访问此页面了解更多：<a href="https://en.anqicms.com/category/anqi-cms-features-and-benefits/anqi-cms-template-development-guide" rel="nofollow">https://www.anqicms...</a></p>

Please note,urlizetruncThe part that is truncated is:<a>Visible text within the tag, not the actual:hrefLink.User will still be redirected to the full link address when clicked.This maintains the page's cleanliness while also considering the practicality of the links.By reasonably setting the truncation length, we can ensure that the page maintains good visual effects on different devices.

Application scenarios and practical recommendations

These two filters are widely used in the daily management and operation of website content:

  1. User comments and message area: The comments submitted by users may contain various formats of links. UseurlizetruncCan avoid malicious or redundant links from disrupting the page layout, while ensuring the clickable nature of legal links.
  2. Article content citation: When citing external materials in the body of the article,urlizeCan quickly convert URLs to links, saving editing time. If the link itself is very long,urlizetruncit can maintain the fluidity of the paragraph and avoid interruptions in reading.
  3. Resource list or reference materialIn displaying a series of external resources or references, especially when the title space is limited,urlizetruncIt can make the list more organized and easy to browse.
  4. Social sharing and external linksWhen it is necessary to display various social media links or partner links at the bottom or sidebar of the page, these two filters can help quickly generate standard links.nofollowLink, and control its display length.

In summary, AnQiCMS'surlizeandurlizetruncThe filter is a powerful tool to improve content operation efficiency and optimize user experience. By巧妙运用 them, we can easily manage the links on the website, making the pages both beautiful and practical.

Common Questions (FAQ)

1. Why did I useurlizeorurlizetruncFilter, but the original HTML tags (such as<a href="...">...</a>) are still displayed on the page instead of clickable links?

This is usually because you forgot to add|safeEnglish. AnQiCMS (and many template engines) defaults to escaping all output content to HTML entities for security reasons, to prevent XSS attacks.urlizeorurlizetruncGenerate<a>After the HTML code of the label, if missing|safeThese HTML codes will also be escaped into strings for display, rather than being parsed as actual links by the browser. Therefore, make sure your template code is{{ content_variable|urlize|safe }}or{{ content_variable|urlizetrunc:number|safe }}.

2.urlizeandurlizetruncFilter can correctly handle URLs containing Chinese or other non-Latin characters?

Yes, AnQiCMS's template engine is based on Go language and has good support for UTF-8 encoding. Therefore,urlizeandurlizetruncFilter can correctly identify and handle URLs containing non-Latin characters such as Chinese, Japanese, and Korean.They will encode these URLs into a format recognizable by the browser (such as percent-encoding) and create the correct links.

3.urlizeandurlizetruncFilter default added to therel="nofollow"Can the property be removed or modified?

urlizeandurlizetruncThe filter is designed to simplify external link processing and follow SEO**practices, so it will automatically add to the generated external links by default.rel="nofollow"Properties. If you have special requirements, wish to remove or modify this property (such as the need to pass link weight), these filters do not provide direct parameters for control.nofollow。You may need to use the following methods:

  • Manually create links: For links where you explicitly want to pass weight, you can bypass the filter and manually write in the template<a>Label, and set as neededrelproperties.
  • Front-end JavaScript processing: Remove or modify these after the page is loaded with JavaScriptrelProperty, but this may produce uncertainty in SEO effects, and is not a recommended long-term solution.
  • Backend custom logic：If you are a developer or have the ability to do secondary development, you can preprocess the URLs in the content before template rendering to achieve more fine-grained control.