In the daily content operation of AnQi CMS, we all know that the neatness 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 the page layout due to long URLs is a common challenge.Secure CMS provides a variety of practical template filters, among whichurlizetruncThe filter is a powerful tool for processing URL display. It can not only intelligently convert naked links or email addresses 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, keeping 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 the text (whetherhttp:///https://starting with a complete link, orwww.domains starting with, even pure domain names and email addresses), and wrap them in the following withrel="nofollow"properties<a>Tags within, this is a very considerate default setting for SEO friendliness.What is also unique about it is that it allows us to truncate the length of the link text after conversion.

UseurlizetruncThe filter is very intuitive, just add it after the template variable|urlizetrunc:数字it is. For example,{{ obj|urlizetrunc:15 }}The URL will be displayed with a maximum of 15 characters, with an ellipsis replacing the rest.This method is particularly useful for displaying link summaries, such as in article lists, friend link blocks, or comment content, it can effectively save space and enhance the visual effect.

Mechanism for calculating the truncation length of non-Latin character URLs

While usingurlizetruncWhen a filter processes a URL containing Chinese or other non-Latin characters (such as Japanese or Korean), a common question is: 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 bytes or by characters?

It is commendable that the AnQi CMSurlizetruncThe filter is, when calculating the truncation length,calculated according to the number of charactersThis means that regardless of whether it is an English letter, a number, or a Chinese character, it is regarded 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 multiple languages, avoiding confusion or incomplete truncation due to byte differences.

For example, a container that includeshttps://www.安企CMS.com/产品详情The URL, if usedurlizetrunc:15The filter will calculate 15 characters from the beginning of the link (including Chinese, English, and punctuation marks), and add an ellipsis after the 15th character.This 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 example, whether it is English letters or Chinese characters, in the calculationurlizetrunc:15orurlizetrunc:25It will be treated as a unit of character. The final output will be truncated according to the specified number of characters and appended at the end....At the same time, ensure<a>the correct generation of tags.

Practical tips for improving user experience

In order to give full play tourlizetruncIts effectiveness, there are some tips worth noting:

  1. Choose an appropriate truncation length:There is no one-size-fits-all length. In places with limited space such as list pages or sidebars, you can choose a shorter length (such as 15-25);In the text, if the link is long, but you still want the user to understand its general content, you can appropriately relax the length.
  2. Combined with context:For those users who can see the full URL detail page after clicking, it can be considered not to useurlizetruncdirectlyurlizeor not to process it to retain the full link information.
  3. Make good use of|safeFilter:due tourlizetruncit will generate HTML code (<a>Label), when outputting to the page, to ensure that the browser correctly parses these HTML rather than displaying them as plain text, it must be followed by|safefilter.
  4. Perform multi-device testing:Different screen sizes and device resolutions may affect the user's perception of truncated links.After applying in practice, it is essential to test on various devices to ensure a good user experience in all scenarios.

In summary,urlizetruncThe filter is one of the indispensable tools for content operation of Anqi CMS.By precisely mastering its truncation length calculation method for non-Latin characters, we can more confidently manage the display of website links and provide users with a beautiful and efficient browsing experience.

Frequently Asked Questions (FAQ)

1.urlizetruncandurlizeWhat are the differences between filters?

urlizeThe filter will convert URLs or email addresses in text to clickable hyperlinks without any length truncation. It will display the full link text. AndurlizetruncthenurlizeOn the basis of the function, it has added the feature of length truncation, which will truncate the display text of the hyperlink to the specified character length and add an ellipsis at the end....To keep the page neat.

2.urlizetruncDoes the truncation length specified by the filter include an ellipsis?...What is the length?

Yes,urlizetruncThe length specified by the filter isincludeThe ellipsis displayed at the end is...This means that if you set the truncation length to 15, the final text displayed to the user (including the 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 will it be handled?

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