In the daily content operation of AnQi CMS, we all know that the tidiness and readability of the page content are crucial to the user experience.Especially when an article or list page contains a large number of URLs, how to elegantly display these links while avoiding the destruction of page layout due to overly long links is a common challenge.urlizetruncThe filter is a powerful tool for processing the display of URLs. It can not only intelligently convert naked links or email addresses in text into clickable HTML hyperlinks, but its more powerful feature is that it can truncate the display text of these links according to the specified length and end with an ellipsis....End, keep the page layout beautiful and unified.

urlizetruncFilter: Intelligent link processing and length control

urlizetruncThe core function of the filter is reflected in two aspects: first, it can automatically identify URLs in text (whether it is a complete link starting withhttp:///https://or notwww.The domain name at the beginning, even pure domain names and email addresses), and wrap it in a tag withrel="nofollow"attributes<a>Tags within, this is a very considerate default setting for SEO friendliness.Next, and this is also its uniqueness, lies in the fact that it allows us to truncate the length of the linked text after conversion.

UseurlizetruncThe filter is very intuitive, just add it after the template variable|urlizetrunc:数字and it is. For example,{{ obj|urlizetrunc:15 }}Attempt to display the URL as up to 15 characters, with an ellipsis used for the remainder.This method is especially useful when displaying link summaries, such as in article lists, friendship link blocks, or comment content. It can effectively save space and enhance the visual effect.

The truncation length calculation mechanism for non-Latin character URLs

When usingurlizetruncFiltering URLs that contain Chinese or other non-Latin characters (such as Japanese, Korean, etc.) often raises a common question: how does it calculate the truncation length?For example, the number of bytes occupied by a Chinese character is usually greater than that of an English character. Does the system calculate length by byte count or character count?

It is commendable that the Anqi CMSurlizetruncThe filter is when calculating the truncation length,It is calculated according to the number of characters.This means that whether it is an English letter, a number, or a Chinese character, each one is treated as an independent unit (i.e., a character) when counting the total length.This character-based calculation method ensures visual consistency in URL display length across multilingual environments, avoiding chaotic display or incomplete truncation due to byte differences.

For example, a content containinghttps://www.安企CMS.com/产品详情The URL, if usedurlizetrunc:15The filter will count 15 characters (including Chinese, English, and punctuation) from the beginning of the link and add an ellipsis after the 15th character.Such a processing method allows our URL to be presented elegantly in Chinese environments without worrying about truncation problems caused by multi-byte characters.

{# 假设我们有一个包含中文的URL变量: url_with_chinese = "https://www.安企CMS.com/产品详情页面的长链接" #}

{# 截断长度为15，按字符数计算 #}
<p>原始URL: https://www.安企CMS.com/产品详情页面的长链接</p>
<p>截断后: {{ "https://www.安企CMS.com/产品详情页面的长链接"|urlizetrunc:15|safe }}</p>

{# 假设我们有一个包含英文字符的长URL: long_english_url = "https://en.anqicms.com/a-very-long-product-detail-page-url" #}

{# 截断长度为25，按字符数计算 #}
<p>原始URL: https://en.anqicms.com/a-very-long-product-detail-page-url</p>
<p>截断后: {{ "https://en.anqicms.com/a-very-long-product-detail-page-url"|urlizetrunc:25|safe }}</p>

{# `urlizetrunc`也可以直接用于长文本内容中，它会自动识别并处理所有URL #}
{% filter urlizetrunc:20|safe %}
请访问我们的官网：https://en.anqicms.com/了解更多信息，或者查看中文教程：https://www.安企CMS.com/入门指南，邮件联系我们：[email protected]。
{% endfilter %}

In the above examples, whether it is English letters or Chinese characters, in the calculationurlizetrunc:15orurlizetrunc:25The output will be truncated according to the specified number of characters and a character unit. The final output will be truncated according to the specified number of characters and a character unit....at the same time, ensuring<a>the correct generation of tags.

Improve User Experience with Practical Tips

To make full use ofurlizetruncThe utility, there are several tips worth noting:

  1. Choose an appropriate truncation length:There is no one-size-fits-all length.In spaces with limited space such as list pages or sidebars, you can choose a shorter length (such as 15-25); in the main text, if the link is very long but you still want the user to understand its general content, you can appropriately放宽 the length.
  2. Combine with context:For those detail pages where users can see the complete URL after clicking, it is considered not to useurlizetruncand use directlyurlizeor not to process, in order to retain complete link information.
  3. Use wisely|safeFilter:Due tourlizetruncit will generate HTML code (<a>Label），in order to make the browser correctly parse these HTML instead of displaying them as plain text, it is necessary to add a comma and a quote after them|safeFilter.
  4. Perform multi-device testing:Different screen sizes and device resolutions may affect the perception of truncated links.After practical application, it is essential to test on various devices to ensure a good user experience in all scenarios.

In short,urlizetruncThe filter is one of the indispensable tools in the security CMS content operation.By precisely mastering the way it calculates the truncation length for non-Latin characters, we can more confidently manage the display of website links, providing users with an aesthetically pleasing and efficient browsing experience.

Common Questions (FAQ)

1.urlizetruncandurlizeWhat are the differences between filters?

urlizeThe filter will convert URLs or email addresses in the text into clickable hyperlinks without any length truncation. It will display the full link text.urlizetruncthenurlizeBased on the functionality, it has added the feature of length truncation, which will truncate the display text of the hyperlink to the character length you specify and add an ellipsis at the end....To keep the page tidy.

2.urlizetruncThe truncation length specified by the filter includes an ellipsis?...What is the length?

Yes,urlizetruncThe length specified by the filter isincludingof the ellipsis displayed at the end...English.This means that if you set the truncation length to 15, the total length of the link text displayed to the end user (including ellipsis) will not exceed 15 characters.This helps you control the display space more accurately.

3. If the text contains non-URL or email addresses,urlizetrunchow should it be handled?

urlizetruncThe filter will only convert and truncate strings that it recognizes as URLs or email addresses.The parts of the text that do not conform to URL or email formats will be output as is and will not be affected by this filter.This makes it very suitable for handling text areas containing mixed content.