In daily website content operations, we often need to display text content containing URL addresses on article detail pages, such as citation sources, recommended links, etc.If these URL strings cannot be automatically parsed into clickable hyperlinks, users will not be able to jump directly, which not only affects the user experience but also reduces the readability and convenience of the content.The AnQiCMS (AnQiCMS) fully considers this requirement, and it can easily achieve the batch conversion of URL strings in article details content into clickable links through built-in template filter functions.

The core of this feature lies in the powerful template engine of Safe CMS and what it providesurlizeandurlizetruncFilter. These filters can intelligently identify URLs or email addresses in text and automatically convert them into links with<a>The clickable link of the label, while still maintaining the HTML structure of the article content.

I. Understanding the Core Tools:urlizeFilter

urlizeThe filter is the main tool to achieve this goal. Its function is to scan the specified text content and automatically find the URLs in the form ofhttp://example.com/www.example.comevenexample.comas well as[email protected]Email addresses in the form, then wrap them in standard HTML<a>Make it clickable link in the tag.

It is worth mentioning that to better support SEO practices and prevent spam links,urlizeFilter will default to the generated links when converting<a>Label addrel="nofollow"属性。这意味着这些链接不会将“权重”传递给目标网站，这对于处理用户评论、论坛帖子等非内容编辑人员发布的外部链接尤其有用。

How to apply in article detailsurlizeFilter?

In the Aanqi CMS, the content of the article detail page is usually througharchiveDetailTags to retrieve and display. Assuming your article content field name isContentThen, the tag that may be used to display the article content in the template might be similar to this:

{% archiveDetail with name="Content" %}

To convert the URL string in this content into a clickable link, you just need to append this tag.|urlizeFilter, and in order to ensure that HTML tags can be correctly parsed by the browser instead of being displayed as plain text, it is also necessary to append|safeFilter.safeThe role of the filter is to inform the template engine that this content is safe and does not require HTML entity encoding.

The modified code example is as follows:

{# 假设这是您文章详情页显示内容的部分 #}
<div>
    {%- archiveDetail articleContent with name="Content" %}
    {{articleContent|urlize|safe}}
</div>

In this example,articleContentisarchiveDetailThe variable obtained from the tag gets the article content. If you directly inarchiveDetailLabel output content, can also be simplified to:)

{# 直接在 archiveDetail 标签中应用过滤器 #}
<div>
    {% archiveDetail with name="Content" %}|urlize|safe
</div>

But usually for code clarity and maintainability, it is recommended to assign the content to a variable.articleContentis the better practice.

Second, Advanced Application:urlizetruncFilter limits the length of linked text

Sometimes the URL links in the article content may be very long, which may take up a lot of space when displayed directly, affecting the layout and overall aesthetics of the article. At this time,urlizetruncThe filter comes into play.

urlizetruncFilter isurlizeOn the basis of this, an additional feature to limit the display text length of links has been added. It allows you to specify a number, and the link text will be truncated if it exceeds this length, with an ellipsis added at the end....English

How to apply in article detailsurlizetruncFilter?

UseurlizetruncThe way of the filterurlizeSimilar, but an additional parameter representing the maximum display length needs to be provided. For example, if you want the link text to display a maximum of 30 characters, you can modify the code as follows: 

{# 假设您希望链接文本最多显示30个字符 #}
<div>
    {%- archiveDetail articleContent with name="Content" %}
    {{articleContent|urlizetrunc:30|safe}}
</div>

This way, long URLs in the article content will no longer occupy too much space, but will be displayed in a concise truncated form while maintaining their clickability.

Step 3: Actual operation steps

tourlizeorurlizetruncFilter applied to your security CMS article details, usually follows the following steps:

  1. 定位template file:

    • In the AnQi CMS backend, go to the "Template Design" area, and find the template currently used by the website.
    • The template file for the article detail page is usually locatedtemplate/{您的模板目录}/{模型table}/detail.htmlortemplate/{您的模板目录}/archive/detail.html. For example, if it is an article model, it may betemplate/default/article/detail.html.

  2. Edit template file:

    • Open the corresponding template editor in the backgrounddetail.htmlfile.
    • Search for the content that displays the main article in the filearchiveDetailTag. This is usually a largedivorarticleTag inside. You may see something similar{% archiveDetail articleContent with name="Content" %}or{{archive.Content|safe}}code.

  3. Add Filter:

    • to|urlizeor|urlizetrunc:数字and|safeFilter added after the variable displaying the article content.
    • For example, to{{articleContent|safe}}Change to{{articleContent|urlize|safe}}or{{articleContent|urlizetrunc:30|safe}}.

  4. Save and update the cache:

    • 保存您对模板文件的修改。
    • To ensure that the changes take effect immediately, please make sure to click the "Update Cache" button in the Security CMS backend and clear the website cache.

Complete these steps after, all the URL strings in the detail page of your website's articles (includinghttp:///https://), as well aswww.Starting with URLs without a protocol header, and email addresses) will be automatically converted to clickable hyperlinks, greatly enhancing the interactivity and user experience of the content.

Frequently Asked Questions (FAQ)

  1. Why did I add something, but the breadcrumb navigation didn't appear on the page?|urlizeAfter the filter, the text displayed on the page is<a>the label text, not clickable links? Answer:this is usually because you forgot to|urlizeadd after the filter|safeFilter.The template engine of Anqi CMS defaults to encode all output content with HTML entities to prevent cross-site scripting (XSS) attacks.<a>）is normally parsed and rendered by the browser, it is necessary to explicitly inform the template engine that this content is safe, by adding|safea filter to cancel the default encoding behavior.

  2. 问：This batch conversion link feature can be applied to article descriptions (Description) or other custom text fields? Answer:Of course you can.urlizeandurlizetruncThe filter can be applied to any variable containing text. As long as you find the corresponding field output label in the template, for example{% archiveDetail with name="Description" %}or the output of some custom field, then like processingContentField is the same, add it after|urlize|safeor|urlizetrunc:数字|safe.

  3. Q: If some URLs in my article content should not be automatically converted to links, what method can I use to exclude them? Answer: urlizeandurlizetruncThe filter processes the entire text content in batches; it does not have built-in parameters to exclude specific URLs. If you have such a need, you may need to adopt the following two methods:

    • Manual edit:When editing article content in the background, for URLs that you do not want to be converted into links, you can intentionally spell them incorrectly, or add some non-URL characters before or after the URL to make them not recognized by the filter.
    • Front-end JavaScript Processing (Advanced):If there are a large number of specific pattern URLs that need to be excluded, consider using JavaScript on the front-end for further processing. After the page has finished loading, traverse all generated links using JS and remove them based on your exclusion rules (such as link text containing a certain keyword, or links pointing to a specific domain, etc.)<a>Label or modificationhrefProperties. This may increase the complexity of the frontend and may have an impact on SEO effectiveness, usually not recommended unless there is a special need.