How to automatically convert a URL string to a clickable link in a template?

In website content operation, we often encounter such situations: articles, summaries, or comments contain some URL strings that can be seen by users but cannot be directly clicked to jump, which not only affects the user experience but also reduces the readability and practicality of the content.As an AnQiCMS user, you will find that the system provides us with a graceful and efficient solution that can easily convert these ordinary URL strings into clickable links.

AnQiCMS's template engine is powerful and flexible, it draws on the concise syntax of Django templates and has built-in many practical filters (filters).Today, let's talk about how to use these filters to make the URL string in your template 'alive'.

urlizeFilter: Generate links automatically

AnQiCMS provides us with a filter namedurlizewhich is a powerful filter, its function is to intelligently identify URLs in the text (such as those starting withhttp:///https:///www.URLs starting with, even common email addresses), and automatically wrap them up<a href="...">tags to make them clickable.

This filter can not only convert links into clickable forms, but also generate<a>automatically added in the tag.rel="nofollow"Property. This is very important for the website's SEO strategy, it can help you control the flow of the website's 'weight', avoiding unnecessary transfer of weight to external links, and focusing better on the optimization of its own content.

Let's look at a simple example, assuming that your article content includes a website address and email:

{# 假设原始文本中包含URL和邮箱地址 #}
{% set content_string = "欢迎访问安企CMS官网：https://en.anqicms.com，您也可以发送邮件到 [email protected] 联系我们。" %}

<p>原始文本：</p>
<p>{{ content_string }}</p>

<p>应用urlize过滤器后：</p>
<p>{{ content_string|urlize|safe }}</p>

In the code above,{{ content_string }}When output directly, URLs and emails are plain text. But when you apply|urlizeAfter the filter,https://en.anqicms.comand[email protected]will be automatically recognized and converted into clickable links, such as:

<a href="https://en.anqicms.com" rel="nofollow">https://en.anqicms.com</a> <a href="mailto:[email protected]">[email protected]</a>

urlizetruncFilter: Elegant truncation of long links

Sometimes, some URLs can be very long, and displaying them completely can affect the aesthetics and layout of the page, even causing layout to go wrong. At this point,urlizetruncfilters come into play. It isurlizeBased on that, a link text truncation feature has been added, you can specify a length, and the link text will be truncated if it exceeds that length, and it will end with...while maintaining the validity of the link.

urlizetruncThe filter needs a parameter to specify the truncation length. For example, if you want the link text to display at most 30 characters, you can use it like this:

{# 假设有一个非常长的URL #}
{% set long_url_content = "这里有一个非常长的链接，如果您感兴趣可以点击查看：https://en.anqicms.com/category/1/this-is-a-very-long-article-title-with-many-words-and-some-special-characters-to-demonstrate-truncation" %}

<p>原始长链接：</p>
<p>{{ long_url_content }}</p>

<p>应用urlizetrunc过滤器并截断为30个字符后：</p>
<p>{{ long_url_content|urlizetrunc:30|safe }}</p>

after|urlizetrunc:30The content displayed in the browser after processing may look like this:

这里有一个非常长的链接，如果您感兴趣可以点击查看：<a href="https://en.anqicms.com/category/1/this-is-a-very-long-article-title-with-many-words-and-some-special-characters-to-demonstrate-truncation" rel="nofollow">https://en.anqicms.com/c...</a>

The link is still complete, but the text displayed on the page has been cleverly shortened, saving space and improving visual neatness.

about|safeImportant tips for the filter

In the above example, you may have noticed that I addedurlizeandurlizetruncafter|safeFilter. This is an important security mechanism of the AnQiCMS template engine.By default, to prevent cross-site scripting (XSS) attacks, the template engine automatically escapes all output HTML tags, which means<Will become<,>Will become>etc.

urlizeandurlizetruncThe filter generates exactly HTML formatted<a>tags. If missing|safefilters, these<a>The tag will be escaped into plain text, thus it cannot be parsed by the browser as a clickable link.

Use|safeA filter is essentially telling the template engine: "This content is safe, please do not escape it, and parse it directly as HTML output." However, this also means that you need to ensure that the content being filtered is safe.|safeThe content source is trustworthy, otherwise it may pose a security risk. It is usually safe to handle content from the AnQiCMS system or strictly reviewed user content.

Useful scenarios and additional considerations

These filters are very useful in various content operation scenarios:

• User comments and messages:The URL or email pasted in the comment can be automatically turned into a clickable link, convenient for interaction.
• Product or service description:If your product or service description needs to guide users to access an external resource or download link.
• Custom field content:In some custom fields, URLs are stored and it is desired that they automatically become links when displayed on the front end.
• Article summary or list:When displaying URLs in article lists or summaries, they can be concise and functional.

It should be noted that if your content is already written through a Markdown editor and the Markdown rendering is configured on the front end, then Markdown syntax (such as[文本](链接)or directly pastehttp://Links are usually automatically converted to clickable links, in which case you do not need to use anything extraurlizeorurlizetruncFilters. These filters are mainly used to process those URL strings that exist in pure text format.

By flexible applicationurlizeandurlizetruncThe filter, you can significantly improve the interactivity and user experience of your website content, and also do better in SEO.With the help of AnQiCMS, make your website content more attractive and easier to operate.

Frequently Asked Questions (FAQ)

1. Why did I useurlizeFilters, but the link is still plain text and cannot be clicked?This is likely because you forgot tourlizeAdd after the filter|safeFilter. The AnQiCMS template engine defaults to escaping all HTML tags to ensure safety.urlizeandurlizetruncThe generated is HTML.<a>Tags, if not using|safeTell the template engine that this HTML is safe and can be rendered directly, it will be escaped into plain text.

2.urlizeWhat types of URLs and email addresses does the filter automatically recognize? urlizeFilters can usually identify URLs that start withhttp:///https:///ftp:///ftps://complete URLs that start with as well as URLs thatwww.start with but do not have a protocol part. For email addresses, it recognizes standard email address formats such as[email protected]) and convert them tomailto:links.

3. My article content is published using Markdown editor, and it also needs to useurlizefilter?Generally not required. If your AnQiCMS backend has enabled the Markdown editor and the front end is also configured with the corresponding Markdown rendering (for example inarchiveDetailused in therender=trueParameters), then the Markdown syntax itself supports converting links and email addresses into clickable forms (such as[AnQiCMS官网](https://en.anqicms.com)or directly pastedhttps://en.anqicms.com)urlizeandurlizetruncThe filter is mainly used to process those URL strings stored in the database in plain text format and not parsed by Markdown.