In website content display, we often need to present data in a list form, such as article lists, product lists, or category navigation.In order to make the page look more attractive or to better organize information, we often hope that each element in the list has a different style, such as the common odd and even line background **division.AnQiCMS provides a powerful and flexible template system, making it very easy to achieve these fine style controls.
AnQiCMS's template system adopts the syntax of Django template engine, which is characterized by using double curly braces for variables{{ 变量 }}Show it, while logical control (such as conditional judgment, loops, etc.) uses single curly braces and percent signs{% 标签 %}To implement. Understanding this foundation, we can freely arrange content and style in templates.
The core of style control of elements within loops lies in the clever use offorThe loop tags自带forloopVariables. When we use in AnQiCMS templates{% for item in collection %}such structure to iterate over data sets, forloopThe variable will be automatically generated, and provides rich information about the current loop state. Among,forloop.Counteris a very useful property, which records the number of iterations of the current loop,1Start incrementing. Through this counter, we can accurately determine the position of the current element in the list and apply different styles accordingly.
How can we utilizeforloop.CounterImplement odd and even row style distinction? The principle is actually very simple: for odd rows,forloop.Counterthe remainder when 2 is taken modulo is1(or not)0), even rows are0. We can combineifLogic judgment label to dynamically add CSS classes to list items.
Assume we have a list of articlesarchivesHope the background color of odd rows is light gray, and even rows are white. The template code can be written as:
<ul class="article-list">
{% for item in archives %}
<li class="article-item {% if forloop.Counter % 2 != 0 %}odd{% else %}even{% endif %}">
<a href="{{ item.Link }}">
<h3>{{ item.Title }}</h3>
<p>{{ item.Description }}</p>
</a>
</li>
{% empty %}
<li>目前还没有文章。</li>
{% endfor %}
</ul>
In this code, we add<li>tags dynamicallyoddoreven. Then, in the CSS style sheet, we define the specific display of these class names, for example:
.article-item.odd {
background-color: #f9f9f9; /* 浅灰色背景 */
}
.article-item.even {
background-color: #ffffff; /* 白色背景 */
}
This way, wheneverforRender a list item in a loop, the system will always according toforloop.CounterThe value is used to determine whether it is an odd or even item, and it automatically adds the corresponding CSS class, thus realizing the differentiation of odd and even row styles.
In addition to the control of odd and even rows,forloopVariables can also help us achieve more advanced style requirements. For example, you may want the first or last element of a list to have special styles.forloop.Counter == 1It can easily be judged that the first element is...forloop.Revcounter == 1(forloop.RevcounterThe number of remaining elements starting from the end of the list) can be used to judge the last element.
<ul class="product-grid">
{% for product in products %}
<li class="product-card
{% if forloop.Counter == 1 %}first-item{% endif %}
{% if forloop.Revcounter == 1 %}last-item{% endif %}
{% if forloop.Counter % 3 == 0 %}third-column{% endif %}">
<img src="{{ product.Thumb }}" alt="{{ product.Title }}">
<h4>{{ product.Title }}</h4>
</li>
{% endfor %}
</ul>
In this example, we not only controlled the style of the first and last elements, but also throughforloop.Counter % 3 == 0Controlled every third element (for example, in a three-column layout, special margins or separators may be needed).
When handling these dynamic styles, it is usually recommended to define the styles in an external CSS file and dynamically add them via class names.This can better separate content, structure, and presentation, which is convenient for maintenance and management.|safeFilter to prevent HTML content from being escaped, ensuring styles can be applied correctly.
AnQiCMS template system throughforloopSuch built-in variables give us the ability to finely control element styles in loops. Whether it's simple alternating of odd and even rows, or complex combinations of styles based on multiple conditions, we can achieve this through flexible applicationforLoop and conditional judgment tags make it easy to achieve, adding more expressiveness to your website interface.
Common Questions (FAQ)
Q1: Besides the odd and even rows and the first and last elements, can I control the styles of other elements within the loop?
A1: Besides odd and even rows and the first and last elements, you can also apply styles byforloop.Counterthe value for various complex conditional judgments. For example, you can apply styles every N elements.{% if forloop.Counter % N == 0 %}），或者根据 English 应用样式（forloop.Counter的范围应用样式（ English{% if forloop.Counter > 5 and forloop.Counter < 10 %}），甚至结合业务逻辑判断特定数据的属性来应用样式。 English
Q2: 如果我的列表数据量很大，使用 Englishforloop.CounterDoes style judgment affect performance?
A2: For most common website application scenarios,forloop.CounterThe impact of computation and conditional judgment on performance can be ignored.AnQiCMS template engine has been optimized at the bottom level, and these lightweight logic processing will not become a bottleneck for website performance.Compared to this, excessive database queries, unoptimized image resource loading, or complex JavaScript are the performance optimization points that require more attention.
Q3: Why sometimes the dynamically added CSS class name or inline style does not take effect?
A3: There may be multiple reasons why the dynamic style does not take effect:
- CSS specificity issues：You may have added a class name that is overridden by other CSS rules with higher priority.Please check your CSS file to ensure the priority of the new rule is high enough, or use a more specific selector.
- Spelling errorThe spelling error of class name or style attribute will cause the style not to be applied. Please carefully check the names in the template code and CSS file.
|safe过滤器缺失If you try to output a string containing HTML tags or CSS attribute values directly in the template without using|safeFilter, then these strings may be escaped, causing the browser to fail to parse them as valid HTML/CSS. Make sure all dynamically generated HTML or style content is|safethe filter.- Template logic error: Check
ifCheck if the condition judgment is correct, make sure the correct class name is generated under the expected conditions. You can confirm this by checking the element inspector in the browser developer tools.<li>Element is correctly added toodd/evenor any custom class name.