How is the `filter-length_is` filter used in AnQiCMS templates for `if` judgment of the exact length of a collection?

Precise control and intelligent presentation: AnQiCMS template infilter-length_isThe efficient application of filters

filter-length_isA filter is an unobtrusive yet powerful assistant that allows us to accurately determine whether a collection (whether it is a string, an array, or a key-value pair) has the specific length we expect, and use this as a basis for conditional rendering, thereby achieving more intelligent and dynamic content display.

filter-length_isThe filter is born for this, it is clearly told to us with a boolean value whether the length of the target set matches the given number exactly, making it becomeTrueorFalse{% if %}The ideal partner in a conditional statement.

Understandingfilter-length_isThe mechanism of the English

To effectively utilizefilter-length_isFirstly, it is necessary to understand its core function: it does not return the actual length of the collection, but compares it with a number you specify. If they are completely consistent, it returnsTrueotherwise, returnFalseThis binary judgment feature makes it very suitable as a trigger for conditional logic.

This filter can handle various types of sets:

• String:It calculates the actual number of UTF-8 characters in a string. An English letter is counted as one character, and a Chinese character is also counted as one character. For example,"AnQiCMS"has a length of 7,"安企CMS"The length is 5.
• Array (slices/List):It calculates the number of elements in the array.
• Key-value pair (Map):It calculates the number of key-value pairs.

It is worth noting that,filter-length_isCannot be directly used to judge the 'value' of pure numbers, it is always used to judge the 'length'.{{ 5|length_is:1 }}it will returnFalseBecause numbers5themselves are not strings or collections of length 1.

filter-length_isThe practical application scenarios of

In the template development of AnQiCMS,filter-length_isIt can help us build flexible and versatile user interfaces:

1. Precisely control the layout:Suppose your content model allows users to upload 3 cover images.You may want to use a special image gallery layout when the user has just uploaded 3 images; otherwise, use the default layout.

   {% archiveDetail archiveImages with name="Images" %}
   {%- if archiveImages|length_is:3 %}
       <div class="gallery-three-column">
           {%- for img in archiveImages %}
               <img src="{{ img }}" alt="封面图" class="gallery-item" />
           {%- endfor %}
       </div>
   {%- else %}
       <div class="gallery-default">
           {%- for img in archiveImages %}
               <img src="{{ img }}" alt="封面图" class="default-item" />
           {%- endfor %}
       </div>
   {%- endif %}
   {% endarchiveDetail %}
   

2. Elegantly handle empty content:This isfilter-length_isOne of the most common uses.When you retrieve a possibly empty list from the background, you can use it to decide whether to display the list content or show a friendly prompt.{% for %}a loop that provides{% empty %}Labels can be used to handle empty lists, but it becomes particularly flexible when dealing with more complex conditions (such as lists that are not empty but do not meet specific length requirements),length_is:0.

   {% archiveList relatedArticles with type="related" limit="5" %}
   {%- if relatedArticles|length_is:0 %}
       <p>暂无相关文章，敬请期待。</p>
   {%- else %}
       <h3>相关文章推荐</h3>
       <ul>
           {%- for article in relatedArticles %}
               <li><a href="{{ article.Link }}">{{ article.Title }}</a></li>
           {%- endfor %}
       </ul>
   {%- endif %}
   {% endarchiveList %}
   

3. Form input length validation (front-end prompt):Although actual form validation should be performed on the backend, providing immediate feedback on the frontend can enhance user experience. For example, if a phone number field requires accuracy to 11 digits, you can assist with the following hint:

   {% set phoneNumber = "13800138000" %} {# 假设这是用户输入的值 #}
   {%- if phoneNumber|length_is:11 %}
       <p class="text-success">手机号码格式正确。</p>
   {%- else %}
       <p class="text-danger">手机号码必须是11位数字。</p>
   {%- endif %}
   

CombineifLabel usage example

filter-length_isThe most common usage is to be withifCombined with the label, perform conditional judgment. The following are some typical template code snippets that demonstrate this powerful combination:

Determine the exact length of a string variable:

{% set websiteName = "AnQiCMS" %}
{%- if websiteName|length_is:7 %}
    <p>网站名称刚好是7个字符。</p>
{%- else %}
    <p>网站名称的长度不是7个字符。</p>
{%- endif %}

{% set chineseString = "安企内容" %}
{%- if chineseString|length_is:4 %}
    <p>中文字符串长度为4。</p>
{%- else %}
    <p>中文字符串长度不为4。</p>
{%- endif %}

Determine the exact length of an array (slice):

{% set topCategories = ["文章", "产品", "服务"]|list %} {# 假设这是一个通过|list过滤器创建的数组 #}
{%- if topCategories|length_is:3 %}
    <nav class="main-nav">
        {%- for cat in topCategories %}
            <a href="#">{{ cat }}</a>
        {%- endfor %}
    </nav>
{%- elif topCategories|length_is:0 %}
    <p>导航列表为空。</p>
{%- else %}
    <p>导航列表的长度不为3。</p>
{%- endif %}

Through these examples, we can clearly see:filter-length_isHow to bring more advanced logic control capabilities to the AnQiCMS template.它让我们的模板不再只是简单的数据展示，而是能够根据数据的细微变化，智能地调整自身行为，从而为用户提供更优质、更个性化的浏览体验。filter-length_isUndoubtedly, it can make your work twice as efficient, building a more responsive and smooth AnQiCMS website.

---

Common Questions (FAQ)

**1.filter-length_isandlengthWhat about the filter?