So Outside Technology Security CMS
AnQiCMS
Online Demonstration

How to control the truncation length of the hyperlink text when using the AnQiCMS `urlizetrunc` filter?

Calendar 👁️ 62

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

Related articles

How does AnQiCMS automatically identify URLs or email addresses in text and convert them into clickable hyperlinks?

In the daily operation of websites, we often need to add various links in article content, such as URLs pointing to external resources, or email addresses for easy reader contact.Manually adding hyperlinks one by one is not only inefficient but also prone to errors.Fortunately, AnQiCMS provides very practical features that can intelligently identify URLs and email addresses in text and automatically convert them into clickable hyperlinks, greatly enhancing the efficiency and user experience of content editing.

2025-11-07

How to always display product prices (floating point numbers) with two decimal places in AnQiCMS templates?

When operating a product display website, you may often encounter situations where you need to display product prices accurately.A professional and user-friendly website often requires a unified display format for product prices, such as always retaining two decimal places, even for integer prices, which are automatically filled with `.00`. AnQiCMS with its flexible template system makes these details handling very convenient.

2025-11-07

What are the main differences between AnQiCMS's `date` and `stampToDate` filters when handling date data?

In AnQiCMS template development, displaying time data is an indispensable part, whether it is the publication time of articles, the update date of products, or the time records of user behavior, it needs to be presented to the user in a clear and readable manner.To meet the different time processing needs, AnQiCMS provides two core filters: `date` and `stampToDate`.

2025-11-07

How to format a 10-digit timestamp retrieved from the database into a custom date-time format in AnQiCMS template?

In website content display, we often encounter time data in a long string of numbers from the database, such as `1678886400`. This string of numbers, which is what we commonly call a timestamp, is very convenient for computers, but it seems cold and difficult to understand for users visiting websites.Fortunately, AnQi CMS provides us with a very convenient feature that can easily convert these original 10-digit timestamps into the date and time format we are accustomed to reading.

2025-11-07

Why does the AnQiCMS template default to escaping HTML code? How can HTML content be safely output?

When using AnQiCMS for template development, we may notice an interesting phenomenon: sometimes, the HTML code directly output in the template, such as a `<div>` tag, is not parsed by the browser into a visible area as expected, but is displayed exactly as it is, showing `&lt;div &gt; `such characters. This may be confusing, why does AnQiCMS default to escaping HTML code?How can we safely output the HTML content we want?--- ### One

2025-11-07

How to quickly split a comma-separated string into an array for traversal in AnQiCMS template?

In website content operation, we often encounter such situations: a content field stores a series of interconnected information, usually connected by commas.For example, an article may be associated with multiple tags ("SEO, website optimization, content marketing"), a product may have various color options ("red, blue, green"), or you may need to display a set of user-defined keywords.How to efficiently convert the comma-separated strings to traversable data structures when we need to display them one by one on the front-end page or perform more complex processing

2025-11-07

How to concatenate array elements obtained by traversing AnQiCMS templates with a specified separator into a string?

During the template creation process in Anqi CMS, we often encounter the need to concatenate a certain field from an array (or list) queried from the database using a specific symbol to form a continuous string for beautiful display on the page, such as connecting multiple tags (Tag) of an article or displaying all the characteristics of a product.The Anq CMS template engine supports syntax similar to Django templates, making it intuitive and flexible to handle such requirements.The core idea is to use the loop structure of the template engine to traverse the array

2025-11-07

How to determine if a number (such as article ID) can be evenly divided by a specific number in the AnQiCMS template?

In website content display, we often encounter some special requirements, such as wanting to apply different styles to specific elements in the list, or to make some distinctions based on the parity of the article ID.AnQiCMS is a powerful template engine, drawing inspiration from the excellent design of Django templates, and provides a simple and efficient way to handle these logic.Today, let's discuss a very practical feature in the template: how to determine if a certain number (such as the article ID) can be evenly divided by a specific number.

2025-11-07