How do the `if` logical judgment label and `for` loop traversal label control the conditional display and repeated display of content?

In the daily operation of AnQi CMS, we often need to decide according to different business logic which content should be displayed, as well as how to efficiently repeat the display of a large amount of similar content. At this point,ifLogical judgment tag andforCyclic traversal of tags has become an indispensable tool in template design.They allow us to flexibly control the conditional and repetitive display of content, greatly enhancing the dynamism and maintainability of the website.

Conditional display weapon -ifLogical Judgment Tag

ifTags are the basis for conditional display of content in AnQi CMS templates.It allows us to set one or more conditions, and only when these conditions are met will the corresponding template content be rendered.This is very practical in various scenarios, such as displaying specific information based on user permissions, or determining whether to display certain data based on whether it exists.

The most basic usage is to determine whether a variable exists or is true.For example, on the article detail page, we may want to display the image only when the article is set with a thumbnail, otherwise not to display, in order to avoid broken image placeholders.

{% if archive.Thumb %}
    <img src="{{ archive.Thumb }}" alt="{{ archive.Title }}" class="article-thumb">
{% endif %}

Here,archive.ThumbRepresent the thumbnail path of the article. If this path exists (not empty), thenifThe condition is met, and the image will be displayed.

When logical judgments need to be more complex,ifTags also supportelif[else if abbreviation] andelseto handle multi-branch conditions. For example, we want to display different badges based on the recommendation attributes of the article,Flag) to display different badges:

{% if archive.Flag == "h" %}
    <span class="flag-hot">头条</span>
{% elif archive.Flag == "c" %}
    <span class="flag-recommend">推荐</span>
{% else %}
    <span class="flag-normal">普通</span>
{% endif %}

By such a structure, we can easily handle various combinations of conditions, ensuring that content is presented according to precise business rules. At the same time,iftags also support various comparison operators (such as==/!=/</>/>=/<=）as well as logical operators（and/or/not），even allowing for（into determine if a value is contained within a set, making conditional judgments more powerful and flexible.

a master in laying out repetitive content—forLoop through tags

On a website, content such as article lists, product displays, navigation menus, and image galleries often have repetitive structures.forThe loop traversal tag is designed to solve such problems, allowing us to efficiently iterate over a data collection (such as an array, slice, or map), and render the same template structure for each element in the collection, but with different data.

An common scenario is to display the latest article list. ThrougharchiveListAfter obtaining the set of articles through tags, we can usefora loop to sequentially display the title and link of each article:

{% archiveList archives with type="list" limit="10" %}
    {% for item in archives %}
        <li class="article-item">
            <a href="{{ item.Link }}">{{ item.Title }}</a>
            <p>{{ item.Description|truncatechars:100 }}</p>
        </li>
    {% endfor %}
{% endarchiveList %}

Here,archivesYesarchiveListThe article list data set returned by the tag.itemrepresents the current article object in the loop. Each loop,itemIt will automatically update to the next article data in the list until all articles have been processed.

Furthermore,forThe loop also provides some useful auxiliary variables and features. For example,forloop.CounterCan retrieve the current loop index (starting from 1),forloop.RevcounterThis indicates the remaining number of loop iterations. These are very useful when you need to add special styles to the first or last element of a list:

{% for item in archives %}
    <li class="article-item {% if forloop.Counter == 1 %}first-item{% endif %}">
        <!-- 内容 -->
    </li>
{% endfor %}

In addition,forTags also supportreversedto traverse the collection in reverse,sortedSort the set of numbers, as well ascycleTags to alternate the predefined string sequence in the loop (such as, alternately setting for list items)oddandevenClass name), these can all make our template design more exquisite.

If the data set is empty,forthe loop also providesemptyblocks to elegantly handle. Whenarchivesthe list is empty,emptyThe content within the block will be rendered, avoiding blank pages or errors:

{% for item in archives %}
    <!-- 文章列表内容 -->
{% empty %}
    <p class="no-content">当前暂无文章。</p>
{% endfor %}

Optimize the experience: detail control and skills

In actual application,ifandforTags are often used together to achieve more fine-grained content control. For example, when displaying a category list in a loop, we may want to expand only the items with subcategories:

{% navList navList %}
    {% for item in navList %}
        <li>
            <a href="{{ item.Link }}">{{ item.Title }}</a>
            {% if item.NavList %} {# 判断是否有下级导航 #}
                <ul class="sub-menu">
                    {% for subItem in item.NavList %}
                        <li><a href="{{ subItem.Link }}">{{ subItem.Title }}</a></li>
                    {% endfor %}
                </ul>
            {% endif %}
        </li>
    {% endfor %}
{% endnavList %}

Here, outer layerforLoop through the main navigation items, inner layerifConditionally judge whether each main navigation item hasNavList(Sub-navigation list). If there is, then through another inner layerforLoop through and display sub-navigation items.

Another practical trick is to use the template tag's blank line removal feature. IniforforAdd before and after the tag-Characters that can be removed to eliminate the blank lines occupied by the tag, which is very useful for generating compact HTML code, especially when dealing with list items or inline elements:

{%- for item in archives %}
    {{- item.Id }}
{%- endfor %}

This ensures that there are no unnecessary blank lines in the generated HTML, making the code cleaner.

By skillfully applyingifandforThese two core tags, combined with the rich data tags provided by Anqi CMS, allow us to flexibly build various complex and dynamic website content layouts, just like building with blocks.This not only improves the development efficiency, but also provides great convenience for the long-term operation and content update of the website.

---

Common Questions (FAQ)

1. Q:ifWhat type of data can tags be used to judge?Answer:ifThe tag is very flexible, it can judge boolean values (trueorfalse), the size of numbers, whether the string content matches, whether variables exist (non-empty), and even throughinOperator determines whether a value is contained within an array or a map. This makes it capable of covering the vast majority of condition judgment needs.

2. Question: How toforApply different styles to list items in a loop, such as alternating colors?Answer: You canforuse in a loop.cycleTags. For example, `{% cycle "odd" "even"}%`