In website operations, the flexibility of content display and user experience is crucial.We often need to display some external links or references in the article content, product description, or various text areas.Manually add HTML to each URL<a>Labels, not only inefficient, but also prone to errors, especially when the amount of website content is large or needs to be updated frequently, this is undoubtedly a heavy task.

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

The core of automated link creation:urlizeFilter

The key to implementing this feature in AnQiCMS templates isurlizea filter. It can intelligently identify URLs in text that match standard formats (such as thosehttp:///https://starting withwww.Domains at the beginning) and email addresses, and automatically wrap them in the correct<a>tags to make them clickable hyperlinks.

For example, if your article content is stored inarchive.ContentIn the variable, 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>

Pay special attention here|safeThe use of filters. AnQiCMS template engine, to prevent cross-site scripting attacks (XSS), defaults to escaping all output HTML tags.This means, ifurlizeThe filter has generated<a href="...">...</a>Such HTML code, but not processed|safeIf processed, the browser will display it directly as plain text&lt;a href="..."&gt;...&lt;/a&gt;Instead of a clickable link. Therefore, when you confirmurlizeAdd it when the HTML generated by the filter is safe and harmless|safeTo ensure its correct rendering

A commendable detail is,urlizeThe filter will also add by default when converting these automatically recognized linksrel="nofollow"Property. This is very friendly for the website's SEO strategy, which can effectively prevent unnecessary page authority from leaking to external links, and at the same time, indicate to search engines that these links are not recommended or endorsed by the website.

Optimize the display of long links:urlizetruncFilter

Sometimes, the URLs that appear in the article may be very long, and displaying them in full can take up a lot of space, affecting the overall beauty and reading experience of the page. To solve this problem, AnQiCMS also providesurlizetruncFilter. It isurlizeThe function is similar, but allows you to specify the maximum display length of the link text when converting it to a clickable link.

UseurlizetruncHere is an example of a filter.

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

In this example, the number30The displayed text of the link will be at most 30 characters. If the display text of the original URL exceeds 30 characters, the extra part will be ellipsized....But actually replacing<a>The link address pointed to by the tag is still complete. This makes the page content both neat and retains the complete function of the link. Similarly,urlizetruncalso needs to cooperate|safeThe filter must be applied correctly to render the generated HTML.

The actual application scenario and operation steps

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

Apply these filters to your AnQiCMS template by following these simple steps:

  1. Locate the template file:Open the template file you need to modify. AnQiCMS template files are usually stored in/template/您的模板名称/in the directory, for examplearchive/detail.htmlFor article detail pages, orcategory/list.htmlUsed for category list pages.
  2. Identify the text output position:In the template file, find the position where you want to implement URL automatic recognition and conversion of the text output, which is usually the display of a variable, such as{{ archive.Content }}or{{ category.Description }}.
  3. Apply filter:Modify the existing variable output method to applicationurlizeorurlizetruncIn the form of a filter, and make sure to add|safe. For example:
    • to{{ archive.Content }}is modified 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 suggestions

  • Flexible choice: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,urlizetruncit is a better choice.
  • Use with caution:Not all text content is suitable for automatic linking. For example, if a field is already used specifically for storing and outputting hyperlinks (such as througharchive.Linka variable), it should be avoided to apply it againurlizeFilter to avoid generating redundant or incorrect<a>Nested tags.
  • Content security:ThoughurlizeThe filter will be added by default.nofollowThe attribute, but for all content submitted by users, you should still combine the built-in content security management function of AnQiCMS, to conduct necessary review and filtering of links to ensure the safety and compliance of the website content.

By flexible applicationurlizeandurlizetruncThese 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 effort for website administrators.

Frequently Asked Questions (FAQ)

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

urlizeThe filter mainly recognizes common URL formats, such as those starting withhttp:///https://Complete URLs starting withwww.A domain name starting. Moreover, it can also recognize standard email address formats (such as[email protected]）。For some non-standard text or text without protocol prefixes, it may not be accurately identified and converted.

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

This is usually because you forget tourlizeAdd after the filter|safeFilter. The AnQiCMS template engine, for security reasons, defaults to escaping all outputs that may contain HTML tags, converting them into<to&lt;such entity characters.urlizeThe filter will generate HTML<a>tags, so you need to explicitly tell the template engine that this HTML is safe, will not cause security risks, and by adding|safeThe filter can make it render normally.

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

urlizeThe filter is designed to batch process URLs in plain text.Once applied, it will try to convert all the URLs it can recognize.If you want to avoid certain links from being automatically converted, the most direct method is to avoid writing them in standard URL format in the application thaturlizein the text area of the filter. For example, you canhttps://www.example.comwritten aswww.example.com(without the protocol header, buturlizeit may still be recognized) or `example.