In today's website operation, user experience has become a key indicator for the success or failure of a website.Smooth browsing, clear information display, and convenient interaction can significantly enhance user satisfaction.AnQiCMS (AnQiCMS) is a powerful content management system that provides many tools to help operators optimize their websites, among which, the clever use of template tags and filters can make twice the work with half the effort.

Today, we will focus on a seemingly simple yet highly potential feature point for user experience improvement in AnQi CMS: how to applyarchiveDetaildocuments in the content obtained by tagsurlizeFilter. This is not just a technical implementation, but also a strategy to make your content more 'user-friendly'.

UnderstandingarchiveDetailTag: The core of content.

Let's quickly review firstarchiveDetailLabel. In the template system of AnQi CMS, when you need to display the detailed information of a document (whether it is an article, product details, or other custom model content),archiveDetailLabels are your helpful assistant. It can extract various fields of the document according to the current page or specified ID, such as title (Title) and the description (Description)、content (Content)、thumbnail (Thumb) etc.

For example, on the document detail page, you would usually use it like this to get the main content of the article:

{# 假设当前页面就是一篇文档的详情页 #}
<div>
    <h1>{{ archive.Title }}</h1>
    <div class="article-body">
        {{ archive.Content|safe }}
    </div>
</div>

Here{{ archive.Content|safe }}That is the way to retrieve and display the main content of the document. You may notice that|safeThis filter is crucial here, becausearchive.Contentusually contains HTML code generated by a rich text editor,|safeTell the template engine that this content is safe HTML and does not need to be escaped, and can be rendered directly.

UnveilingurlizeFilter: Make the link 'alive'

Now, the key point comes. Imagine that the author may have directly pasted a URL in your article content, such as “Please visit our website: “}]https://en.anqicms.comGet more information.If displayed directly, this URL is just plain text, and users need to manually copy and paste it to access.This undoubtedly increases the user's operation cost and reduces the experience.

urlizeThe filter is created to solve this pain point. Its function isAutomatically recognize URLs (website addresses) and email addresses in text and convert them into clickable HTML<a>tags。It also defaults to adding attributes to these automatically generated links, making it more user-friendly.rel="nofollow"This is a good default behavior for SEO processing of external links.

Whenurlizesuch ashttps://en.anqicms.comThis text, it will intelligently wrap it into:<a href="https://en.anqicms.com" rel="nofollow">https://en.anqicms.com</a>.

Actual application: Make your document content come to life

InarchiveDetailApply the document content obtainedurlizeThe filter is very simple, you just need to add it toContentField after:

<div class="article-body">
    {{ archive.Content|urlize|safe }}
</div>

Note, here:|urlizeplaced before:|safeThis is because:urlizeThe filter generates HTML<a>Tag, while|safeThen ensure that these generated HTML can be correctly parsed and displayed by the browser, rather than being escaped as plain text. If the order is reversed,urlizeThe generated HTML may be escaped again, causing the link to be unclickable.

Points for improving user experience:

  1. Seamless navigation:Users do not need to manually copy and paste, just click to jump, greatly simplifying the operation process.
  2. Clear vision:The link will be displayed in the browser's default link style (usually blue with an underline), making it easy for users to identify clickable elements at a glance.
  3. Reduce editing burden:For content editors, they do not need to manually insert links in the rich text editor, they just need to type the URL, and the system can automatically handle it, which improves work efficiency and also avoids link errors caused by manual operations.

Process long URLs:urlizetruncuses

Sometimes, very long URLs may appear in the article, which may affect the beauty of the page. Safe CMS also providesurlizetrunca filter, which inurlizeBased on the addition of truncation display function. You can specify a length, and the link text will be truncated if it exceeds this length, followed by an ellipsis...at the end, but the actual link address does not change.

For example, if you want the link text to display a maximum of 20 characters:

<div class="article-body">
    {{ archive.Content|urlizetrunc:20|safe }}
</div>

In this way, a long link likehttps://en.anqicms.com/documentation/how-to-use-urlize-filter-in-anqicms-templates.htmlmay be displayed ashttps://www.anqicms.co...The extension of operational value, while maintaining the validity of the link, also improves the visual neatness.

The extension of operational value

urlizeThe filter is not only a technical optimization, but also brings tangible value to the operation of the website:

  • Improve user retention:Convenient interaction will encourage users to spend more time on the website and explore more content.
  • Optimize the content publishing process:Content creators can focus on the content itself, without being distracted by link formatting, ensuring publishing efficiency.
  • 隐性SEO优势：Automatically addednofollowProperties help control the impact of external links on website authority, following the practices of search engines.

By using inarchiveDetailApplied to the document content obtained by the tag.urlizeFilter, you can achieve double improvement in user experience and content management efficiency with minimal changes, making your security CMS website more attractive.

Common Questions (FAQ)

Q1: Why do I geturlize之后，链接显示的是原始文本，而不是可点击的链接？A1: This is usually because you forget tourlizeadd after the filter|safeFilter. The safe CMS defaults to HTML-escape all output content for security reasons.urlizeby the filter generator<a>The tag itself is HTML code, if not|safeThese HTML codes will be treated as escaped text and displayed normally, causing the link to be unclickable. The correct usage is{{ archive.Content|urlize|safe }}.

Q2:urlizeThe filter recognizes which types of links? Is it also effective for email addresses?A2:urlizeThe filter can recognize common URL formats (such ashttp:///https:///www.addresses starting with) and email addresses. For example,[email protected]will be converted tomailto:[email protected]The clickable link, greatly facilitates the communication between users and you.

Q3:urlizeCan the automatically generated link be customized?relproperties, for example, I want to make some internal links withoutnofollow?A3:urlizeThe filter will default to adding to all automatically generated linksrel="nofollow"Property. Currently, there is no direct parameter at the filter level to disable or modify this default behavior. If you need to fine-tune the behavior for specific links,relProperty control (for example, ensure that internal links do notnofollow), suggest using the rich text editor's link function to insert HTML<a>tags instead of relying onurlizeAutomatically convert, so you can fully customize the properties of the link.