How to dynamically control in the template, sometimes using `urlize`, sometimes using `urlizetrunc`?

In AnQi CMS template creation, we often encounter the need to automatically convert URLs or email addresses in plain text into clickable links. AnQi CMS providesurlizeandurlizetruncThese powerful filters help us achieve this goal.Although they are all aimed at optimizing link display, choosing which filter to use is an art under different content and layout requirements.Understanding their differences and applying them flexibly can enhance the user experience and page cleanliness of the website.

Get to knowurlize: Make the link fully displayed

urlizeA filter is a very practical tool, its main function is to automatically identify the URLs appearing in the text (such ashttp://www.example.com/www.example.com) and email addresses (such as[email protected]) and wrap them in HTML.<a>In the tag, make it clickable. It is worth mentioning that Anqi CMS will also automatically addrel="nofollow"Attribute, this is a friendly default setting for SEO, which can avoid unnecessary weight dispersion.

Usage scenario: urlizeBest suited for those where we want the user to see the complete link address, or where the length of the link has little impact on the page layout. For example:

• Content of the article detail page:In a blog post, press release, or product description, the author may embed many external references or resource links usingurlizeMake sure these links are clear and visible, so users can easily see where the link will lead.
• User comments or message board:If the user leaves a website or email address in the comments,urlizeIt can be easily converted into a clickable interactive element.
• A long introduction or explanatory text:In these scenarios, even if the URL is long, it usually will not seriously damage the page structure.

Basic usage example:

{# 假设archive.Content中包含纯文本URL和邮箱 #}
<div>
    {{ archive.Content|urlize|safe }}
</div>

{# 直接将一个URL字符串转换为链接 #}
<p>访问我们的官网： {{ "https://en.anqicms.com"|urlize|safe }}</p>

{# 注意，`|safe`过滤器是必须的，它告诉模板引擎将`urlize`生成的HTML内容作为安全代码直接输出，而不是转义成实体字符。 #}

Get to knowurlizetrunc: Display the link elegantly within a limited space.

urlizetruncFilter is onurlizeOn the basis of this, a truncation feature has been added. Its function is to limit the length of the displayed text while converting URLs or email addresses into links.If the original link text exceeds the specified length, the extra part will be abbreviated with an ellipsis (...This replaces, but the actual link is still complete. This is particularly important when there is limited space on the page or when it is not desired for long links to affect the visual aesthetics.

Usage scenario: urlizetruncExcel in areas where it is necessary to maintain the page compact and tidy, for example:

• Sidebar or bottom link list:When you want to display a series of external resource links in a small area, without their lengths being uneven or too long to squeeze the layout...urlizetruncyou can maintain a consistent visual effect.
• Search results summary:When displaying search results, if it includes links to external resources, useurlizetruncEnsure that the link does not take up too much space while the user can still understand the basic information of the link.
• Tabular data or card layout:In these structured contents, the consistency of link length is crucial for maintaining layout alignment and aesthetics.
• Summary or abstract:If the introduction恰好 contains a URL, useurlizetruncCan provide links and control the display length.

Basic usage example:

{# 假设item.SourceLink是文章的来源链接，我们希望它在列表中只显示前30个字符 #}
<li>
    <a href="{{ item.Link }}">{{ item.Title }}</a>
    <span>来源：{{ item.SourceLink|urlizetrunc:30|safe }}</span>
</li>

{# 直接截断一个URL字符串 #}
<p>简短访问：{% filter urlizetrunc:20|safe %}</p>
<p>更多信息请访问 www.anqicms.com/document/guide/advanced-usage/filters/urlizetrunc.html</p>
<p>{% endfilter %}</p>

Dynamic control: when to useurlize, when should it be usedurlizetrunc?

“Dynamic control” does not mean writing complex logic in the code to judge which filter to use in real time, but rather as a website operator and template developer, according toThe context and design intention of content display Strategically choose the most appropriate filter.

The core principle is to weigh the demand for 'space' and 'information volume'.

1. When you need to provide complete context information, chooseurlize.

   • Example:In a detailed technical blog post, you referred to the GitHub address of an open-source project, and you want users to see the completehttps://github.com/anqicms/anqicmsso that they can copy, remember, or understand the complete structure of the link. At this point,urlizeis the** choice.

   <div class="article-body">
       {# 文章正文，允许URL完整显示 #}
       {{ archive.Content|urlize|safe }}
   </div>
   

2. when space is limited, or it is necessary to keep the page visually tidy, chooseurlizetrunc.

   • Example:On the website sidebar, there is a "Recommended Reading" list, each article may have an external source link.If these links are too long, it will cause the sidebar elements to be misaligned, affecting the appearance. At this time,urlizetrunccan elegantly solve the problem.

   <aside class="sidebar">
       <h4>推荐阅读</h4>
       <ul>
           {% archiveList recommendedArchives with type="list" flag="c" limit="5" %}
               {% for item in recommendedArchives %}
                   <li>
                       <a href="{{ item.Link }}">{{ item.Title }}</a>
                       {# 假设item.ExternalLink字段可能包含长URL #}
                       <small>{{ item.ExternalLink|urlizetrunc:25|safe }}</small>
                   </li>
               {% endfor %}
           {% endarchiveList %}
       </ul>
   </aside>
   

In summary:

• urlizeApplicable to the main content area, providing clear and complete link information, which is beneficial for users to fully understand the destination of the link.
• urlizetruncIt is suitable for auxiliary content areas, lists, summaries, and other space-limited areas, while maintaining the page layout tidy and not sacrificing the clickable nature of links.

By choosing this "dynamic" strategy, you can ensure that the website built with Anqicms not only provides rich content links but also maintains excellent visual effects and user experience.

---

Frequently Asked Questions (FAQ)

Q1: Why did I useurlizeorurlizetruncAfter, the link did not become clickable, but showed the original code, such as<a href="...">...</a>?

A1: This is a very common problem, usually because you forgot to add at the end of the filter chain|safeThe filter. Anqi CMS to prevent XSS attacks and ensure content security, defaults to escaping all output HTML tags, displaying them as entity characters.|safeThe filter will tell the template engine that you do