AnQiCMSurlizetruncFilter: Make long URLs elegant with ellipses

In the daily operation of websites, we often need to reference external links in articles, comments, or product descriptions.These links may be intended to provide reference materials, guide users to access related pages, or display product videos, etc.However, sometimes these URLs can be very long, not only occupying a large amount of page space but also affecting the overall aesthetics of the layout, and even reducing the reading experience of the content.Imagine how difficult it would be for users to read if a paragraph was filled with several lines of long URL strings!

AnQiCMS as an efficient and flexible enterprise-level content management system, understands the importance of content presentation, and therefore integrates powerful filter functions in the template engine to help us elegantly handle such issues. Today, let's delve into one very practical tool -urlizetruncFilter, it cleverly truncates long URLs and presents them with an ellipsis, maintaining the integrity of the link while also considering the aesthetics of the page and the reading experience of the user.

Deliciously handle long links:urlizeWithurlizetruncCollaboration

You may first be exposed to AnQiCMS templates,urlizeFilter. Its main function is to automatically identify and convert plain text URLs or email addresses into clickable<a>tag links, and it will also add a default one.rel="nofollow"Properties, this is very beneficial for SEO optimization and avoiding weight dispersion.

However, when the URL itself is very long, evenurlizeIt has been converted to a link, and the display on the page may still appear bulky.For example, a deep page tracking link, or a sharing link with multiple parameters, its length may easily exceed the normal reading width and disrupt the page layout.urlizetruncThe filter comes into play. It isurlizeOn this basis, it further provides the intelligent function of extracting link text, allowing you to control the display length of the link.

urlizetruncmagic: Simplicity and practicality

urlizetruncThe core value of the filter is itsBalance beauty and functionThe ability. It will automatically:

  1. Identify and convert links:likeurlizeIt can intelligently identify HTTP/HTTPS links in text,www.The URL at the beginning, even email addresses, and wrap them in<a>the tag.
  2. [en]Automatic additionrel="nofollow":This feature is particularly important for managing external links, which can help website operators better control the flow of page weight and avoid unnecessary SEO risks.
  3. English translation: Extract and add ellipsis automatically:This isurlizetruncThe most unique feature. You can set a maximum display length for the link text. If the display text of the original URL exceeds this length,urlizetruncIt will automatically truncate the extra part and add it at the end...(Ellipsis), thus keeping the page tidy.

This feature is especially useful on mobile devices, effectively avoiding the page expansion caused by overly long links, which affects the reading and interaction on mobile devices.

How to useurlizetruncFilter

UseurlizetruncThe filter is very simple, you just need to add|urlizetrunc:numberto the variable you need to processnumberThe parameter represents the maximum number of characters you want the linked text to display, this lengthContained at the end with an ellipsis.

For example, you have a text segment containing a long URL and you want to truncate the links to display a maximum of 15 characters:

<p>我发现了一个非常棒的AnQiCMS开发教程网站：http://www.anqicms.com/category/1/anqicms-tutorial.html，还有他们的Github仓库：https://github.com/fesiong/goblog。</p>

{# 使用 urlizetrunc 过滤器并设定最大长度为 15 #}
<p>
    {% filter urlizetrunc:15|safe %}
    我发现了一个非常棒的AnQiCMS开发教程网站：http://www.anqicms.com/category/1/anqicms-tutorial.html，还有他们的Github仓库：https://github.com/fesiong/goblog。
    {% endfilter %}
</p>

In the above example, we used{% filter ... %}Use block tags to handle a long text content.|safeThe filter is necessary because it tells the AnQiCMS template engine that this content is safe HTML and does not require additional escaping, thus allowingurlizetruncgenerated<a>Label can be parsed and displayed normally.

Afterurlizetrunc:15After processing, the actual display effect in the browser may be like this:

<p>
    我发现了一个非常棒的AnQiCMS开发教程网站：<a href="http://www.anqicms.com/category/1/anqicms-tutorial.html" rel="nofollow">http://www.anq...</a>，还有他们的Github仓库：<a href="https://github.com/fesiong/goblog" rel="nofollow">https://github....</a>。
</p>

You can see that the originally long URL has been truncated to 15 characters, and...the page becomes neat and beautiful instantly.

Application scenarios and **practice

urlizetruncFilter is widely used in the content operation of AnQiCMS:

  • Article summary or list page:In the blog post list or product list page, if you want to reference an external link but do not want the full length of the link to disrupt the card layout,urlizetruncit is an ideal choice.
  • User comment section:Users' comments may contain various links, usingurlizetruncCan effectively prevent malicious long links from expanding the comment area, maintaining the unity and beauty of the interface.
  • Sidebar or footer links:These areas usually have limited space, useurlizetruncCan keep the uniform concise length of friendship links, recommendation links, etc., and enhance the overall visual experience.
  • Product parameters or description:If the product details need to refer to technical documents or other external resource links, truncating the display can make the information presentation more organized.

When usingurlizetruncauto, the practice is to carefully select appropriatenumberValue.Too short may cause users to fail to identify the core information of the link, and too long may lose the significance of truncation.usually, a range of 15 to 30 characters is a relatively common choice, but the specific situation still needs to be adjusted according to the actual page effect.

Summary

AnQiCMSurlizetruncThe filter is a powerful assistant for content operators to enhance the user experience and the beauty of the webpage.It automates complex link handling in a smart and concise way, transforming long URLs into elegant ellipsis links.By reasonably utilizing this feature, you can easily optimize the presentation of website content, allowing your AnQiCMS site to maintain powerful functionality while also having pleasing visual effects.

Common Questions (FAQ)

1.urlizetruncThe filter handles which types of links? urlizetruncauto, filters can automatically identify and process URLs with the HTTP/HTTPS protocol (such ashttp://example.comorhttps://www.example.com）、以 Englishwww.开头的网址（例如 Englishwww.example.com），以及电子邮件地址（例如 English[email protected]），将它们转换为可点击的 English<a>标签链接。 English

2. If the display text of the original URL is already short than what I setnumberlength,urlizetruncwill an ellipsis be added?No.urlizetruncThe filter is intelligent. Only when the display text length of the original URL (including protocol, domain, etc.) exceeds the length you set,number参数时，它才会进行截断并添加省略号。如果链接文本本身就较短，它将原样显示，不会额外添加....

**3.urlizetruncLink after truncation, click to jump to the original long link