AnQiCMSurlizetruncFilter: Transform Long URLs into Elegant Ellipsis

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

AnQiCMS as an efficient and flexible enterprise-level content management system, fully understands the importance of content presentation, and therefore built-in powerful filter functions in the template engine, which help us elegantly handle such issues. Today, let's delve into one very practical tool -urlizetruncA filter that cleverly truncates overly 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.

Skillfully handle long links:urlizewithurlizetruncCollaboration

In the AnQiCMS template, you may first come into contact withurlizeFilter. Its main function is to automatically identify and convert URLs or email addresses in plain text format to clickable<a>tags by default.rel="nofollow"Property, this is very beneficial for SEO optimization and avoiding weight dispersion.

However, when the URL itself is very long, evenurlizeIt was converted into a link, the display on the page may still seem bulky.For example, a deep page tracking link, or a share link with multiple parameters, may easily exceed the normal reading width, disrupting the page layout. At this point,urlizetruncfilters come into play. It isurlizeOn this basis, it further provides the intelligent link text clipping function, allowing you to control the display length of the link.

urlizetruncMagic: Simple and practical

urlizetruncThe core value of the filter lies in itsBalance beauty and functionAbility. It will automatically:

  1. Identify and convert links:likeurlizeLike, it can intelligently identify HTTP/HTTPS links in text,www.The beginning of URLs, even email addresses, and enclose them in<a>in the tag.
  2. Automatically addedrel="nofollow":This feature is particularly important for the management of external links, as it can help website operators better control the flow of page authority and avoid unnecessary SEO risks.
  3. Intelligently truncate and add an ellipsis:This isurlizetruncThe most unique feature. You can set a maximum display length for link text. If the displayed text of the original URL exceeds this length,urlizetruncIt will automatically truncate the excess part and add it at the end...(Ellipsis), making the page tidy.

This feature is especially useful on mobile devices, as it can effectively avoid the page expansion caused by too long links, affecting the reading and interaction of mobile devices.

How to useurlizetruncFilter

UseurlizetruncThe filter is very simple, you just need to add it after the variable you need to process|urlizetrunc:numberThen. The parameter represents the maximum number of characters you want the linked text to display, this lengthnumberrepresents the maximum number of characters you want the linked text to display, this lengthContains an ellipsis at the end.

For example, if you have a long URL text and you want to truncate the link 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 ... %}Block tags are used to handle a long text content.|safeThe filter is necessary because it tells the AnQiCMS template engine that this content is safe HTML, which does not require additional escaping, thereby allowingurlizetruncGenerated<a>The tag 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 URLs have been truncated to 15 characters and...ending, making the page instantly neat and beautiful.

Application scenarios and **practice

urlizetruncThe filter is widely used in the content operation of AnQiCMS:

  • Article summary or list page:In the list of blog articles or product pages, if you want to reference an external link without the full length of the link disrupting the card layout,urlizetruncis the ideal choice.
  • User comment section:Users' comment content may contain various links, usingurlizetruncIt can 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, usingurlizetruncCan keep friendship links, recommended links, etc. with unified concise length, enhancing the overall visual experience.
  • Product parameters or descriptions:If the product details need to reference technical documents or other external links, truncating the display can make the information presentation more organized.

While usingurlizetruncAt the time, **the practice is to carefully select the appropriate based on your page layout and content characteristicsnumberThe value. Too short may cause users to not recognize the core information of the link, and too long may lose the significance of truncation.Generally, a range of 15 to 30 characters is a common choice, but the specific situation needs to be adjusted according to the actual page effect.

Summary

AnQiCMS'urlizetruncThe filter is a powerful assistant for content operators to enhance website user experience and page aesthetics.It automates the complex link processing 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, making your AnQiCMS site powerful while also having an aesthetically pleasing visual effect.

Frequently Asked Questions (FAQ)

1.urlizetruncWhat types of links does the filter handle? urlizetruncThe filter can automatically identify and handle HTTP/HTTPS protocol URLs (such ashttp://example.comorhttps://www.example.comwithwww.URLs that start withwww.example.com), as well as email addresses (such as[email protected]), and make them clickable<a>tag links.

2. If the displayed text of the original URL is shorter than I setnumber,urlizetruncWill an ellipsis be added?No.urlizetruncThe filter is smart. Only when the display text length of the original URL (including the protocol, domain, etc.) exceeds the value you set,numberWhen a parameter is specified, it will be truncated and an ellipsis will be added. If the link text is already short, it will be displayed as is without any additional addition....

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