How to automatically convert plain text URLs of articles in the AnQiCMS template to clickable hyperlinks?

In daily website content operations, we often need to mention some external links or URLs in articles, product descriptions, or single-page content.If these URLs only appear in plain text, visitors will not be able to click and jump directly, which will undoubtedly affect the user experience, and may even cause some important information to be overlooked.AnQiCMS as a powerful content management system provides a simple and efficient way to solve this problem, making your content more vivid and interactive.

AnQiCMS uses a template engine syntax similar to Django, which makes it very flexible to handle data and content in templates. For cases where the content may contain plain text URLs, such as in the article detail page,archive.ContentCategories introductioncategory.DescriptionOr custom single pagepage.ContentFields, AnQiCMS provides a set of built-in template filters that can automatically identify and convert these URLs.

Core solution:urlizeFilter

AnQiCMS provides a very practical built-in filterurlizewhich can automatically identify plain text URL addresses in the text (includinghttp:///https://links that start with thewww.The domain name at the beginning, even email addresses), and convert it to standard HTML<a>Tags to make it clickable.

UseurlizeThe basic syntax of the filter is very direct:

{{ 您的纯文本内容 | urlize }}

However, it is worth noting that,urlizeThe filter will output HTML tags (i.e.<a>tags), so that the browser can correctly parse these tags instead of displaying them as plain text (for example, you might see<a href="...">链接文本</a>Instead of a real link, we need to use it in conjunction with|safefilter.|safeThe filter tells the template engine that this part of the content is safe HTML and does not need to be escaped.

Therefore, the most complete usage should be:

{{ 您的纯文本内容 | urlize | safe }}

Advanced usage:urlizetruncFilter

In some cases, the original URL may be very long and directly displaying it may affect the aesthetics of the page layout. In this case, you can useurlizetruncFilter. It isurlizeFunction similar, but allows you to specify the maximum display length of the link text. If the URL exceeds this length, the excess part will be omitted....Replace while maintaining the integrity of the link.

urlizetruncThe syntax of using the filter is as follows, where长度is an integer representing the maximum number of characters you want to display:

{{ 您的纯文本内容 | urlizetrunc:长度 | safe }}

For example, if you have a long linkhttp://www.anqicms.com/a-very-long-url-example/with-many-words-and-paths.htmland you want it to display only the first 25 characters:

{{ "这是一个长链接：http://www.anqicms.com/a-very-long-url-example/with-many-words-and-paths.html" | urlizetrunc:25 | safe }}

This will output something similar这是一个长链接：<a href="..." rel="nofollow">http://www.anqicms.com/...</a>The content will maintain clickability and optimize the display effect.

The specific application in AnQiCMS template

These filters can be applied to any text field in AnQiCMS that may contain plain text URLs. The most common use cases include:

• Document content(archive.ContentEnsure that all mentioned URLs are clickable in the main content of articles, product details, and other pages.
• Document Introduction(archive.DescriptionMake the links in the summary clickable at the top of list pages or detail pages.
• Category description(category.Description/category.ContentIn the category page introduction, it is convenient for visitors to jump to related resources.
• Single page content(page.Content/page.DescriptionSuch as URLs in pages like 'About Us' and 'Contact Us'.
• Custom model fieldIf you have customized fields containing text, these filters can also be applied to them.

Here is an example of applying these filters in an article detail template.

{# 假设您正在文章详情页，需要处理文章内容中的纯文本链接 #}
<div class="article-content">
    {% archiveDetail articleContent with name="Content" %}
    {{ articleContent | urlize | safe }}
</div>

{# 如果您只想处理文章简介中的链接，并限制显示长度，通常用于列表页或摘要 #}
<p class="article-description">
    {% archiveDetail articleDescription with name="Description" %}
    {{ articleDescription | urlizetrunc:50 | safe }}
</p>

This code first goes througharchiveDetailThe tag retrieves the full content and summary of the article and then passes this content tourlizeorurlizetruncthe filter, and finally throughsafethe filter outputs as clickable HTML links.

Summary

By flexibly using the AnQiCMS template providedurlizeandurlizetruncThe filter can easily convert plain text URLs in website content into clickable hyperlinks.This not only greatly improves the user experience, makes information acquisition more convenient, but also indirectly provides convenience for the website's SEO performance, as it enables search engines to better identify and capture these links.Remember, use in combination|safeThe filter is the key to ensure correct parsing of HTML

Frequently Asked Questions (FAQ)

1. Q: Why when usingurlizeAfter, the link did not turn blue and clickable, but instead showed the original HTML tag, such as<a href="...">链接文本</a>?A: This is usually because you forgot tourlizeAdd after the filter|safefilter.urlizeIt generates HTML tags, while the AnQiCMS template engine defaults to escaping all output for safety.|safeThe filter tells the template engine that this content is safe HTML, does not need to be escaped, so that the browser can correctly render clickable links. The correct syntax is{{ 您的纯文本内容 | urlize | safe }}.

2. Q:urlizeDoes the filter support customization<a>For example, the properties of the tagtarget="_blank"orrel="nofollow"?A: AnQiCMS'surlizeThe filter will add by default when generating links automaticallyrel="nofollow"The attribute should comply with SEO **practices to avoid weight dispersion. However, it does not directly support adding through parameterstarget="_blank"Or other custom properties. If you need more custom features, such as making all automatically generated links open in a new window, you may need to combine JavaScript to implement, or consider manually adding HTML links when publishing content.

3. Q: How can I handle long and short links in my content more intelligently, rather than using them uniformly?urlizeorurlizetrunc?A: Intelligent processing for links of different lengths usually requires some planning during content editing.For particularly long links, encourage editors to manually use HTML links and provide shorter descriptive text.Or, you can use different filter strategies for different content areas (such as article content and sidebar recommendations), for example, article content usesurlizeMaintain integrity while using the sidebar or summary section.urlizetruncTo save space. This depends on your specific needs for content display and editing workflows.