How to automatically convert URLs and email addresses in the text content into clickable links?

On the day when digital content is becoming increasingly abundant and frequently updated, website operators must not only pay attention to the quality of the content, but also to the presentation and user interaction experience.When we publish articles, product descriptions, or any text information on AnQiCMS (AnQiCMS), we often include some URL links and email addresses pointing to external resources or contact information.If this information is only displayed in plain text, users will have to manually copy and paste it, which undoubtedly increases the complexity of the operation and reduces the user experience.AnQiCMS as an efficient content management system provides a concise and powerful way to automatically solve this problem, ensuring that URLs and email addresses in your text content can be automatically converted into clickable links, thereby greatly enhancing user-friendliness and the professionalism of the content.

AnQiCMS'urlizeFilter: The core of automatically linking text content

In the AnQiCMS template engine,urlizeThe filter is a key feature for automatically converting text content to links. This intelligent filter can automatically identify strings in the text that match the URL format, such ashttp://example.com/www.example.comAnd email address (for example[email protected]) and enclose it in standard HTML<a>tags to make it clickable on the frontend page.

For example, suppose your article content contains a sentence: "Learn more by visiting our official website: "}https://en.anqicms.com, or send an email to[email protected] inquire.If this text is directly output, it will just be plain text.But when you apply the variable containing this text in the templateurlizeWhen filtering, AnQiCMS will automatically convert it to:

了解更多请访问我们的官方网站：<a href="https://en.anqicms.com" rel="nofollow">https://en.anqicms.com</a>，或发送邮件至 <a href="mailto:[email protected]" rel="nofollow">[email protected]</a> 进行咨询。

This allows users to click on these links or email addresses directly without any additional operations. It is worth noting that in order to comply with SEO practices and avoid unnecessary link weight transfer,urlizeThe filter will automatically add to these automatically generated external linksrel="nofollow"Property.

Used in AnQiCMS template filesurlizeThe filter is very simple. You just need to attach it to the variable that needs to be processed, and be sure to combine|safefilter.|safeThe purpose is to inform the template engine that the output content has been processed by HTML and does not require further escaping, otherwise, the generated<a>Label code may be displayed directly as text instead of an actual link.

You can use it like this for single-line variables or small content blocks.

<p>最新动态请访问：{{ archive.Link | urlize | safe }}</p>
<p>联系方式：{{ contact.Email | urlize | safe }}</p>

If you need to link a field containing a lot of text, such as an article'sContentyou can use a tag block to wrap it:filterTag block to wrap:

{% filter urlize:true|safe %}
    {{ archive.Content }}
{% endfilter %}

Hereurlize:trueThe parameter allows retaining the original HTML entity escaping state when processing link content,|safewhich ensures that the final rendered HTML structure is correct and free of errors.

urlizetruncFilter: Optimize the display of long URLs

In some cases, very long URL addresses may appear in the article content, and these long URLs may take up too much space when displayed in full on the page, even affecting the overall layout and aesthetics of the page. To solve this problem, AnQiCMS providesurlizetruncFilter. This filter functions asurlizeSimilarly, it can automatically identify and convert URLs and email addresses into clickable links, but on this basis, it allows you to specify a maximum character length. When the displayed text of the converted URL exceeds this limit, the excess part will be automatically omitted by an ellipsis (...Replace it to make the page display more tidy.

For example, if you have a very long URL and you want it to display no more than 30 characters:

{% filter urlizetrunc:30|safe %}
    <p>以下是一个截断显示的长链接：https://en.anqicms.com/documentation/how-to-automatically-convert-urls-and-emails-to-clickable-links-in-anqicms.html</p>
{% endfilter %}

afterurlizetrunc:30After processing, the long link in this text will appear in a more concise form to the user, while maintaining its clickability andrel="nofollow"Properties. This is particularly useful in scenarios such as news summaries and product parameter lists, which can effectively improve the reading experience of the content.

Practical application scenarios and content operation value

In the daily operation of AnQiCMS,urlizeandurlizetruncThe filter has a wide range of applications. You can use them on detail pages of various content types, such as byarchiveDetailtags to get articles or product contentContentfield, bypageDetailThe content of the single-page label obtainedContentfields, even category descriptions(categoryDetailofDescriptionThese filters are useful for any text that needs to be dynamically output and includes URLs or email addresses.

They ensure that users of the website can access external resources, download files, or send emails while browsing your content instantly and conveniently, without having to manually copy and paste. This not only significantly improves user experience but also simplifies the process of content editing and publishing, reducing the need for manual addition of HTML.<a>Tags may introduce syntax errors. Through the automated link conversion mechanism, AnQiCMS empowers website operators to focus on high-quality content creation, while ensuring the performance of website content in terms of interactivity, readability, and SEO friendliness.

Frequently Asked Questions (FAQ)

Q1: I used in AnQiCMS templateurlizeorurlizetruncfilter, but why are the displayed URL and email address still plain text and not clickable?A1: The most common reason is that you may have forgotten to add at the end of the filter chain|safeFilter. The AnQiCMS template engine, for security reasons, defaults to escaping all content output through variables with HTML entities to prevent potential cross-site scripting (XSS) attacks.|safeThe filter is an explicit declaration that tells the template engine that the output content is safe HTML code that can be rendered as is, thus makingurlizeorurlizetruncGenerated<a>The tag can be correctly parsed by the browser and displayed as a clickable link. Please check your code to ensure its format is similar{{ your_content_variable | urlize | safe }}.

Q2:urlizeThe filter will automatically add to all converted external linksrel="nofollow"Do you have a property? Can I customize or remove this property?A2: Yes