In website content operation, we often need to display various hyperlinks in articles, comments, or list pages.These links may be pointing to other content within the site, external resources, or the contact email of the user.However, some excessively long links may not only destroy the page layout and affect the aesthetics, but may also reduce the user's reading experience.Especially in limited display space, long URLs can make the content look disorganized.

幸运的是，AnQiCMS 提供了一个非常实用的模板过滤器urlizetruncIt can help us intelligently control the display length of hyperlink text, making the page look more professional and cleaner.

What is AnQiCMS?urlizetruncFilter?

In simple terms,urlizetruncThe filter is a powerful tool built into the AnQiCMS template engine, which mainly serves to automatically identify URL strings (including email addresses) in text and convert them into clickable HTML<a>Label.

WithurlizeFilter (only converts links to clickable forms) is different,urlizetruncAn additional parameter is provided to allow us to specify the maximum display length of the hyperlinked text after conversion. When the original link text exceeds this specified length, the excess part will be intelligently truncated and appended with...To indicate omission. While the actual link address (hrefThe properties) remain unchanged, ensuring that users can still access the correct page.

Why useurlizetrunc?

Imagine a news list or comment section where a long unformatted URL appears. The entire page would look very cluttered. UsingurlizetruncWe can easily solve these problems, bringing various benefits:

  • Enhance the beauty and user experience of the page:A tidy page layout is the key to attracting users.urlizetruncCan avoid the long URL text from expanding the container, destroying the layout, and keep the content area uniform and coordinated.Users can also see the concise representation of the link clearly while browsing, without being disturbed by a long string of characters.
  • Save space, optimize content presentation:In spaces with limited space such as the sidebar, article summary, or mobile view, truncating links is particularly important.It can effectively convey link information within limited space while maintaining the readability of the page.
  • Maintain SEO-friendliness:It is worth noting that,urlizetruncIt simply truncates the hyperlinks:text of the hyperlinkbehind it,hrefThe property is still the complete original URL. This means that search engines can still obtain complete link information during crawling and will not have a negative impact on the website's SEO.

How to control the truncation length of hyperlink text?

UseurlizetruncThe filter for controlling the truncation length of hyperlink text is very intuitive. It takes an integer parameter representing the maximum number of characters you want to display for the hyperlink text.

Basic usage: {{ 变量 | urlizetrunc:数字 }}.

For example, if you have a variablemyContentcontains the text 'Please visit my website:'https://en.anqicms.com/a-very-long-and-descriptive-url-example.html', and you want the link text to display a maximum of 30 characters, you can write it like this:

<p>{{ myContent|urlizetrunc:30 }}</p>

This will be the output result:

<p>请访问我的网站：<a href="https://en.anqicms.com/a-very-long-and-descriptive-url-example.html" rel="nofollow">https://en.anqicms.com/a-ve...</a></p>

It can be seen that the original URL has been recognized and converted into a clickable link, and the displayed text has been truncated to the specified length.

Process content blocks containing HTML:

If your content variable may contain HTML tags (for example, content obtained from a rich text editor), and you wanturlizetruncIt can safely handle the URLs without damaging the HTML structure, then you need to combinefilterTags andsafeFilter used together.safeThe filter tells the template engine that this content is safe and does not need to be HTML escaped.

Suppose you have a text block containing HTML structure and links:

{% filter urlizetrunc:20|safe %}
<p>了解更多：<a href="https://en.anqicms.com/features/advanced-seo-tools.html">AnQiCMS 的高级SEO工具非常强大！</a></p>
<p>联系我们：[email protected]</p>
{% endfilter %}

In this example,urlizetrunc:20The identified link text will be truncated to 20 characters,|safeand ensurefilterThe internal<p>Tags and<a>the tag will not be escaped into entity characters, thus rendered normally as HTML structure. The output will be similar to:

<p>了解更多：<a href="https://en.anqicms.com/features/advanced-seo-tools.html" rel="nofollow">AnQiCMS 的高级SEO工...</a></p>
<p>联系我们：<a href="mailto:[email protected]">[email protected]</a></p>

Choose an appropriate truncation length:

It is very important to choose a suitable truncation length.The short length may cause the link to lose contextual information, making it difficult for users to judge the content of the link; a long length loses the significance of truncation.Generally, 15 to 30 characters is a relatively balanced choice, depending on your design requirements and content type.