In website content operation, we often encounter such situations: long URLs or email addresses appear in the article body, sidebar, or list page.These long links not only affect the page appearance, but may also disrupt the layout and reduce the user's reading experience.To solve this problem, Anqi CMS provides a powerful and flexible template filter, among whichurlizeandurlizetruncThis is the tool designed specifically for this purpose.

Today, let's delve into it in depth.urlizetruncFilter, especially whether it automatically adds an ellipsis (…) after truncating the link text, which is a commonly asked question.

Understanding the display challenges of link text.

In its raw form, a URL string likehttps://en.anqicms.com/anqicms-features-and-benefits-for-enterprise-websitesThis may take up a lot of space on the page. Although it is still text, from the perspective of user experience, it is neither friendly nor beautiful.If these texts could be automatically converted into clickable links and controlled for display length, it would undoubtedly greatly enhance the professionalism and user satisfaction of the website.

The AnQi CMS template engine supports filters similar to Django syntax, which makes it very easy to handle such problems. First,urlizeThe filter can intelligently identify URLs or email addresses in text and convert them to standard HTML<a>Labels to 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 point,urlizetruncThe filter comes into play.

In-depth explorationurlizetruncFilter: Automatic addition of ellipses

urlizetruncThe core function of the filter is tourlizeOn the basis of this, it further provides the function of truncating link text. It can not only convert URLs or email addresses in the text into clickable links, but also truncate the links according to the specified length,Display textPerform 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 (…) after truncating the link text.

You do not need to manually add an ellipsis at the end of the truncated text. When the display text of the original link exceeds the number of characters you haveurlizetruncWhen a 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 seamless and consistent user experience.

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

Display as a link text (including ellipsis) up to 15 charactersurlizetruncFilter:

{# 原始文本中包含一个长链接 #}
{% 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 displayed text of the link (here is the actual URL string) to about 15 characters and add at the end...Make it concise and easy to understand. It is important to note,|safeThe filter is indispensable here, it tells the template engine that the content you output is safe HTML, which 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 ellipsis addition mechanism brings great convenience to website operators:

  1. Visual tidiness:Avoided long links from bursting the page layout, keeping the content area consistent and beautiful.
  2. User Experience:Users can immediately tell that the link has been shortened and know that clicking on it will jump to the full page, reducing confusion.
  3. Development efficiency:No need to manually write complex logic to determine whether to truncate, when to add ellipses, which greatly simplifies the template code.
  4. Content Consistency:The display style of the truncated link remains consistent regardless of its length.

By cleverly usingurlizetruncFilter, you can easily implement elegant link display on websites built with Anqi CMS, whether it is in article summaries, comment sections, or other places where links need to be displayed, it can maintain the professionalism and cleanliness of the page.

Summary

Of Security CMSurlizetruncThe filter is a very practical tool, it can not only automatically convert URLs and email addresses in text to clickable links, but also intelligently truncate the display text of the links when you specify a length limit, andAutomatically add ellipses (…)This greatly simplifies the website content layout work, improving user experience and the overall beauty of the page.


Frequently Asked Questions (FAQ)

1.urlizeandurlizetruncWhat are the differences between filters?

urlizeThe filter is mainly used to identify URLs or email addresses in text and automatically wrap them in HTML's<a>In the tag, it makes it clickable. It does not limit or truncate the length of the displayed text of the link. AndurlizetruncThe filter is thenurlizeOn the basis of the original function, it has added control over the length of the displayed text of the link.You can specify a maximum length with a 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 useurlizetrunca number for the filter (for exampleurlizetrunc:15When this number is included, it is with an automatically added ellipsis (…).This means that if you specify 15 characters, the actual display link text content (excluding ellipsis) is about 12 characters, plus 3 characters of ellipsis, totaling 15 characters of display length.

3. If I don't want to display an ellipsis when truncating a link, is there another method?

urlizetruncThe design philosophy is to clearly indicate that the content has been truncated when abbreviated, 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, such as using firstsliceortruncatecharsThe filter truncates the original URL string (these filters do not automatically add ellipses) and then manually wraps it in<a>tags, or applies them to the truncated string.urlizeFilter. This will slightly increase the complexity of the template, losingurlizetruncconvenience.