How to convert a URL to a clickable link while limiting the length of the displayed text?

In website content operation, we often need to reference external links in articles or descriptions. These links should not only be convenient for users to click, but also sometimes need to control the length of the displayed text to maintain the neat page layout and a good reading experience.Long URLs displayed directly not only affect aesthetics, but may also distract users' attention.The AnQiCMS provides a flexible and powerful template filter that can elegantly solve this problem.

Why do you need to limit the length of the displayed text for links?

When we paste complete URLs directly into the content, especially those with numerous parameters and惊人的length, they quickly take up a lot of space, making the page look disorganized. Limiting the length of the displayed text of the links is mainly due to the following considerations:

• Enhance visual aesthetics:Short and concise link text is more visually attractive than a long URL.
• Optimize user experience:Users can quickly scan the content, understand the direction of the link, and not be distracted by long URLs.
• Keep the page neat:Helps maintain the balance and consistency of the page layout, avoiding the page from being stretched open due to long links.
• Content professionalism:Standardized link display reflects the professionalism of the content creator.

The Anqi CMS enables us to easily control the length of displayed text without modifying the actual link address, through its built-in template engine filters.

Security CMS solution:urlizeandurlizetruncFilter

The template system provided by Anqi CMS offersurlizeandurlizetruncTwo practical filters that can intelligently recognize URLs or email addresses in text and convert them into clickable HTML links. At the same time, for safety considerations, these two filters need to be combined when generating the output HTML.|safeFilter together to prevent HTML from being escaped again.

urlizeA filter: making links dynamic

urlizeThe main function of the filter is to scan the text and automatically convert the discovered URLs (such ashttp:///https://Starting with the website address, orwww.The domain name at the beginning, even the email address, is converted to standard HTML<a>tags. This makes the original plain text link clickable, and by default, these external links will be addedrel="nofollow"Properties, this is a good practice for SEO.

It is very simple to use, you just need to pass the variable containing the URL through the pipe symbol|Connecturlizethe filter.

{# 假设archive.Description中包含一个完整URL #}
<div>
    <p>{{ archive.Description|urlize|safe }}</p>
</div>

If the above code, ifarchive.Description的内容是“Welcome to the AnQi CMS official website:https://en.anqicms.com”，then on the page,https://en.anqicms.comit will be converted into a clickable link.

urlizetruncFilter: the perfect combination of link beautification and length limitation

WhenurlizeFilter identifies and converts links, and if the original URL is very long, then the generated<a>The displayed text within the tag will still be very long. At this point,urlizetruncThe filter comes into play.

urlizetruncInurlizeOn the basis of the function, it further allows us to specify the maximum length of the displayed link text. It will intelligently truncate the displayed text and add an ellipsis at the end....），but please note that it only truncatesthe text displayed，the actual link target ishrefthe attribute is still the complete URL address, ensuring the validity of the link.

urlizetruncThe filter needs a numeric parameter to specify the maximum length of the displayed text.

{# 假设archive.Description中包含一个非常长的URL #}
<div>
    <p>{{ archive.Description|urlizetrunc:30|safe }}</p>
</div>

For example, if the above code isarchive.DescriptionThe content is 'The document of Anqi CMS is very detailed, the address is: https://en.anqicms.com/anqicms-document/tag-taglist.htmlEnglishhttps://en.anqicms.com/anqicms-...This form keeps the link clickable while controlling the display length.

When choosingurlizetruncWhen the length parameter is specified, it can be flexibly adjusted according to the context of the content and design requirements.For example, in the main text of an article, it may be necessary to have a shorter display length to maintain the fluency of the paragraph; while in some information block or sidebar, it may be appropriate to relax the length limit.

Application scenarios and precautions

These filters are very useful in the AnQi CMS template, especially when dealing with user-generated content (such as comments, messages), article descriptions, custom field content, or any dynamic text that may contain URLs.

• 文章内容（English）archive.Content) and description (archive.Description)：在文档详情页，将archive.Contentorarchive.DescriptionPassurlizetrunc处理，可以确保内容中的链接既美观又实用。
• 分类描述（English）categoryDetail）和单页内容（English）pageDetail)：Similarly, these places may also contain external links, using filters can maintain a consistent user experience.
• Comment list：When handling user comments, usingurlizetruncIt can prevent spam messages with excessively long URLs.

Remember to do so.: whenurlizeorurlizetruncWhen the filter generates HTML content (i.e., converts plain text into text with tags)<a>标签的HTML），为了避免浏览器将显示为文本而不是解析为链接，你<a>标签本身显示为文本而不是解析为链接，你Must在过滤器链的最后加上|safeFilter. Otherwise, you might see<a href="...">链接文本...</a>such original HTML code, rather than a clickable link.

Summary

Anqi CMS'surlizeandurlizetruncThe filter provides website operators with simple and efficient tools to manage and beautify the display of URLs in content.By cleverly utilizing them, we can easily convert long URLs into neat, user-friendly clickable links, while effectively controlling the length of displayed text, making the content presentation more professional and friendly.

---

Common Questions (FAQ)

1. Q:urlizetruncWhat part of the link is truncated by the filter? Will the actual link address be affected?A:urlizetruncWhat part of the link is truncated by the filter on the page?Displayed text. It will only control<a>The length of the text inside the label and an ellipsis is added at the end...The actual link address (i.e., the URL in the attribute) will not be truncated and will remain complete and accessiblehrefThe actual link address (i.e., the URL in the attribute) will not be truncated and will remain complete and accessible
2. Q: Why when usingurlizeorurlizetruncAfter that, I still need to add|safeFilter?A:urlizeandurlizetruncThe filter, after processing the text, will generate HTML formatted<a>Label.The template engine of AnQi CMS defaults to HTML entity encoding for all output variable content for security considerations, to prevent cross-site scripting (XSS) attacks.|safeFilter, generates<a>The label will be escaped.<a href="...">...</a>Such plain text, cannot be displayed as clickable links. Add|safeIs to tell the template engine that this content is safe HTML that can be output as is.
3. Q:urlizeandurlizetruncThe filter automatically adds linksrel="nofollow"attributes?A: Yes, these two filters are used to convert the URL into<a>When labeling, the default action is to automatically add an external link generatedrel="nofollow"Property.This is an SEO**practical practice that can prevent the transmission of your website's 'link authority' to external sites, especially when dealing with user-generated content (such as comments).