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

In Anqi CMS, the flexibility of the content model is one of its core strengths, allowing us to create various custom fields to carry specific types of content based on different business needs.When we customize some fields to store URL 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 front-end page by default and cannot be clicked to jump directly.This not only affects the user experience, but also fails to fully utilize the value of the link.

幸运的是，AnQi CMS内置了强大的模板过滤器，其中包括urlizeA filter that can automatically identify URLs or email addresses in text and convert them into clickable HTML links. This article will delve into how to cleverly apply it in the output of custom content model fieldsurlizeThe filter to parse URLs, making your website content more vivid and practical.

Understanding the Anqi CMS custom content model

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 'article', 'product' framework, create a brand new content type according to your business logic, and define exclusive fields for it.

For example, you may add a single-line text field for the 'Project Website Address' model of 'Customer Case', or add a multi-line text field for the 'Report Download Link' model of 'Industry Report'.These fields are often stored as plain text URLs when entered in the background.When 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.

urlizeThe filter: make the links dynamic.

urlizeIs a very practical filter provided by the Anqie 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>Make it clickable in the tag. Even better, it will automatically add properties for external links.rel="nofollow"This is a very useful default behavior for SEO optimization.

Basic usage example:

Suppose you have a variable namedexternal_linkA custom field with a value ofhttps://en.anqicms.comWhen output directly in the template, it may simply display as plain text:

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

To make it clickable, you just need to addurlizeFilter:

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

This is when the browser will render it:

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

It should be noted that whenurlizeThe filter converts the URL to HTML tags, and by default, these HTML tags are 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, we need tourlizeAfter 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 the final link displayed on the page is normal and clickable.

Apply in custom fieldsurlize

In Anqi CMS, there are two main ways to get the value of a custom content model field: directly by accessing the field name, or byarchiveParamsiterating over the tags.

1. Directly access known fields

If you know the name of the custom field's 'call field' (for example, the name you entered when creating it in the background,external_link), and if you are sure that this field will store a URL, then you can directly access it like a built-in system field and applyurlizefilter.

Assuming your custom content model has a field namedexternal_linkThe single-line text field for storing external reference links. You can use it in the template like this:

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

Herearchive.ExternalLinkAssumeExternalLinkIt is your custom fieldexternal_linkThe calling method after AnQi CMS camel case naming transformation.

2. PassedarchiveParamsLoop through 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. At this point,archiveParamsThe label comes into play. It allows you to iterate through all custom parameters of the current document (or 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 traversedparamsarray, eachitemRepresents a custom field. We check with simple conditional judgments,item.ValueIs it possible to be a URL (judging by whether it containshttp://、`https://