In the daily operation of website content, we often need to display text content containing URL addresses on the article detail page, such as source references, recommended links, and so on.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.AnQiCMS has fully considered this requirement, and it can easily achieve the batch parsing of URL strings in the article details to clickable links through the built-in template filter function.

The core of this feature lies in the powerful template engine of Anqin CMS and the providedurlizeandurlizetruncFilters. These filters can intelligently identify URLs or email addresses in text and automatically convert them to include<a>Clickable tags, while still maintaining the HTML structure of the article content.

I. Understanding Core Tools:urlizeFilter

urlizeThe filter is the main tool to achieve this goal. Its function is to scan the specified text content, automatically find the URL addresses 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>tags, making them clickable links.

It is worth mentioning that, in order to better support SEO practices and prevent spam links,urlizeThe filter will automatically generate for the link conversion<a>tagsrel="nofollow"Property. This means that these links will not pass the "weight" to the target website, which is particularly useful for dealing with external links posted by non-content editors such as user comments and forum posts.

How to apply in article detailsurlizeFilter?

In AnQi CMS, the content of the article detail page is usually obtained througharchiveDetailtags to retrieve and display. Assuming the article content field name isContentSo, the tag that displays the article content in the template might look something like this:

{% archiveDetail with name="Content" %}

To make the URL string clickable in this content, you just need to append this tag.|urlizeA filter, in order to ensure that HTML tags are correctly parsed by the browser and not displayed as plain text, it is necessary to append again|safefilter.safeThe filter's role is to inform the template engine that this content is safe and does not require HTML entity encoding.

The following is an example of the modified code:

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

In this example,articleContentIt is througharchiveDetailThe variable obtained from the tag gets the article content. If you use it directly inarchiveDetailLabel output content, can also be simplified to:

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

But usually, to make the code clear and maintainable, it is recommended to assign the content to a variablearticleContentis a better practice.

Second, advanced applications:urlizetruncFilter limits the length of link text

Sometimes, the URL links in the article content may be very long. If displayed directly, they will occupy a lot of space, affecting the layout and overall beauty of the article. At this time,urlizetruncThe filter comes into play.

urlizetruncFilter is onurlizeBased on that, a feature to limit the display text length of links has been added. It allows you to specify a number, and any link text exceeding this length will be truncated and appended with...to indicate omission.

How to apply in article detailsurlizetruncFilter?

UseurlizetruncThe way of filter withurlizeSimilar, but an additional parameter representing the maximum display length is needed. 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 take up too much space, but will be displayed in a concise truncated form while maintaining their clickability.

3. Actual operation steps

tourlizeorurlizetruncThe filter is applied to the detailed content of your Anqi CMS article, usually following the following steps:

  1. Locate the template file:

    • In the Anqi CMS backend, go to the 'Template Design' area, 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 the template file:

    • Open the corresponding template editor in the backgrounddetail.htmlfile.
    • Look for the content to be displayed in 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 a filter:

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

  4. Save and update the cache:

    • Save your modifications to the template file.
    • To ensure that the changes take effect immediately, please make sure to click the 'Update Cache' button in the Anqi CMS backend and clear the website cache.

After completing these steps, all the URL strings in the detailed page of your website article (includinghttp:///https://those starting with the website address, as well aswww.Websites that start without a protocol header and email addresses will be automatically converted to clickable hyperlinks, greatly enhancing content interactivity and user experience.

Frequently Asked Questions (FAQ)

  1. Ask: Why did I add|urlizeAfter the filter, the text displayed on the page is labeled with<a>instead of clickable links? Answer:This is usually because you forgot to|urlizeAdd after the filter|safeFilter. The Anqi CMS template engine, to prevent cross-site scripting attacks (XSS), defaults to encoding all output content with HTML entities.If you want to make HTML tags (such as<a>) Must be clearly told to the template engine that this content is safe, by adding|safefilter to cancel the default encoding behavior.

  2. Ask: Can the batch link conversion function be applied to the article description (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 process it likeContentField is the same, add after it|urlize|safeor|urlizetrunc:数字|safeJust do it.

  3. Question: If there are some URLs in my article content that I do not want to be automatically converted to links, what methods can be used to exclude them? Answer: urlizeandurlizetruncThe filter is applied to the entire text content in bulk, and it does not have built-in parameters to exclude specific URLs. If you have such a need, you may need to take the following two methods:

    • Manually edit:When editing article content in the background, for URLs that you do not want to be converted to links, you can deliberately spell them incorrectly or add some non-URL characters before or after the URL to prevent them from being 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 is loaded, traverse all the generated links 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 modificationhrefThis will increase the complexity of the frontend, and may have an impact on SEO, it is usually not recommended unless there is a special need.