In website content operation, we often need to display some website addresses or email addresses in articles or pages. If these addresses are only displayed in plain text, users cannot directly click to jump, which not only affects user experience but may also make it difficult for search engines to identify these valuable link information.幸运的是，AnQiCMS 提供了一套非常便捷的内置功能，能够帮助我们自动将这些普通的文本内容转换成可点击的超链接或邮件链接，让网站内容更具互动性和专业性。

To implement this feature, we mainly use several "filters" (Filter) provided by the AnQiCMS template engine.These filters are like text processing tools, capable of formatting, converting, or filtering data.

Core Tools:urlizeFilter, makes website and email 'alive'

AnQiCMS providesurlizeFilter, its main function is to scan a text content, automatically identify the strings that conform to the URL format (such ashttp://example.com/www.example.com/example.com）and email address（such as[email protected]），and convert them to HTML's<a>tags, making them clickable links.

For example, you may have entered text like this in the article content field:欢迎访问安企CMS官网：https://en.anqicms.com，有疑问请发送邮件至 [email protected]

In the template, suppose your article content is being output by{{ archive.Content }}Then you can use it like this:urlizeFilter:

<div>
    {{ archive.Content|urlize }}
</div>

However, when usingurlizeThe filter has a very important detail to note.AnQiCMS To ensure website security, it defaults to escaping all content output to the page as HTML entities.{{ archive.Content|urlize }}generated by the filter,<a href="...">The label will be escaped.&lt;a href=&quot;...&quot;&gt;This format will still prevent the link from being clickable.

To make the browser able to parse and display the link as clickable, we still need to add an extra |safeFilter.safeThe filter tells the template engine that this content is safe and does not require HTML escaping; it can be output directly as the original HTML structure.

So, the correct usage should be:

<div>
    {{ archive.Content|urlize|safe }}
</div>

Then, when the user accesses the page,https://en.anqicms.comand[email protected]it will automatically become a clickable link, enhancing the user experience.

Advanced usage:urlizetruncFilter, controls the display length of the link

Sometimes, some URLs may be very long, and displaying them directly on the page may seem redundant and even affect the layout aesthetics. In this case, AnQiCMS providesurlizetruncFilter. It isurlizeBased on this, it adds a truncation feature that allows you to specify the maximum length of the displayed link text, with the excess automatically replaced by an ellipsis....Replace, but the actual link address is still complete.

urlizetruncThe filter needs a parameter indicating the maximum number of characters you want the link text to display.

For example, if you want the linked text to display a maximum of 30 characters:

<div>
    {{ archive.Content|urlizetrunc:30|safe }}
</div>

So, ifhttps://en.anqicms.com/long-page-path-with-many-wordsSuch links are recognized, and they may display as:https://en.anqicms.com/long-p...However, clicking on them will still take you to the full, long link correctly.

Where can these filters be used in the content areas?

These powerful filters are not limited to article content, you can apply them to any text output in the AnQiCMS template that may contain URLs or email addresses. Common use cases include:

  • Document details page (archiveDetail):
    • archive.Content(Article/Product Details Content)
    • archive.Description(Article/Product Overview)
    • PassarchiveParamsCustom text field obtained.
  • Category details page (categoryDetail):
    • category.Content(Category Introduction Content)
    • category.Description(Category Overview)
  • Single page detail page (pageDetail):
    • page.Content(Single-page content)
    • page.Description(Single-page overview)
  • System configuration or contact information (system,contact):
    • If you have customized a text field in the background, which includes a URL or email, such as a social media homepage link or customer service email, you can also apply these fieldsurlize|safe.

For example, you may havesystemdefined a custom "Company Home Page" field in the tagCompanyHomepage:

<p>
    访问公司主页：{% system companyHomepage with name="CompanyHomepage" %}{{ companyHomepage|urlize|safe }}
</p>

Summary

PassurlizeandurlizetruncThese two filters, combined|safeThe use of, AnQiCMS template can easily realize the automatic conversion of website URLs and email addresses in ordinary text, making your website content more interactive, readable, and friendly to search engines.This not only optimizes the user experience, but also effectively enhances the professionalism of the website.

Common Questions (FAQ)

  1. Q:urlizeThe filter will automatically addnofollowattributes?A: Yes, according to the design of AnQiCMS,urlizethe filter will automatically add external links to the text recognized and converted into<a>tags when labeling,rel="nofollow"Properties. This is a good default setting for SEO practices, which can prevent the weight of your website from being passed to unrelated external links.

  2. Q: Why did I addurlizeAfter that, is the link still displayed as plain text on the page and not clickable?A: This is very likely because you forgot tourlizeadd after the filter|safeFilter. AnQiCMS template engine, for safety, defaults to escaping all output HTML code, causing<a>tags to be displayed as plain text. Adding|safeThe filter tells the template engine that this content is safe and can be output as is, so that the link becomes clickable.

  3. Q:urlizeandurlizetruncWhat is the difference between these filters, and how should I choose?A:urlizeThe filter will identify URLs and email addresses in the text and convert them into full HTML links.urlizetruncInurlizeon the basis of, a feature to control the display length of link text has been added. If you do not want the link text on the page to be too long and affect the layout aesthetics, you can useurlizetruncand specify an appropriate character count to truncate display. If the link length is not an issue, or you wish to display the full link text,urlizeit is sufficient. Both need to be coordinated.|safeFilter must be enabled to display clickable links.