How to automatically parse a URL string into a clickable HTML link in AnQiCMS template?

In AnQiCMS template development, we often encounter such needs: content containing URL strings should be automatically converted into clickable HTML links to enhance user experience and page interactivity.Manually adding links is cumbersome and unrealistic, fortunately, AnQiCMS provides powerful template filters that can help us easily achieve this function.

The AnQiCMS template engine supports Django-like syntax, which includes a series of practical filters that can process variable content. For the automatic parsing of URL strings,urlizeandurlizetruncThese filters are our powerful assistants.

Let the URL automatically come to life:urlizeThe wonder of filters

urlizeThe filter is specifically used to identify URLs and email addresses in text and automatically wrap them in<a href="...">...</a>tags. It can intelligently recognize multiple URL formats, such as those starting withhttp://orhttps://A complete link starting withwww.A URL starting with, even just a domain name string, can be accurately captured and converted.

UseurlizeThe filter is very simple, just add it after the variable you need to process|urlizeYou can. For example, if the content of your article is stored inarchive.ContentIn the variable, if you want all the URLs to be clickable links, you can write it like this:

{{ archive.Content|urlize|safe }}

Pay special attention here|safethe use. In AnQiCMS (and many template engines), to prevent cross-site scripting attacks (XSS), the default is to escape the output HTML content, by<Translate special characters to<. BecauseurlizeThe filter generates HTML tags, if it is missing|safeThese tags themselves will be escaped, causing the original HTML code to be displayed on the page instead of the actual link. Therefore, when you know that the output content is safe HTML, be sure to add|safeIndicate the template engine to parse as HTML.

urlizeThe filter will also automatically add to external links when generating links.rel="nofollow"Property. This is a beneficial practice for SEO, which can prevent unnecessarily passing the weight of this site to external sites and at the same time indicate to search engines that these links are not recommended or guaranteed by this site.

Let us feel through some examples.urlizeThe power of:

{# 假设变量text_content中包含以下内容： #}
{# "欢迎访问AnQiCMS官网：https://en.anqicms.com，或搜索www.anqicms.com，有问题请发邮件到[email protected]" #}

<p>{{ text_content|urlize|safe }}</p>
{# 输出可能类似： #}
{# <p>欢迎访问AnQiCMS官网：<a href="https://en.anqicms.com" rel="nofollow">https://en.anqicms.com</a>，或搜索<a href="http://www.anqicms.com" rel="nofollow">www.anqicms.com</a>，有问题请发邮件到<a href="mailto:[email protected]">[email protected]</a></p> #}

Optimize the display of long links:urlizetruncAdvanced applications of the filter.

Sometimes, a very long URL may appear on a page, which not only occupies a lot of space but may also destroy the page layout and affect the aesthetics. At this time,urlizetruncthe filter comes into play. It is inurlizeBased on that, a feature to truncate link text has been added, allowing long URLs to be displayed in a more concise form while still retaining full clickability.

urlizetruncThe filter accepts a numeric parameter to specify the maximum display length of the link text. The part exceeding this length will be replaced with an ellipsis ("...")....)

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

{{ archive.Content|urlizetrunc:30|safe }}

urlizetruncIn practical applications, it is particularly suitable for handling user submitted comments, messages, or some custom fields that may contain long links, ensuring that the content is both readable and can be normally accessed.

{# 假设变量comment_text中包含以下内容： #}
{# "这是一条用户评论，包含一个非常长的链接：https://www.example.com/very/long/path/to/specific/page?param1=value1&param2=value2" #}

<p>{{ comment_text|urlizetrunc:50|safe }}</p>
{# 输出可能类似： #}
{# <p>这是一条用户评论，包含一个非常长的链接：<a href="https://www.example.com/very/long/path/to/specific/page?param1=value1&param2=value2" rel="nofollow">https://www.example.com/very/long/path/to/...</a></p> #}

Application scenarios and **practice

These filters are most commonly used in the following scenarios:

1. Content of articles/products detail pages: Displayarchive.ContentMake sure all embedded URLs are clickable.
2. User comments/messagesThe user may paste URLs when submitting comments or messages. The filter can automatically convert them to links while avoiding unnecessary layout issues.
3. Custom text fieldIf your content model contains custom text fields, such as 'Reference Link' or 'Source Address', these filters can also be used to process them.

Tip:

• Always remember to useurlizeorurlizetruncadded afterwards|safeunless you explicitly need HTML to be escaped.
• Choose whether to truncate the link based on the page design and content type.It may be better not to truncate important reference links in the main content;And truncating for user comments or sidebar lists can keep the page tidy.
• In the AnQiCMS backend, you can set custom templates for different content models (such as articles, products) or single pages. In these template files, make full use ofurlizeandurlizetruncIt will greatly enhance the professionalism and user-friendliness of content presentation.

MasteredurlizeandurlizetruncThese powerful filters will enable your AnQiCMS website to handle URL strings more intelligently and elegantly, providing visitors with a more smooth and convenient browsing experience.

Frequently Asked Questions (FAQ)

Q1: Why did I use in the templateurlizeFilter, but the URL on the page is still plain text and not clickable?A1: The most common reason is that you may have forgotten tourlizeAdd after the filter|safeFilter. The AnQiCMS template engine, for security considerations, defaults to escaping all output HTML content.urlizeIt will generate HTML.<a>tags, if missing|safeThese tags themselves are also escaped into character entities, causing the browser to not recognize them as links. Make sure your code is similar to{{ your_variable|urlize|safe }}.

Q2: UseurlizeWhy does the filter automatically add the link, whyrel="nofollow"Property? What is the role of this property?A2:urlizeThe filter does indeed automatically add to external links.rel="nofollow"Property, this is a practice friendly to search engines. It tells the search engine spiders that the link should not be considered as a 'trust vote' for the target page, i.e., it does not pass 'link weight'.This helps:

*   **控制SEO权重流失**：避免将本站的SEO权重无意中传递给大量外部站点。
*   **防范垃圾链接**：在处理用户生成内容（如评论、论坛帖子）时，减少垃圾链接对本站SEO的负面影响。
*   **保持内容独立性**：声明本站对所链接内容不作担保或推荐。

Q3: Besides the content of the article or product details page, where else can I use the AnQiCMS template?urlizeorurlizetruncFilter?A3: These filters are very flexible and can be applied to any variable in the output text. Common application scenarios include:

*   **网站留言板**：自动转换用户留下的联系方式或网站链接。
*   **用户评论区**：确保用户在评论中粘贴的链接能正常点击。
*   **自定义内容模型字段**：如果您的自定义内容模型中有用于存储网址或社交媒体链接的文本字段。
*   **侧边栏的公告/友情链接描述**：在后台输入纯文本，前端自动转换。
总之，任何你希望文本中的URL自动变成链接的地方，都可以尝试使用它们。