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 form, visitors will not be able to click and jump directly, which undoubtedly affects 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 detail page of an article,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, as well aswww.domains that start with even email addresses), and convert them to standard HTML's<a>tags to make them clickable hyperlinks.

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>Tag), 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 also need to use|safeFilter.|safeThe filter informs the template engine that this part of the content is safe HTML and does not require escaping.

Therefore, the most complete usage should be:

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

Advanced usage:urlizetruncFilter

In some cases, the original URL may be very long, which may affect the aesthetics of the page layout directly. At this time, you can useurlizetrunca filter. It works withurlizeFeature similar, but allows you to specify the maximum display length of link text. If the URL exceeds this length, the extra part will be omitted....Replace while maintaining the integrity of the link.

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

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

For example, if you have a very 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 }}

It will output something like这是一个长链接：<a href="..." rel="nofollow">http://www.anqicms.com/...</a>which maintains the clickability while optimizing the display.

In the specific application of 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 Summary(archive.DescriptionMake the links in the summary clickable at the top of list pages or detail pages.
  • Category Description(category.Description/category.Content) In the category page introduction, it is convenient for visitors to jump to related resources.
  • Single page content(page.Content/page.Description) Website links in pages such as 'About Us' and 'Contact Us'.
  • Custom Model FieldsIf you have customized fields containing text, you can also apply these filters.

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 retrieves the latest 5 articles byarchiveDetailTag retrieves the full content and summary of the article, then passes these contents tourlizeorurlizetruncthe filter, and finally outputs as a clickable HTML link throughsafethe filter.

Summary

through the flexible use of AnQiCMS templates providedurlizeandurlizetruncFilter, we can easily convert plain text URLs in website content into clickable hyperlinks.This not only greatly enhances the user experience, making information retrieval more convenient, but also indirectly provides convenience for the website's SEO performance, as it allows search engines to better identify and crawl these links.|safeThe filter is the key to ensuring correct parsing of HTML.

Common Questions (FAQ)

  1. Q: Why when usingurlizeAfter, the link did not turn blue and clickable, but showed the original HTML tag, like<a href="...">链接文本</a>?A: This is usually because you forgot to inurlizeadd after the filter|safeFilter.urlizeIt will generate HTML tags, and the AnQiCMS template engine will default to escaping all outputs for security.|safeThe filter tells the template engine that this content is safe HTML and does not need to be escaped, allowing the browser to render clickable links correctly. The correct syntax is{{ 您的纯文本内容 | urlize | safe }}.

  2. Q:urlizeDoes the filter support custom settings<a>Properties of the tag, for exampletarget="_blank"orrel="nofollow"?A: AnQiCMS'surlizeThe filter will add by default when generating links automaticallyrel="nofollow"Properties should comply with SEO **practices, avoiding weight dispersion. However, it does not directly support adding through parameters.target="_blank"[or other custom properties.]If you need more customization features, such as having all automatically generated links open in a new window, you may need to combine JavaScript to achieve this, or consider manually adding HTML links when publishing content.

  3. Q: How can I handle both long and short URLs in my content more intelligently, rather than using them uniformly?urlizeorurlizetrunc?A: Intelligent handling of 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.urlizewhile maintaining integrity, and using the sidebar or summary section?urlizetruncThis is to save space. It depends on your specific needs for content display and editing workflows.