The `urlize` and `urlizetrunc` filters: How to handle the display and truncation of long URLs?

In website content operation, we often need to handle various links, whether it is external resources cited in articles or websites left by users in comment sections.However, when these links are too long, they may not only disrupt the overall layout of the page, affecting its aesthetics, but may also reduce the reading experience of the users.Fortunately, AnQiCMS provides a pair of very practical filters——urlizeandurlizetruncThey can help us manage and display these long or unformatted URLs elegantly.

Say goodbye to manual copy and paste:urlizeThe magic of automatic linking.

Imagine you are creating content that requires referencing a large number of external websites or email addresses.If you had to manually copy the URL and then add a hyperlink through the editor each time, it would be such a cumbersome task.Not to mention users leaving plain text URLs in the comments, which is not only unattractive but also not convenient to click.

AnQiCMS'urlizeThe filter is exactly for solving these problems. Its core function is to convert plain text URLs (includinghttp:///https://those that start with the link,www.Links at the beginning, even naked domain names), as well as email addresses, are automatically converted to clickable HTML<a>.

For example, if you have a text that contains URLs:

<p>欢迎访问我们的网站：https://en.anqicms.com，或通过邮箱联系我们：[email protected]。</p>

afterurlizeAfter the filter is processed, cooperate|safeDeclare content security, it will become:

<p>{{ "欢迎访问我们的网站：https://en.anqicms.com，或通过邮箱联系我们：[email protected]。"|urlize|safe }}</p>

The output HTML will be:

<p>欢迎访问我们的网站：<a href="https://en.anqicms.com" rel="nofollow">https://en.anqicms.com</a>，或通过邮箱联系我们：<a href="mailto:[email protected]">[email protected]</a>。</p>

As you can see,urlizeNot only did it automatically create links, but it also intelligently added links to external linksrel="nofollow"Property. This property is very friendly to SEO, it tells the search engine not to pass the 'link weight' to these external links, which helps maintain the weight distribution of the website itself.

Furthermore,urlizeIt supports an optional parameter to control the escaping of link content. By default, the link text is escaped as HTML entities (equivalent totrue), such as in URLs."It will be converted into"To ensure correct display in HTML. If you need to display the original URL string without escaping, you can explicitly set it tofalseThis is usually not recommended as it may pose potential security risks.

Gracefully truncate long links:urlizetruncaesthetics

urlizeThe filter is powerful, but it will display the full link text as is when processing very long URLs.In some cases, this may cause the page layout to expand or the link text to occupy too much space, especially on mobile devices, which will severely affect the user experience.

At this time,urlizetruncThe filter comes into play.urlizetruncfunction withurlizeSimilar, but it adds a key feature: it is possible to specify the maximum display length of the link text. When the displayed text of the original URL exceeds this length,urlizetruncIt will truncate and add at the end...But the underlyinghrefattribute still retains the complete URL.

For example, a long URLhttps://en.anqicms.com/category/anqi-cms-features-and-benefits/anqi-cms-template-development-guideIf we want it to display only the first 15 characters:

<p>{{ "访问此页面了解更多：https://en.anqicms.com/category/anqi-cms-features-and-benefits/anqi-cms-template-development-guide"|urlizetrunc:15|safe }}</p>

The output HTML might be:

<p>访问此页面了解更多：<a href="https://en.anqicms.com/category/anqi-cms-features-and-benefits/anqi-cms-template-development-guide" rel="nofollow">https://www.anqicms...</a></p>

Please note,urlizetruncWhat is truncated is:<a>Visible text within the tag, not the actual:hrefLink. When the user clicks, it will still jump to the full link address.This maintains the page neatness while also considering the practicality of the links.By reasonably setting the truncation length, we can ensure that the page maintains good visual effects on different devices.

Application scenarios and practical suggestions

These filters have widespread applications in daily website content management and operations:

1. User comments and message area: Comments submitted by users may contain various formats of links. UseurlizetruncCan avoid malicious or long links from destroying the page layout while ensuring the clickable nature of legitimate links.
2. Article content citation: When citing external sources in the text of the article,urlizeCan quickly convert URLs to links, saving editing time. If the link itself is very long,urlizetruncit can maintain the fluidity of the paragraph and avoid reading interruptions.
3. Resource list or reference materialsIn displaying a series of external resources or references, especially when the title space is limited,urlizetruncit can make the list more organized and easy to browse.
4. Social sharing and external linksWhen you need to display various social media links or partner links at the bottom or sidebar of the page, these two filters can quickly generate standardizednofollowLink and control its display length.

In summary, AnQiCMS'surlizeandurlizetruncThe filter is a tool to improve content operation efficiency and optimize user experience. By cleverly using them, we can easily manage the links on the website, making the page both beautiful and practical.

Frequently Asked Questions (FAQ)

1. Why did I useurlizeorurlizetruncFilter, but the original HTML tags (such as<a href="...">...</a>) are still displayed on the page instead of clickable links?

This is usually because you forgot to add|safe.AnQiCMS (and many template engines) for security reasons, the default is to escape all output content to HTML entities to prevent XSS attacks. Whenurlizeorurlizetruncgenerate<a>After the HTML tags, if missing|safeThese HTML codes will be escaped as strings and displayed, rather than parsed as actual links by the browser. Therefore, make sure that your template code is{{ content_variable|urlize|safe }}or{{ content_variable|urlizetrunc:number|safe }}.

2.urlizeandurlizetruncCan the filter correctly handle URLs containing Chinese or other non-Latin characters?

Yes, AnQiCMS's template engine is based on Go language and has good support for UTF-8 encoding. Therefore,urlizeandurlizetruncThe filter can correctly identify and handle URLs containing non-Latin characters such as Chinese, Japanese, and Korean.They will encode these URLs into a format recognizable by the browser (such as percent encoding) and create the correct link.

3.urlizeandurlizetruncThe filter adds by default,rel="nofollow"Can the attribute be removed or modified?

urlizeandurlizetruncThe filter is designed to simplify the handling of external links and follow SEO**practices, therefore it will automatically add to the generated external links by defaultrel="nofollow"Property. If you have special requirements, you want to remove or modify this property (for example, to pass link weight), these filters do not provide direct parameters to control.nofollowYou may need to use the following methods:

• Manually create linksFor links where you explicitly want to pass weight, you can bypass the filter and manually write them in the template<a>Label and set as neededrelProperty.
• Front-end JavaScript processing: Remove or modify these after the page loads with JavaScriptrelThis may cause uncertainty in SEO effects and is not a recommended long-term solution.
• Backend custom logicIf you are a developer or have the ability to perform secondary development, you can preprocess the URLs in the content before template rendering through custom backend logic to achieve finer control.