How to apply the `urlize` filter to parse URLs in the output of a custom content model field?

In the AnQi CMS, the flexibility of the content model is one of its core advantages, allowing us to create various custom fields to carry specific types of content according to different business needs.When we customize some fields to store web links, such as "External Reference Link" or "Download Address of Related Resources", you may find that these links are displayed as plain text on the frontend page by default and cannot be clicked to jump directly.This not only affects user experience, but also fails to fully utilize the value of the link.

It is fortunate that Anqi CMS is built-in with powerful template filters, includingurlizeFilter that automatically identifies URLs or email addresses in text and converts them into clickable HTML links. This article will detail how to cleverly apply it in the output of custom content model fields.urlizeA filter to parse URLs, making your website content more dynamic and practical.

Understanding the Custom Content Model of Anqi CMS

The reason why AnQi CMS is favored by small and medium-sized enterprises and content operators is largely due to its highly flexible content model.It allows you to break out of the traditional

For example, you may add a single-line text field for "customer case" model or a multi-line text field for "report download link" in the "industry report" model.These fields are often stored as plain text URLs when entered in the background.And when it comes to displaying on the front-end page, we naturally hope that these URLs can be correctly parsed, making it convenient for users to directly click and access.

urlizeA filter: making links dynamic

urlizeIt is a very practical filter provided by the AnQin CMS template engine. Its main function is to automatically detect URLs and email addresses in the input text and wrap them automatically.<a href="...">...</a>Tags, making it clickable hyperlinks. Even better, it will automatically addrel="nofollow"properties, which is a very useful default behavior for SEO optimization.

Basic usage example:

Suppose you have a field namedexternal_linkwith a value ofhttps://en.anqicms.com. When directly outputted in the template, it may simply be displayed as plain text:

<p>外部链接：{{ archive.ExternalLink }}</p>
{# 页面显示：外部链接：https://en.anqicms.com #}

To make it clickable link, simply addurlizeFilter:

<p>外部链接：{{ archive.ExternalLink|urlize }}</p>

At this point, the browser will render it as:

<p>外部链接：<a href="https://en.anqicms.com" rel="nofollow">https://en.anqicms.com</a></p>

It should be noted especially that,urlizeThe filter converts URLs to HTML tags, and these HTML tags are by default automatically escaped by the template engine to prevent potential security issues (such as XSS attacks). In order for the browser to correctly parse and display these HTML links,urlizeAfter the filter, add one moresafeThe filter clearly tells the template engine that these HTML codes are safe and do not need to be escaped.

<p>外部链接：{{ archive.ExternalLink|urlize|safe }}</p>

This ensures that a normal, clickable link is displayed on the page in the end.

Apply in custom fieldsurlize

In AutoCMS, there are two main ways to get the value of a custom content model field: directly accessing through the field name, or througharchiveParamslabel looping.

1. Directly access known fields

If you know the name of the "call field" of the custom field (for example, the name you entered when creating it in the background)external_link），and it is determined that this field will store URLs, then you can directly access it as you would with built-in fields, and applyurlizeFilter.

Assuming your custom content model has a field namedexternal_linkThe single-line text field for (calling field), used to store external reference links. In the template, you can use it like this:

<section class="external-resources">
    <h3>参考资源</h3>
    <p>访问我们的合作伙伴网站：
        {{- archive.ExternalLink|urlize|safe -}}
    </p>
</section>

Here are thearchive.ExternalLinkAssumeExternalLinkis your custom fieldexternal_linkThe calling method after CMS camel case naming conversion.

2. ByarchiveParamsLoop through the custom fields.

Sometimes, a content model may have multiple custom fields, or you may want to write a generic template code that can automatically handle all possible custom fields that may contain URLs.archiveParamsThe label comes in handy. It allows you to iterate over all custom parameters of the current document (or a specified document).

<section class="custom-fields-display">
    <h3>更多详情</h3>
    {% archiveParams params %}
        {% for item in params %}
            <p>
                <strong>{{ item.Name }}：</strong>
                {# 判断如果字段值包含常见的URL前缀，则应用urlize过滤器 #}
                {% if item.Value|contain:"http://" or item.Value|contain:"https://" or item.Value|contain:"www." or item.Value|contain:".com" %}
                    {{ item.Value|urlize|safe }}
                {% else %}
                    {{ item.Value }}
                {% endif %}
            </p>
        {% endfor %}
    {% endarchiveParams %}
</section>

In this example, we iterate overparamsarray, eachitemRepresents a custom field. We check through simple conditionsitem.Valuewhether it might be a URL (by checking if it containshttp://、`https://