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

In the template creation of AnQi CMS, we often encounter scenarios where we need to automatically convert URLs or email addresses in plain text to clickable links. AnQi CMS providesurlizeandurlizetruncThese two 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.Understand the differences and apply them flexibly, which can enhance the user experience and page cleanliness of the website.

Knowurlize：Let the link be fully presented

urlizeFilter 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's<a>Labels in the text, making them clickable links. It is worth mentioning that the Anqi CMS will also automatically addrel="nofollow"Properties, this is a friendly default setting for SEO, which can avoid unnecessary weight dispersion.

Use cases: urlizeMost suitable for those areas where we want users to see the full link address, or where the length of the link has little impact on the page layout. For example:

• The main content of the article detail page:In blog posts, press releases, or detailed product descriptions, authors may embed many external references or resource links, usingurlizeEnsure these links are clear and visible, so users can immediately understand where the link will lead.
• User comments or message board:If the user leaves a website or email in the comments,urlizeIt can be easily converted into clickable interactive elements.
• Extended introductions 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内容作为安全代码直接输出，而不是转义成实体字符。 #}

KnowurlizetruncElegantly display links within limited space.

urlizetruncFilter isurlizeBased on that, an truncation feature has been added.Its function is to limit the display text length while converting a URL or email address into a link....This replaces it, but the actual link is still complete. This is particularly important when there is limited space on the page or when long links are not desired to affect the visual aesthetics.

Use cases: urlizetruncPerforming well in areas that require the page to be compact and tidy, such as:

• Sidebar or bottom link list:When you want to display a series of external resource links in a small area without them being uneven in length or too long as 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, useurlizetruncIt can ensure that the link does not take up too much space, while the user can still understand the basic information of the link.
• Table data or card layout:In these structured contents, the consistency of link length is crucial for maintaining the alignment and aesthetics of the layout.
• Description or abstract:If the introduction exactly includes a URL,urlizetruncCan 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 use.urlizeWhen to useurlizetrunc?

“Dynamic control” does not mean writing complex logic in the code to judge which filter to use in real time, but rather that as a website operator and template developer,Content display context and design intentionStrategically choose the most suitable filter.

The core principle is: weigh the demand for 'space' and 'information quantity'.

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

   • Example:In a detailed technical blog post, a GitHub address of some open source project is cited, and you want users to see the fullhttps://github.com/anqicms/anqicmsso that they can copy, memorize, or understand the complete structure of the link. At this time,urlizeis the **choice.

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

2. when space is limited, or it is necessary to maintain the visual cleanliness of the page, chooseurlizetrunc.

   • Example:In the website sidebar, there is a 'Recommended Reading' list, and each article may have an external source link.If these links are long, they will cause the sidebar elements to misalign, affecting the aesthetics.urlizetruncto 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>
   

Summarizing:

• urlizeApplicable to the main content area, providing clear and complete link information, benefiting users in comprehensively understanding the destination of the link.
• urlizetruncSuitable for auxiliary content areas, lists, summaries, and other space-limited areas, it maintains the page layout while not sacrificing the clickability of links.

Through this 'dynamic' strategy selection, you can ensure that the website built with Safe CMS provides rich content links while maintaining excellent visual effects and user experience.

---

Common Questions and Answers (FAQ)

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

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