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

Why is it necessary to limit the display text length of the link?

When we paste a complete URL directly into the content, especially those with numerous parameters and amazing length, they quickly occupy a large amount of space, making the page look disordered. The main reasons for limiting the length of the displayed link text are as follows:

  • Enhance visual aesthetics:Concise link text is more visually appealing than a long URL.
  • Optimizing user experience: Users can quickly scan the content, understand the direction of the link, and not be distracted by long URLs.
  • Keep the page tidy:Helps maintain the balance and consistency of the page layout, avoiding the page being stretched open by long links.
  • Content professionalism:Standardized link display reflects the professional quality of the content creator.

The AnqiCMS filters built into its template engine allow us to easily control the length of displayed text without changing the actual link address.

The solution of Anqi CMS:urlizeandurlizetruncFilter

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

urlizeThe filter: make the links dynamic.

urlizeThe main function of the filter is to scan the text and automatically convert the discovered URLs (such ashttp:///https://the URL starting with orwww.Convert domain names, even email addresses, to standard HTML<a>tags. This makes the original plain text links clickable, and by default, it addsrel="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 a pipeline symbol.|连接urlizethe filter.

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

If, through the above code,archive.DescriptionThe content is "Welcome to the Anqi CMS official website:"https://en.anqicms.comThen on the page,https://en.anqicms.comit will be converted into a clickable link.

urlizetruncFilter: The perfect combination of link beautification and length limitation

WhenurlizeThe filter recognizes and converts links, and if the original URL is very long, then the generated<a>The displayed text inside the tag is still very long. At this point,urlizetruncThe filter comes into play.

urlizetruncInurlizeBased on the function, it further allows us to specify the maximum length of the displayed text. It will intelligently truncate the displayed text and add an ellipsis at the end....Please note that it only truncatesthe text displayed, the link actually points tohrefThe attribute is still the complete URL address, ensuring the validity of the link.

urlizetruncThe filter requires 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, with the above code, ifarchive.DescriptionThe content is "The Anqi CMS documentation is very detailed, the address is: "https://en.anqicms.com/anqicms-document/tag-taglist.htmlThe URL might appear as similar to when we specify a length of 30 and the text on the page, this part of the text may be displayed as similar to the following URL: https://en.anqicms.com/anqicms-...The format preserves the clickable link while controlling the display length.

ChooseurlizetruncWhen the length parameter is, 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;And in some information block or sidebar, it may be appropriate to relax the length restriction.

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.

  • Article content(archive.Content) and descriptions (archive.Description): On the document details page, willarchive.Contentorarchive.DescriptionByurlizetruncbe processed, ensuring that the links in the content are both aesthetically pleasing and practical.
  • Category description(categoryDetail) and single page content(pageDetail)Similarly, these places may also contain external links, and using a filter can maintain a consistent user experience.
  • Comment ListWhen processing user comments, usingurlizetruncCan prevent malicious posting of long URLs as spam.

Must remember：WhenurlizeorurlizetruncWhen the filter generates HTML content (i.e., converts plain text into text with<a>The HTML tag to avoid the browser from<a>The tag itself displaying as text instead of a link, youit mustAdd to the end of the filter chain|safeFilter. Otherwise, you might see it on the page.<a href="...">链接文本...</a>Such raw HTML code, not a clickable link.

Summary

Of Security CMSurlizeandurlizetruncThe 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 tidy, clickable links with a good user experience, while effectively controlling the length of the displayed text, making the content more professional and friendly.

Frequently Asked Questions (FAQ)

  1. Q:urlizetruncWhich part of the link is truncated by the filter? Will the actual link address be affected?A:urlizetruncWhich part of the link is truncated on the page?The displayed text. It will only control<a>The text inside the label should be truncated and an ellipsis added at the end (...). The actual link address (i.e.),hrefthe 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 will generate HTML formatted after processing the text<a>Label. The AnQi CMS template engine, for security reasons, defaults to escaping all output variable content to prevent cross-site scripting attacks (XSS).If missing|safeFilter generated.<a>Tags will be escaped into&lt;a href="..."&gt;...&lt;/a&gt;This plain text cannot be displayed as a clickable link. Add|safeIt tells the template engine that this content is safe HTML and can be output as is.
  3. Q:urlizeandurlizetruncThe filter automatically adds to the linksrel="nofollow"Should I add the attribute?A: Yes, these two filters are used to convert the URL to<a>When labeling, the system will automatically add external links to generatedrel="nofollow"Property. This is a practice that complies with SEO **, which can avoid passing the 'link weight' of your website to external sites, especially when dealing with user-generated content (such as comments)