How does AnQiCMS template automatically parse URL strings into clickable HTML links?

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

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

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

urlizeFilter is specifically used to identify URLs and email addresses in text and wrap them automatically.<a href="...">...</a>Tags can smartly recognize various URL formats, such ashttp://orhttps://Starting with a complete URL, even just a domain string in the form, can be accurately captured and converted.www.Starting with a URL, even just a domain string, can be accurately captured and converted.

UseurlizeThe filter is very simple, just add it after the variable that needs to be processed|urlizeFor 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 }}

Here, special attention is needed.|safeThe use of. In AnQiCMS (and many template engines), to prevent cross-site scripting attacks (XSS), the default behavior is to escape the output HTML content,<special characters to<. Due tourlizeThe filter will generate HTML tags, if missing|safeThese tags themselves will also be escaped, resulting in the display of the original HTML code on the page instead of the actual link. Therefore, when you know that the output content is safe HTML, be sure to add|safeto indicate that the template engine should 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 avoid 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.urlizepowerful:

{# 假设变量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 page may contain especially long URLs, which not only take up a lot of space but may also disrupt the page layout and affect aesthetics. At this point,urlizetruncthe filter comes into play. It isurlizeBased on this, the functionality to truncate link text has been added, allowing long URLs to be displayed in a more concise form while still retaining full clickable functionality.

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

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

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

urlizetruncIn practical applications, it is particularly suitable for handling long links that may appear in user submitted comments, messages, or some custom fields, 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> #}

Actual application scenarios and **practice

这两个过滤器最常用于以下场景：

1. 文章/产品详情页内容：在显示archive.Content时，确保所有内嵌的URL都是可点击的。
2. 用户评论/留言：Users may paste URLs when submitting comments or messages. Filters can automatically convert them to links and avoid unnecessary layout issues.
3. Custom text fieldIf your content model includes custom text fields, such as "Reference Link" or "Source Address", these filters can also be used to process them.

Tip:

• Always remember to useurlizeorurlizetruncafter|safeUnless you specifically need HTML to be escaped.
• Choose whether to truncate the link based on the page design and content type.For important reference links in the main content, it may be better not to truncate; while for user comments or sidebar lists, truncation can help keep the page tidy.
• In 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 ofurlizeandurlizetruncWill 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.

---

Common Questions and Answers (FAQ)

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

Q2: UseurlizeFilter conversion link, why is it automatically appended?rel="nofollow"What is the role of this attribute?A2:urlizeThe filter indeed automatically adds to external linksrel="nofollow"Properties, this is a practice friendly to search engines.It tells the search engine's crawler that the link should not be considered as a 'trust vote' for the target page, i.e., it does not pass 'link weight'.

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

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

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