AnqiCMS模板如何通过for循环标签遍历数据，在前台展示列表内容？

在现代网站建设中，内容列表无处不在，无论是文章列表、产品展示、用户评论，还是导航菜单，都离不开高效地组织和呈现数据。AnqiCMS作为一款基于Go语言的企业级内容管理系统，在模板制作方面提供了直观且强大的循环标签，让您能够轻松地在前台展示各类列表内容。

AnqiCMS的模板引擎采用了与Django和Blade语法相似的设计理念，这意味着对于许多熟悉Web开发的同行来说，上手会非常快。它通过特定的标签语法来处理逻辑和数据展示，其中for循环标签就是核心之一，它能帮助我们遍历数据集，并按照预设的样式输出每一项内容。

认识AnqiCMS的模板循环机制

在AnqiCMS的模板文件中，所有的逻辑控制都包裹在{% %}标签中，而变量的输出则使用{{ }}。当我们谈到列表展示，for循环标签便是主角。它的基本结构非常清晰：

{% for item in data_source %}
    {# 在这里放置您希望对每一项数据进行展示的HTML代码 #}
    {{ item.Property1 }}
    {{ item.Property2 }}
{% endfor %}

在这里，data_source是您要遍历的数据集合，可以是文章列表、分类列表等等。item则是一个临时变量，它在每次循环中代表着data_source中的当前数据项。通过item.加上数据项的具体属性名（例如item.Title、item.Link），您就可以访问并展示该数据项的详细信息了。

获取数据源：为循环提供内容

要使用for循环，首先需要有数据可供循环。AnqiCMS提供了多种内置标签来帮助您从后台获取各种类型的数据列表，并将它们作为data_source传递给for循环。其中最常用的是archiveList标签，它主要用于获取文章或产品等文档类型的列表。

例如，如果您想在首页展示最新的10篇文章，可以这样使用archiveList标签：

{% archiveList archives with type="list" limit="10" order="id desc" %}
    {# 这里的 'archives' 就是我们将要用 for 循环遍历的数据源 #}
{% endarchiveList %}

在这个例子中：

  • archiveList是我们用来获取文档列表的标签。
  • archives是我们自定义的变量名，它会承载archiveList返回的数据集合。
  • type="list"表示我们希望获取一个简单的列表，而不是用于分页的列表。
  • limit="10"限制了只获取最新的10条数据。
  • order="id desc"则指定了按ID降序排列，即最新发布的内容靠前显示。

除了archiveList，AnqiCMS还提供了其他实用的列表获取标签，例如：

  • categoryList：用于获取分类列表，常用于构建导航或分类树。
  • pageList：用于获取单页面列表，如“关于我们”、“联系我们”等。
  • tagList：获取网站的所有标签列表。
  • tagDataList：根据指定的标签ID获取相关文档列表。
  • navList：获取后台配置的导航菜单。

这些标签都遵循类似的模式，将获取到的数据集合赋值给一个您指定的变量，然后这个变量就可以作为for循环的data_source。

遍历与展示数据：构建列表视图

有了数据源，我们就可以结合for循环，将内容项逐一展示出来了。让我们以文章列表为例，看看如何在一个循环中展示文章的标题、链接、简介和缩略图：

<div class="article-list">
    {% archiveList articles with type="list" limit="10" order="id desc" %}
        {% for item in articles %}
        <div class="article-item">
            <a href="{{ item.Link }}" class="article-title">{{ item.Title }}</a>
            {% if item.Thumb %}
                <a href="{{ item.Link }}" class="article-thumb">
                    <img src="{{ item.Thumb }}" alt="{{ item.Title }}">
                </a>
            {% endif %}
            <p class="article-description">{{ item.Description|truncatechars:100 }}</p>
            <div class="article-meta">
                <span>发布日期：{{ stampToDate(item.CreatedTime, "2006-01-02") }}</span>
                <span>浏览量：{{ item.Views }}</span>
            </div>
        </div>
        {% empty %}
        <p class="no-content">暂无文章内容。</p>
        {% endfor %}
    {% endarchiveList %}
</div>

在这个例子中：

  • 我们首先使用archiveList获取了最新的10篇文章，并将数据集合存储在articles变量中。
  • 然后，{% for item in articles %}开始遍历这个集合。
  • {{ item.Link }}和{{ item.Title }}分别输出了文章的链接和标题。
  • {% if item.Thumb %}是一个条件判断，只有当文章存在缩略图时才显示图片。{{ item.Thumb }}会输出缩略图的URL。
  • {{ item.Description|truncatechars:100 }}展示了文章的简介，并使用truncatechars:100过滤器将其截断到100个字符，避免过长。
  • {{ stampToDate(item.CreatedTime, "2006-01-02") }}则是一个非常实用的时间格式化函数，它将文章的创建时间戳转换为我们熟悉的”年-月-日”格式。
  • {{ item.Views }}则直接输出了文章的浏览量。
  • {% empty %}块在这里扮演了重要的角色。如果articles数据集合为空（即没有获取到任何文章），那么for循环不会执行，而是会显示empty块中的内容，这极大地提升了用户体验。

循环中的实用技巧：更精细的控制

for循环标签不仅能遍历数据，还提供了一些内置变量和修饰符，让您可以对列表的展示进行更精细的控制：

  1. forloop变量：在每次循环中，forloop变量会提供当前循环的状态信息：

    • forloop.Counter：当前循环的次数（从1开始）。
    • forloop.Revcounter：当前循环剩余的次数。

    这在需要为列表中的第一项、最后一项或特定位置的项应用不同样式时非常有用。例如，为第一个列表项添加一个active类：

    {% for item in articles %}
<div class="article-item {% if forloop.Counter == 1 %}active{% endif %}">
    {# ... 内容展示 ... #}
</div>
{% endfor %}

  2. cycle标签：当您需要在循环中交替使用不同的值时（例如，为相邻的列表项应用不同的背景色），cycle标签就派上用场了：

    {% for item in articles %}
<div class="article-item {% cycle 'odd' 'even' %}">
    {# ... 内容展示 ... #}
</div>
{% endfor %}

    这会让第一个div拥有odd类，第二个div拥有even类，第三个又回到odd，以此类