As a professional deeply familiar with the operation of AnqiCMS, I know that template development is the core link in building a website that is attractive and feature-rich.During the process of content creation, editing, and publishing, flexibly using logical judgments and loop tags in template languages can make our website content dynamically presented and adaptable to diverse business scenarios, thereby better meeting reader needs and enhancing user experience.Today, let's delve into AnqiCMS template developmentif/forThe flexible application of logical tags.
The foundation of dynamic content display:forLoop tags
In the template system of AnqiCMS,forLoop tags are the core tool for us to handle list and collection data. Whether it is an article list, product classification, navigation menu, or tag cloud,forLoops can help us present the data obtained from the backend in a structured way on the front-end page.
AnqiCMS'sforThe syntax of tags is concise and powerful. When we need to traverse a collection, we usually do it like this:{% for item in collection %} ... {% endfor %}. Here,collectionCan be fromarchiveList/categoryList/navListAn array of data obtained by tags. For example, to display the latest few article titles, we can combinearchiveListTags:
{% archiveList articles with type="list" limit="5" %}
{% for article in articles %}
<div class="latest-article">
<a href="{{ article.Link }}">{{ article.Title }}</a>
<span>发布日期：{{ stampToDate(article.CreatedTime, "2006-01-02") }}</span>
</div>
{% endfor %}
{% endarchiveList %}
Within the loop, AnqiCMS also provides many practical auxiliary variables, such asforloop.CounterYou can get the current loop index (starting from 1),forloop.RevcounterIt represents the number of remaining elements. This allows us to easily apply special processing or styling to specific elements in the list.For the first element of the list, add a prominent 'New' mark:
{% archiveList products with type="list" limit="10" %}
{% for product in products %}
<li {% if forloop.Counter == 1 %}class="new-arrival-item"{% endif %}>
{% if forloop.Counter == 1 %}<span class="badge">新品</span>{% endif %}
<a href="{{ product.Link }}">{{ product.Title }}</a>
</li>
{% endfor %}
{% endarchiveList %}
forLoops also supportreversedandsortedModifiers used to traverse in reverse and by default sorting of the set.This provides great convenience when content needs to be displayed in a different order.In addition, an indispensable feature isemptyblock. WhenforThe loop traverses thecollectionis empty,emptyThe content within the block will be rendered, which is very useful for displaying prompts like "No content" to users, greatly enhancing the user interface friendliness.
{% archiveList search_results with type="page" q="AnqiCMS" limit="10" %}
{% for result in search_results %}
<div class="search-result-item">
<h3><a href="{{ result.Link }}">{{ result.Title }}</a></h3>
<p>{{ result.Description }}</p>
</div>
{% empty %}
<div class="no-results">抱歉，没有找到您搜索的内容。</div>
{% endfor %}
{% endarchiveList %}
Precisely control the display of content:iflogical judgment tag
ifThe logic judgment tag gives AnqiCMS templates the ability to make dynamic decisions, allowing us to display or hide specific content blocks based on different conditions. Its basic syntax structure is similar to most programming languages, supportingif/elif(else if) andelseCombination, as well as various comparison and logical operators.
A common scenario is to decide whether to render an image tag based on whether the article has a thumbnail. This not only optimizes the page structure but also avoids visual problems caused by empty image links:
{% archiveList articles with type="list" limit="3" %}
{% for article in articles %}
<div class="article-preview">
{% if article.Thumb %}
<img src="{{ article.Thumb }}" alt="{{ article.Title }}">
{% else %}
<img src="/public/static/images/default_thumb.jpg" alt="默认图片">
{% endif %}
<h3><a href="{{ article.Link }}">{{ article.Title }}</a></h3>
<p>{{ article.Description }}</p>
</div>
{% endfor %}
{% endarchiveList %}
ifTags can also be used to check if a variable exists, is empty, or is true, etc. For example, to display personalized information when a user is logged in, or to display unique elements on a specific page:
{# 假设有一个名为 'user' 的变量，在登录时为真值 #}
{% if user %}
<p>欢迎回来，{{ user.UserName }}！</p>
<a href="/user/dashboard">我的面板</a>
{% else %}
<a href="/user/login">登录</a> | <a href="/user/register">注册</a>
{% endif %}
CombineelifandelseWe can build a more complex logical judgment chain. For example, according to the type of different pages (home page, category page, detail page) to render different SEO meta information:
{% tdk title_data with name="Title" %}
<title>
{% if title_data.PageType == "index" %}
{{ system.SiteName }} - {{ tdk.Description }}
{% elif title_data.PageType == "category" %}
{{ category.Title }} - {{ system.SiteName }}
{% elif title_data.PageType == "archive" %}
{{ archive.Title }} - {{ category.Title }} - {{ system.SiteName }}
{% else %}
{{ tdk.Title }}
{% endif %}
</title>
ifwithforThe flexible combination of use
The place where the power of AnqiCMS template tags is truly exerted lies inifandforThe clever combination of tags. This combination allows us to execute different logic while looping through data, based on the specific attributes or states of each element, thereby creating a highly dynamic and customized page layout.
A classic example is to build a multi-level category navigation. In AnqiCMS, we can achieve this bycategoryListget the category data and combine withitem.HasChildrenTo determine whether the current category has subcategories. If it does, then continue to use the nestedcategoryListorforloop to render subcategories; if not, it may directly display the article list under the category:
{% categoryList main_categories with moduleId="1" parentId="0" %}
<ul class="main-nav">
{% for category in main_categories %}
<li class="nav-item">
<a href="{{ category.Link }}">{{ category.Title }}</a>
{% if category.HasChildren %}
<ul class="sub-nav">
{% categoryList sub_categories with parentId=category.Id %}
{% for sub_category in sub_categories %}
<li><a href="{{ sub_category.Link }}">{{ sub_category.Title }}</a></li>
{% endfor %}
{% endcategoryList %}
</ul>
{% else %}
{# 如果没有子分类，可以考虑直接显示该分类下的文章 #}
<ul class="articles-in-category">
{% archiveList articles_in_cat with type="list" categoryId=category.Id limit="3" %}
{% for article in articles_in_cat %}
<li><a href="{{ article.Link }}">{{ article.Title }}</a></li>
{% endfor %}
{% endarchiveList %}
</ul>
{% endif %}
</li>
{% endfor %}
</ul>
{% endcategoryList %}
This pattern also performs well when building complex data filtering interfaces. For example, on the product list page, we can usearchiveFiltersLabel to get available filtering conditions and generate corresponding links for each filter option. Use it to render these filtering conditions.if val.IsCurrentHighlight the currently selected filter option to provide clear visual feedback to the user.
{% archiveFilters filters with moduleId="2" allText="不限" %}
<div class="product-filters">
{% for filter_group in filters %}
<div class="filter-group">
<h4>{{ filter_group.Name }}：</h4>
<ul>
{% for option in filter_group.Items %}
<li {% if option.IsCurrent %}class="active"{% endif %}>
<a href="{{ option.Link }}">{{ option.Label }}</a>
</li>
{% endfor %}
</ul>
</div>
{% endfor %}
</div>
{% endarchiveFilters %}
ByifandforThe organic combination allows us to achieve high flexibility and customization in AnqiCMS templates.It allows us to dynamically adjust the page layout and content presentation based on data, providing users with more accurate and personalized browsing experiences.As a website operator, proficiently mastering the application of these tags is undoubtedly a key link in enhancing website competitiveness.
Frequently Asked Questions
Q1: AtforHow do I apply special styling to the first few or last elements in a loop?A1: In AnqiCMS'sforthe loop, you can useforloop.Counterandforloop.RevcounterThese two variables.forloop.CounterCounting from 1, indicating which element of the loop it is;forloop.RevcounterIt indicates which element is the last. For example, to apply a special style to the first element, you can use{% if forloop.Counter == 1 %} ... {% endif %}If you need to process the last element, you can use{% if forloop.Revcounter == 1 %} ... {% endif %}.
Q2: If my content list may be empty, how can I avoid the page from displaying blank or crashing?A2: When you useforWhen you traverse a potentially empty collection, AnqiCMS providesemptya keyword to elegantly handle this situation. You can add{% for item in collection %}and{% endfor %}between{% empty %}block. IfcollectionIt is empty,forThe content within the loop will not be rendered, instead ofemptythe content of the block, for example, displaying a prompt such as 'No content available'.
Q3: AtifHow to check multiple conditions at the same time in the judgment, such as 'If the article has images and is recommended article'?A3: AnqiCMS'ifTags support the use of logical operatorsand/orandnotCombine multiple conditions. For example, you can use{% if article.Thumb and article.Flag contains 'c' %}To check if an article meets the conditions of having a thumbnail and being marked as recommended. Note that,containsCheck if a string or list contains a certain value. For more complex combinations, you can also use parentheses to specify the order of operations.