AnQiCMS provides many practical tags in template development, making content display more flexible and efficient. Among them,cycleTags are a clever tool that helps us alternate the display of data or styles in loops, making the page content more dynamic and visually appealing.
KnowcycleTag: Sequence Controller in Loop
In web design, we often encounter situations where we need to apply different styles to repeating elements or display different types of data in a specific order.For example, odd and even rows in a list need different background colors, or a group of product displays need to alternate between 'newest model' and 'best seller' tags.forThe counter inside the loop performs complexif/elseJudgment, the code will become lengthy and difficult to maintain.
cycleThe label was born, providing a concise and elegant way to solve such problems. Its core function is:forEach iteration loops through the parameters in a predefined order and outputs them one by one. After all parameters have been output once, it automatically loops back to the first parameter and repeats.This is like an automatic switching sequence, making your content 'move' in a loop.
Why choosecycleTags?
UsecycleThe benefits of tags are evident. Firstly, they greatly simplify template code. You can use a single line of simplecycleLabel replacement for multi-line conditional judgment, making the template more readable and easier to manage.Secondly, it enhances the visual presentation of the website content.By alternating styles, such as the background color of list items alternating in depth, it can help users better distinguish and read the content, enhancing the user experience.cycleIt also makes information presentation more hierarchical.
cycleBasic usage of tags: alternating styles
The most common use is to implement alternating styles for odd and even rows. Suppose we have a list of articles, and we want the background color of the list to alternate between light and dark to enhance visual contrast.
We can use it like thiscycleTags:
<ul class="article-list">
{% archiveList archives with type="list" limit="10" %}
{% for item in archives %}
<li class="{% cycle 'bg-light' 'bg-dark' %}">
<h3 class="article-title"><a href="{{item.Link}}">{{item.Title}}</a></h3>
<p class="article-description">{{item.Description}}</p>
</li>
{% empty %}
<li>暂无文章内容。</li>
{% endfor %}
{% endarchiveList %}
</ul>
In this example, we usearchiveListTag retrieval of article list, andforIterate each article in the loop.{% cycle 'bg-light' 'bg-dark' %}It will be in each<li>Tag rendering, alternate output of'bg-light'and'bg-dark'these two strings asclassthe value of the attribute.
The specific effect will be like this:
- The first article's
<li>Label receivedclass="bg-light" - The second article's
<li>Label receivedclass="bg-dark" - The third article's
<li>Label is obtained againclass="bg-light" - Continue in this manner until the loop ends.
In this way, we can easily achieve the alternating background color effect of list rows without complex logical judgment.
cycleAdvanced Application of Tags: Alternating Data or Content
cycleTags can not only be used for class names, but also for alternating output of any text or data content.
For example, we may need to alternate different prompt texts in a list:
<div class="product-showcase">
{% archiveList products with moduleId="2" type="list" limit="6" %}
{% for product in products %}
<div class="product-card">
<img src="{{product.Logo}}" alt="{{product.Title}}">
<h4 class="product-name">{{product.Title}}</h4>
<span class="product-tip">{% cycle '新品上架' '热销爆款' '限时优惠' %}</span>
</div>
{% empty %}
<p>暂无产品信息。</p>
{% endfor %}
{% endarchiveList %}
</div>
Here,{% cycle '新品上架' '热销爆款' '限时优惠' %}These three different prompt information will be displayed in a loop on the product card, giving each product a dynamic attribute, making the display richer.
UsecycleLabel alias: Improve code readability and reusability
When you need to use the same value multiple times within the same loop iterationcycleUse alias for label-generated values (as aliasThe feature will be very convenient. It can avoid repeated calls.cycleLabels can improve code clarity and execution efficiency.
<div class="blog-posts">
{% archiveList posts with type="list" limit="4" %}
{% for post in posts %}
{% cycle 'primary' 'secondary' as card_theme %}
<div class="post-card card-{{ card_theme }}">
<h4 class="post-title"><a href="{{post.Link}}">{{post.Title}}</a></h4>
<p class="post-meta">主题: {{ card_theme | capfirst }} | 发布于: {{ stampToDate(post.CreatedTime, "2006-01-02") }}</p>
</div>
{% endfor %}
{% endarchiveList %}
</div>
In this example,{% cycle 'primary' 'secondary' as card_theme %}Will generate alternately.'primary'or'secondary'Values to store tocard_themeIn the variable, we can use it multiple times at any position in the loop{{ card_theme }}to refer to this value, such as affectingdivofclassandpthe text within the tag.
Summary
cycleTags are a simple yet powerful tool in AnQiCMS templates, which makes it possible to inforEasily implement alternating display of data and styles in loops. Whether for visual aesthetics or logical data distinction, proficient usecycleTags can make your template code more elegant and efficient.
Common Questions (FAQ)
1.cycleIs there a limit to the number of parameters a tag can have?
TheoreticallycycleTags can accept any number of parameters, and it will cycle through the parameters in the order you provide.But in practical applications, it is usually recommended to use 2 to 4 parameters to achieve common alternating effects to maintain logical clarity and code maintainability.The more parameters, the more complex the loop pattern becomes, and it is also more difficult to understand.
2.cycleCan tags alternate the output of variable values instead of fixed strings?
Absolutely.cycleThe parameter of the label can be any valid template variable. For example, if you have a list that contains different URLs['/image1.jpg', '/image2.jpg']you can directly put it incyclethe label use{% cycle imageUrl1 imageUrl2 %}To alternate the output of these image URLs. It will alternate based on the actual value of the variable in the current loop iteration.
3. How tocycleSet default values in the label to prevent some parameters in the loop from being empty?
cycleThe tag itself does not have the function of setting a default value directly, it will iterate strictly according to the parameters you provide. If the parameter is a variable and it is empty in some iteration,cycleThe label will output an empty string. If you need to provide alternative content for possible null values, you can incycletagsexternalUseifdeterminedefaulta filter to handlecyclethe output of aliases. For example,{{ cycled_value | default:'默认值' }}.