如何使用循环(for标签)遍历并显示内容列表?

在安企CMS中,无论是展示文章列表、产品目录,还是导航菜单、友情链接,我们都会频繁地与内容列表打交道。要让这些内容动态地展现在网站前端,离不开强大的循环功能。今天,我们就来深入了解如何使用安企CMS模板中的循环(for标签)来遍历并显示您的内容列表。

for 标签的核心语法:让内容动起来

安企CMS的模板语法类似Django和Blade,非常直观。当您需要处理一组数据时,for标签是您的得力助手。它的基本结构非常简洁:

{% for item in collection %}
    {# 在这里显示每个item的详细信息 #}
{% endfor %}

在这里,collection 指的是您要遍历的内容集合,比如通过 archiveListcategoryList 标签获取到的文章列表或分类列表。item 则是在每次循环中代表集合中的当前元素,您可以访问 item 的各种属性来显示具体内容。

举个例子,假设您想展示最新的几篇文章标题和链接:

{% archiveList latestArticles with type="list" limit="5" %}
    <ul class="article-list">
    {% for article in latestArticles %}
        <li>
            <a href="{{ article.Link }}">{{ article.Title }}</a>
        </li>
    {% endfor %}
    </ul>
{% endarchiveList %}

在这个例子中,latestArticles 是我们通过 archiveList 标签获取到的文章列表。在 for 循环中,article 变量在每一次迭代时代表列表中的一篇文章。我们可以通过 article.Link 访问文章链接,通过 article.Title 访问文章标题,并将其呈现在网页上。

遍历内容列表:以文档列表为例

文档列表是网站最常见的动态内容之一。通过 archiveList 标签,我们可以轻松获取到文章、产品等模型下的文档数据,然后用 for 循环来展现。

例如,您希望展示一个分类下的文档列表,包含标题、简介和发布时间:

{% archiveList documents with categoryId="1" type="list" limit="10" %}
    <div class="documents-section">
    {% for doc in documents %}
        <div class="document-item">
            <h3><a href="{{ doc.Link }}">{{ doc.Title }}</a></h3>
            <p>{{ doc.Description }}</p>
            <p class="meta">发布时间:{{ stampToDate(doc.CreatedTime, "2006-01-02") }}</p>
            {% if doc.Thumb %}
                <img src="{{ doc.Thumb }}" alt="{{ doc.Title }}" class="document-thumbnail">
            {% endif %}
        </div>
    {% endfor %}
    </div>
{% empty %}
    <p>当前分类下没有可用的文档。</p>
{% endarchiveList %}

这里,我们通过 archiveList 获取了分类ID为1的10篇文档。在 for doc in documents 循环中:

  • doc.Linkdoc.Title 分别提供了文档的链接和标题。
  • doc.Description 用于显示文档的简介。
  • doc.CreatedTime 是一个时间戳,我们配合 stampToDate 标签将其格式化为可读的日期。
  • doc.Thumb 则展示了文档的缩略图,并用 if 标签判断是否存在图片。

循环中的实用小技巧

为了让您的内容展示更加灵活和美观,安企CMS的 for 标签还提供了一些实用的辅助功能。

  1. 处理空列表:empty 标签 当您的内容集合可能为空时,empty 标签就能派上用场。如果 for 循环没有可遍历的 item,那么 empty 标签内的内容就会被显示,避免页面出现空白或错误。

    {% for item in someList %}
        {# 列表内容 #}
    {% empty %}
        <p>暂时没有相关内容可供显示。</p>
    {% endfor %}
    
  2. 获取循环序号:forloop.Counterforloop.Revcounter 在循环内部,forloop.Counter 可以获取当前循环的序号(从1开始),forloop.Revcounter 则获取当前循环距离结束的剩余项数。这在需要为特定项(如第一项或最后一项)应用不同样式时非常有用。

    {% for item in documents %}
        <div class="document-item {% if forloop.Counter == 1 %}first-item{% endif %}">
            <span class="item-number">{{ forloop.Counter }}.</span>
            <h3>{{ item.Title }}</h3>
        </div>
    {% endfor %}
    
  3. 调整遍历顺序:reversedsorted 有时您可能需要以不同的顺序显示内容。reversed 关键字可以让您倒序遍历集合,而 sorted 关键字可以对集合进行排序(适用于可排序类型)。

    {# 倒序显示文章 #}
    {% for article in latestArticles reversed %}
        ...
    {% endfor %}
    
    
    {# 排序显示文章(通常结合后台排序参数更常用) #}
    {% for article in latestArticles sorted %}
        ...
    {% endfor %}
    

    不过,在安企CMS中,通常我们通过 archiveList 等标签的 order 参数来指定排序方式,这样更为直接和高效。

  4. 间隔显示不同内容:cycle 标签 如果您想在循环中交替显示不同的值,例如为列表的奇偶行设置不同背景色,cycle 标签是理想选择。

    {% for item in documents %}
        <div class="document-item {% cycle "odd" "even" %}">
            {# ... 内容 ... #}
        </div>
    {% endfor %}
    

    这样,第一项会得到 odd 类,第二项得到 even 类,第三项又回到 odd,以此类推。

  5. 整洁代码:移除多余空行 为了保持生成HTML的简洁性,您可以利用 {%--} 来移除标签前后的多余空行。这对于循环中生成大量元素的场景尤其有用。

    {% for item in documents -%}
        <div class="document-item">
            {# ... 内容 ... #}
        </div>
    {%- endfor %}
    

嵌套循环:处理多级数据

在处理多级分类或复杂数据结构时,嵌套循环是必不可少的。例如,您可以先遍历顶级分类,然后在每个顶级分类内部,再遍历其子分类或属于该分类的文档。

{% categoryList mainCategories with moduleId="1" parentId="0" %}
    <nav class="main-nav">
    {% for mainCat in mainCategories %}
        <div class="main-category">
            <h4><a href="{{ mainCat.Link }}">{{ mainCat.Title }}</a></h4>
            {% if mainCat.HasChildren %}
                <ul class="sub-category-list">
                {% categoryList subCategories with parentId=mainCat.Id %}
                    {% for subCat in subCategories %}
                        <li><a href="{{ subCat.Link }}">{{ subCat.Title }}</a></li>
                    {% endfor %}
                {% endcategoryList %}
                </ul>
            {% endif %}
        </div>
    {% endfor %}
    </nav>
{% endcategoryList %}

这个例子展示了如何