In website content management, we often need to display various links on the page, whether it is the reference URL in the article or the external links submitted by users.However, these links may sometimes be very long, not only affecting the aesthetics of the page, but also possibly destroying the original layout, making the page look disorganized.urlizetruncIt can help us solve this problem elegantly, while keeping the long link clickable and presented in a concise and beautiful manner.

urlizetruncThe filter is specifically used to automatically convert URLs and email addresses in text to clickable HTML links. Similar to its sibling filterurlizebuturlizetruncThe unique feature lies in its ability to intelligently control the display length of the link text, and automatically add an ellipsis at the end when exceeding the specified length....This means that, regardless of the length of the original link, you can ensure that it occupies a preset, aesthetically pleasing length on the page without arbitrarily stretching the layout.

How to use in AnQiCMS templateurlizetruncFilter

UseurlizetruncThe filter is very intuitive, it is usually applied to text variables containing potential URLs or email addresses. Its basic usage is as follows:

{{ 文本变量 | urlizetrunc:长度 | safe }}

Let's analyze this expression one by one:

  • 文本变量This is usually text content containing links, such as paragraphs in the article body, abstracts, custom fields of content models, or user comments, etc.urlizetruncThis variable will automatically identify URLs and email addresses.
  • urlizetrunc:长度This is the core part of the filter.长度Is an integer value that defines the maximum number of characters that the link text can display. This length includes the number of characters occupied by the automatically added ellipsis. For example, if you set长度response for30，then a long link (such ashttps://www.example.com/very-long-and-descriptive-path/to/an-article.html) may only display the first 27 characters on the page, followed by....
  • |safe：In AnQiCMS template rendering mechanism, to prevent potential XSS attacks, all content output to the page will be automatically escaped.urlizetruncThe filter generates an HTML link<a href="...">...</a>tag), if not used|safeFilter, these HTML tags will be output as is and not parsed by the browser as clickable links. Therefore, make sure to addurlizetruncto the end of it.|safeMake sure the generated link displays and is clickable.

An actual example

We need to display the summary of the article on the article detail page, and this summary may contain some very long URLs. We can use it like thisurlizetrunc:

<div class="article-description">
    <p>
        {% archiveDetail articleDescription with name="Description" %}
        {{ articleDescription | urlizetrunc:50 | safe }}
    </p>
</div>

In this example,archiveDetailLabel retrieved the article's abstract content and assigned it toarticleDescriptionthe variable. Then,articleDescriptionVariables areurlizetrunc:50Filter processing, converts identified URLs to clickable links, and limits the display length of the link text to 50 characters (if over), and finally through|safeEnsure that the HTML structure is rendered correctly.

So, ifarticleDescriptionContains a very long URL, such ashttps://en.anqicms.com/how-to-optimize-your-website-for-better-performance-and-seo-results.html, it may be displayed as on the page,<a href="..." rel="nofollow">https://en.anqicms.com/how-to-optimiz...</a>. The text of the link seen by the user is concise, but it still jumps to the full link address when clicked.

urlizetruncThe benefits brought

UseurlizetruncFilter, you can not only keep the text area containing URLs tidy, but also prevent page elements from deforming due to long links, and improve the user experience.The reader can see the general content of the link at a glance, without having to see a long string of characters that may be meaningless.This is crucial for maintaining the visual consistency and professional image of the website, especially in news lists, blog summaries, card displays, or any layout with a restricted display area.It also helps to optimize page loading speed and rendering efficiency, because the browser does not need to process overly long text content.

It is worth noting that,urlizetruncandurlizeThe link generated by the filter is default to addrel="nofollow"Property.This attribute tells the search engine not to track this link. For links pointing to external websites, this is usually a good SEO practice and can avoid unnecessary weight passing.

Summary

In short,urlizetruncIt is a powerful and detailed tool in the AnQiCMS template, making the display of links both beautiful and practical. By simply applying this filter in the template and with|safeYou can easily manage the display style of links on the page, effectively enhancing the overall look and user experience of the website.

Common Questions and Answers (FAQ)

  1. urlizeandurlizetruncWhat are the differences between filters? urlizeThe filter will convert all URLs and email addresses in the text to clickable HTML links, but it will not limit the display length of the link text, instead showing the full URL or email address.urlizetruncThen the length control function is added on this basis, which allows you to specify a maximum display length and automatically add an ellipsis to the end of the link text when it exceeds this length, to keep the page neat.

  2. Why did I useurlizetruncFilter, but the link has not become clickable, but displayed<a href="...">...</a>such label text?This is usually because you forget tourlizetruncafter the filter|safeFilter. AnQiCMS template engine defaults to HTML escaping for all output content for security reasons.urlizetruncThe generated is an HTML tag, if it is not processed|safeProcessing, the template engine will treat it as plain text and escape it, resulting in the tag code being displayed on the page instead of a clickable link.

  3. urlizetruncFilter does the support for truncation of Chinese URL? urlizetruncThe filter mainly truncates based on the number of characters.For URLs containing Chinese characters (usually URL encoded), it calculates the length based on the number of encoded characters (usually English characters).The translation of 'auto' to 'English' is not required, as the value provided does not contain the word 'auto'. The original JSON array remains unchanged.