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 damage the page layout and affect aesthetics, but may also reduce the user reading experience.Especially in limited display space, long URLs can make the content look disorganized.

luckyly, AnQiCMS provides a very practical template filterurlizetruncIt can help us intelligently control the display length of hyperlink text, making the page look more professional and fresh.

What is the AnQiCMS of?urlizetruncFilter?

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

withurlizeThe filter (which only converts links into clickable forms) is different,urlizetruncAn additional parameter has been provided to specify the maximum display length of the converted hyperlink text. When the original link text exceeds this specified length, the excess part will be intelligently truncated and appended with...For the sake of brevity. The actual link address (hrefattribute) remains unchanged to ensure that users can still access the correct page.

Why to useurlizetrunc?

Imagine, in a news list or comment section, if a long URL appears without any decoration, the entire page will look very cluttered. UseurlizetruncWe 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 long URL text from stretching the container, destroying the layout, and keeping the content area uniform and coordinated.Users can also see the abbreviated representation of the link clearly while browsing, without being disturbed by a long string of characters.
  • Save space, optimize content presentation:In areas with limited space such as sidebars, article summaries, or mobile views, 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 is just a truncation of the hyperlink:Display textbehind it,hrefThe attribute is still the complete original URL. This means that search engines can still retrieve the complete link information when crawling, which will not have a negative impact on the website's SEO.

How to control the truncation length of hyperlink text?

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

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>

As can be seen, the original URL is recognized and converted into a clickable link, while the text is truncated to the specified length.

Handle content blocks containing HTML:

If your content variable may contain HTML tags (such as articles retrieved from a rich text editor), and you wishurlizetruncYou need to combine in order to safely handle the URL without破坏 HTML structurefilterTags andsafeto use the filters together.safeThe filter tells the template engine that this content is safe and does not need to be HTML escaped.

Assume 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:20It will truncate the identified link text to 20 characters,|safeThen ensure thatfilterinternally<p>Tags and<a>The tag will not be escaped as an entity character, 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 an appropriate truncation length. A too short length can cause the link to lose contextual information, making it difficult for users to judge the content of the link.The meaning is lost when the length is too long. Usually, a balance is achieved with 15 to 30 characters, depending on the design requirements and content type.You can try and adjust multiple times based on the actual display effect to find the one that best matches your website style and users