In website content operation, we often need to display some URLs or email addresses in articles or pages. If these addresses are only in plain text, users cannot directly click to jump, which not only affects the user experience but may also make it difficult for search engines to identify these valuable link information.It is fortunate that AnQiCMS provides a very convenient built-in feature that can help us automatically convert this ordinary text content into clickable hyperlinks or email links, making the website content more interactive and professional.

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

Core Tool:urlizeThe filter makes websites and email addresses 'alive'

AnQiCMS providedurlizeThe main function of the filter is to scan a text content and automatically identify the strings that match the URL format (for examplehttp://example.com/www.example.com/example.com) and email address (for example[email protected]), and convert them into HTML's<a>tags to make them clickable links.

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

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

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

However, when usingurlizeWhen filtering, there is a very important detail that needs to be paid attention to.AnQiCMS To ensure website security, it is default to escape all content output to the page with HTML entities.This means, if you use directly{{ archive.Content|urlize }}generated by the filter,<a href="...">Tags will be escaped into&lt;a href=&quot;...&quot;&gt;This format still causes the link to be unclickable.

To make the browser parse and display the link as clickable, we still need to add an extra one.|safefilter.safeThe filter tells the template engine that this content is safe, it does not need to be HTML-escaped, and can be output directly in its original HTML structure.

So, the correct usage should be:

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

This, when the user visits the page,https://en.anqicms.comand[email protected]will automatically become a clickable link, enhancing 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 response to this, AnQiCMS providesurlizetruncFilter. It isurlizeBased on it, a truncation feature has been added, which can specify the maximum length of the link text display, and the parts exceeding it will be automatically abbreviated with an ellipsis....Replaced, but the actual link address is still complete.

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

For example, if you want the link 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...But when clicked, they will still correctly jump to the full long link.

In which content areas can these filters be used?

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

  • Document details page (archiveDetail):
    • archive.Content(article/product detail content)
    • archive.Description(article/product introduction)
    • ByarchiveParamsCustom text field obtained.
  • Category detail page (categoryDetail):
    • category.Content(category introduction content)
    • category.Description(category brief)
  • Single page detail page (pageDetail):
    • page.Content(single page content)
    • page.Description(single page summary)
  • system configuration or contact information (system,contact):
    • If you have customized a text field in the background that contains a URL or email, such as a social media homepage link or customer service email, you can also apply these fields tourlize|safe.

For example, you may havesystemDefined a custom "company homepage" field in theCompanyHomepage:

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

Summary

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

Frequently Asked Questions (FAQ)

  1. Q:urlizeThe filter will automatically add to external linksnofollowShould I add the attribute?A: Yes, according to AnQiCMS design,urlizeThe filter will automatically recognize and convert the text to<a>tags, and automatically add external links to the generated links.rel="nofollow"Property. This is a good default setting for SEO practices, as it can prevent passing the weight of your website 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 security reasons, defaults to escaping all output HTML code, resulting in<a>tags being displayed as plain text. Adding|safeA filter can tell the template engine that the content is safe, allowing it to output the HTML structure unchanged, making the link clickable.

  3. Q:urlizeandurlizetruncWhat is the difference between these filters, and how should I choose?A:urlizeThe filter recognizes URLs and email addresses in the text and converts them into complete HTML links. AndurlizetruncInurlizeOn the basis of this, the function of controlling 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 beauty, you can useurlizetruncTruncate the display to a suitable character count. If the link length is not an issue, or you want to display the full link text, thenurlizeit is sufficient. Both need to be coordinated.|safeThe filter must be applied to correctly display clickable links.