How to automatically identify URLs in AnQiCMS template text and convert them into clickable hyperlinks?

In website operation, the flexibility of content display and user experience are crucial.We often need to display some external links or references in the article content, product descriptions, or various text areas.<a>Labels, not only inefficient, but also prone to errors, especially when the amount of website content is large or needs frequent updates, this is undoubtedly a cumbersome task.

AnQiCMS provides an elegant and efficient solution to this pain point.Using its powerful template engine, we can easily achieve automatic recognition and conversion of URLs in text, turning them into clickable hyperlinks in an instant from the original plain text URLs, greatly enhancing user interaction experience and also reducing the burden on content operators.

The core of automated links:urlizeFilter

The key to realizing this feature in the AnQiCMS template isurlizethe filter. It can intelligently identify URLs that meet standard formats in text (such as URLs that start withhttp:///https://orwww.The domain at the beginning) and email address, and automatically wrap them in the correct<a>tags to make them clickable hyperlinks.

For example, if your article content is stored inarchive.Contentvariables, and it containshttps://en.anqicms.comSuch a URL, you can apply it in the template in the following wayurlizeFilter:

<div class="article-content">
    {{ archive.Content|urlize|safe }}
</div>

Here, special attention is needed.|safeThe use of filters.AnQiCMS's template engine defaults to escaping all output HTML tags to prevent cross-site scripting (XSS) attacks.urlizeThe filter has generated<a href="...">...</a>Such HTML code, but not processed|safeIf it is not processed, the browser will display it directly as plain text<a href="...">...</a>, rather than a clickable link. Therefore, when you confirmurlizethe HTML generated by the filter is safe and harmless, be sure to add|safeto ensure its correct rendering.

An admirable detail is,urlizeThe filter will also add by default when converting these automatically recognized links,rel="nofollow"Property.This is very friendly to the website's search engine optimization (SEO) strategy, effectively avoiding unnecessary page weight loss to external links, and at the same time indicating to search engines that these links are not recommended or endorsed by the website.

Optimize the display of long links:urlizetruncFilter

Sometimes, the URL that appears in the article may be very long, and displaying it in full may take up a lot of space, affecting the overall appearance and reading experience of the page. To solve this problem, AnQiCMS also providesurlizetrunca filter. It works withurlizeThe function is similar, but while converting to a clickable link, it allows you to specify the maximum display length of the link text.

UseurlizetruncHere is an example of a filter:

<div class="article-summary">
    {{ article.Description|urlizetrunc:30|safe }}
</div>

In this example, the number30The display text for the link will be at most 30 characters. If the original URL's display text exceeds 30 characters, the excess part will be indicated by an ellipsis...Replace, but the actual<a>The link address pointed to by the tag is still complete. This makes the page content both neat and retains the complete functionality of the link. Similarly,urlizetruncit also needs to be coordinated|safeThe filter must be enabled to correctly render the generated HTML.

Actual application scenarios and operation steps

These powerful filters are not limited to article content only.Contentfields, they can be flexibly applied to any text output that may contain a URL. For example, you can apply them to the articles.Descriptionfields, categories,DescriptionFields, even any custom text type fields you define, as long as these fields may contain user input or system-generated URLs.

You can follow these simple steps to apply these filters in your AnQiCMS template:

1. 定位template file:Open the template file you need to modify. The template files of AnQiCMS are usually stored in/template/您的模板名称/in the directory, for examplearchive/detail.htmlUsed for article detail pages, orcategory/list.htmlUsed for category list pages.
2. Identify the text output position:In the template file, find the location where you want to implement URL automatic recognition and conversion of text output, which is usually a variable display, such as{{ archive.Content }}or{{ category.Description }}.
3. Apply filter:Change the current variable output method to the applicationurlizeorurlizetruncFilter format and make sure to add|safe. For example:
   • to{{ archive.Content }}Change to{{ archive.Content|urlize|safe }}.
   • If you want to limit the length of the link text, you can change it to{{ article.Description|urlizetrunc:50|safe }}.

Practical Tips

• Flexible selection:For scenarios where the expected URL is not too long,urlizethe filter is simple and efficient; while you worry that a long URL may destroy the page layout,urlizetruncis a better choice.
• Use with caution:Not all text content is suitable for automatic linking. For example, if a field is already dedicated to storing and outputting hyperlinks (for example, througharchive.Linkvariables), avoid applying it repeatedly.urlizeFilter to avoid generating redundant or incorrect<a>Nested tags.
• Content security:AlthoughurlizeThe filter will be added by default.nofollowProperties, but for all content submitted by users, you should still combine with the built-in content security management function of AnQiCMS to carry out necessary review and filtering of links to ensure the safety and compliance of the website content.

By using flexibilityurlizeandurlizetruncThese powerful and practical filters help AnQiCMS greatly simplify the complexity of URL management in content, enhance the interactivity and user experience of website content, and also save valuable time and energy for website administrators.

---

Common Questions (FAQ)

Q1:urlizeDoes the filter automatically recognize all types of URLs?

urlizeThe filter mainly recognizes common URL formats, such ashttp:///https://as well as URLs that start withwww.The domain name at the beginning. In addition, it can also identify standard email address formats (such as[email protected]）。For some non-standard text or text that does not contain a protocol prefix, it may not be accurately identified and converted.

Q2: Why did I useurlizeAfter that, the text displayed on the page is<a href="...">...</a>Such text, rather than a clickable link?

This is usually because you forget tourlizeadd after the filter|safeFilter. AnQiCMS's template engine, for security reasons, defaults to escaping all outputs that may contain HTML tags, turning them into<Converted to<etc. entities.urlizeThe filter generates HTML<a>Label, so you need to explicitly tell the template engine that these HTML is safe, will not cause security risks, by adding|safethe filter to make it render normally.

Q3: If there are some links in my content I don't want to beurlizeautomatically converted, is there a way to avoid it?

urlizeThe filter is designed to process URLs in plain text in batches.Once applied, it will try its best to convert all the URLs it can recognize.urlizefiltered in the text area. For example, you canhttps://www.example.comwritten aswww.example.com(without the protocol header, buturlizeIt may still recognize) or `example.