In website content operation, we often encounter such situations: long URLs or email addresses appear in the main text, sidebar, or list page.These long links not only affect the page appearance, but may also disrupt the layout and reduce the user reading experience.urlizeandurlizetruncIt is a tool specifically designed for this purpose.

Today, let's delve into it in depthurlizetruncFilter, especially whether it will automatically add an ellipsis (…) after truncating the link text, is a common concern.

Understanding the display challenge of linked text

An original URL string, like, without any processinghttps://en.anqicms.com/anqicms-features-and-benefits-for-enterprise-websitesOn the page, it may take up a lot of space.Although it is still text, from the perspective of user experience, it is neither friendly nor aesthetically pleasing.If these texts can be automatically converted to clickable links and their display length can be controlled, it will undoubtedly greatly enhance the professionalism and user satisfaction of the website.

The template engine of AnQi CMS supports filters similar to Django syntax, making it very simple to handle such issues. First,urlizeThe filter can intelligently identify URLs or email addresses in text and convert them to standard HTML<a>Tags make them clickable. This is a very practical basic feature.

However, simply making the link clickable is not enough, if the link itself is very long, it can still affect the page layout. At this time,urlizetruncThe filter comes into play.

In-depth discussionurlizetruncFilter: Automatic addition of ellipsis

urlizetruncThe core function of the filter is,urlize的基础上，进一步提供链接文本的截断功能。它不仅能将文本中的URL或邮箱地址转化为可点击的链接，还能根据您指定的长度，对链接的text of the hyperlinkPerform intelligent truncation.

Then, let's go back to our original question:urlizetruncAfter truncating the link text, will the filter automatically add an ellipsis (…)?

The answer is: yes,urlizetruncThe filter will automatically add an ellipsis (…) to the truncated link text for you.

You do not need to manually add an ellipsis at the end of the truncated text. When the display text length of the original link exceeds the length you specifyurlizetruncWhen the specified number is reached, the filter will truncate it and automatically append an ellipsis at the end to clearly inform the user that the link text has been shortened.This ellipsis is part of its built-in feature, achieving a seamless and consistent user experience.

For example, if you have a very long URL: https://en.anqicms.com/docs/template-tags/filters/urlizetrunc

and hope to display it as a link text of no more than 15 characters (including ellipsis), you can use it like thisurlizetruncFilter:

{# 原始文本中包含一个长链接 #}
{% set long_url_text = "请访问我们的文档页面：https://en.anqicms.com/docs/template-tags/filters/urlizetrunc 获取更多信息。" %}

{# 使用 urlizetrunc 截断为 15 个字符，并使用 safe 过滤器防止 HTML 转义 #}
<p>截断后的链接文本：{% filter urlizetrunc:15|safe %}{{ long_url_text }}{% endfilter %}</p>

The output of the above code will be similar to this:Please visit our documentation page:https://www.anqic... For more information.

As you can see,urlizetruncAutomatically truncate the display text of the linked text (here is the actual URL string) to about 15 characters and add it at the end...Make it concise and easy to understand. It is important to note,|safeFilter is indispensable here, it tells the template engine that the content you output is safe HTML that does not require additional escaping, so<a>the tags can be rendered normally.

Why is this important? Optimizing user experience and page tidiness

This automatic addition of ellipses mechanism brings great convenience to website operators:

  1. Visual tidiness:Avoided long links from breaking the page layout, keeping the content area consistent and aesthetically pleasing.
  2. User Experience:Users can immediately tell that the link has been shortened and know that clicking it will jump to the full page, reducing confusion.
  3. Development efficiency:No manual writing of complex logic is needed to determine whether to truncate and when to add ellipses, which greatly simplifies the template code.
  4. Content consistency:The display style of the truncated text remains consistent regardless of the length of the link.

By cleverly usingurlizetruncFilter, you can easily achieve elegant link display on the website built with Anqi CMS, whether it is in the article summary, comment section, or other places where links need to be displayed, it can maintain the professionalism and tidiness of the page.

Summary

Anqi CMS'surlizetruncFilter is a very practical tool, it not only automatically converts URLs and email addresses in text to clickable links, but also intelligently truncates the displayed text of the link when you specify a length limit.English adding ellipsis (…)This greatly simplifies the work of website content layout, improves user experience and the overall beauty of the page.

Common Questions and Answers (FAQ)

1.urlizeandurlizetruncWhat are the differences between filters?

urlizeFilter is used to identify URLs or email addresses in text and wrap them automatically in HTML tags<a>Label it, so that it becomes a clickable link. It does not limit or truncate the length of the link display text.urlizetruncThe filter is thenurlize的功能基础上，增加了对链接显示文本的长度控制。You can specify a maximum length with the parameter. If the link text exceeds this length, it will be truncated and an ellipsis (…) will be automatically added at the end.

2.urlizetruncDoes the filter count the ellipsis (…) when calculating the length?

Yes, when you areurlizetruncFilter a number (for example,urlizetrunc:15When this number, it includes the ellipsis (…) that is automatically added.This means that if you specify 15 characters, the actual displayed link text content (excluding the ellipsis) is about 12 characters, plus 3 characters of ellipsis, totaling 15 characters in the displayed length.

3. If I don't want the ellipsis to be displayed when truncating the link, is there another method?

urlizetruncThe design principle is to clearly indicate that the content has been shortened when truncated, so the ellipsis is its built-in behavior. If you really do not want to display the ellipsis and need to truncate the link text, you can consider using other filter combinations to achieve this, such as using firstsliceortruncatecharsFilter trims the original URL string (these filters do not automatically add ellipses) and then wraps it manually in the<a>tag, or applies it to the truncated stringurlizeFilter. But this will slightly increase the complexity of the template, losingurlizetruncconvenience.