如何在模板中遍历和显示嵌套的分类或内容结构?

在网站运营中,我们经常需要构建复杂且层次分明的内容结构,例如多级分类导航、产品树形结构,或是分类下嵌套展示相关文章等。安企CMS(AnQiCMS)凭借其灵活的模板引擎和丰富的标签功能,使得在模板中遍历和显示这些嵌套结构变得简单而高效。

安企CMS的模板系统采用了类似Django的语法,这意味着您将主要通过 {{变量}} 来输出数据,并通过 {% 标签 %} 来执行逻辑控制,例如条件判断和循环遍历。深入理解 {% for ... in ... %} 循环标签以及各个数据标签的参数和返回结构,是实现复杂嵌套展示的关键。

理解模板中的循环与判断

在AnqiCMS模板中,{% for item in items %} 结构是遍历列表数据的核心。每次循环,item 变量都会指向列表中的一个元素,您可以通过 item.属性名 的形式访问其内部数据。例如,当遍历一个分类列表时,item 可能代表一个分类对象,您可以访问 item.Title(分类标题)、item.Link(分类链接)等。

同时,{% if 条件 %} 标签允许您根据数据的特定状态进行条件渲染,这在处理嵌套结构时尤其有用,例如判断一个分类是否有子分类。如果遍历的列表可能为空,您还可以使用 {% empty %} 标签来为没有内容的情况提供替代展示。

遍历和显示嵌套分类结构

安企CMS提供了 categoryList 标签来获取分类数据。要实现嵌套分类的展示,核心在于巧妙地利用 parentId 参数和分类对象自身的 HasChildren 属性。

首先,您可以获取顶级的分类列表:

{% categoryList categories with moduleId="1" parentId="0" %}
    {# 一级分类列表 #}
    <ul>
        {% for category in categories %}
            <li>
                <a href="{{ category.Link }}">{{ category.Title }}</a>
                {# 判断当前分类是否有子分类 #}
                {% if category.HasChildren %}
                    {# 如果有子分类,则再次调用 categoryList 标签,并将其 parentId 设置为当前分类的ID #}
                    <ul>
                        {% categoryList subCategories with parentId=category.Id %}
                            {% for subCategory in subCategories %}
                                <li><a href="{{ subCategory.Link }}">{{ subCategory.Title }}</a></li>
                            {% endfor %}
                        {% endcategoryList %}
                    </ul>
                {% endif %}
            </li>
        {% endfor %}
    </ul>
{% endcategoryList %}

这段代码展示了如何递归地遍历两级分类。对于更深层次的嵌套,您可以按照相同的模式,在 subCategories 的循环内部再次检查 subCategory.HasChildren 并调用 categoryList

在嵌套分类中显示关联内容

网站结构往往需要将分类与具体内容(如文章、产品)关联起来。在AnqiCMS中,您可以将 categoryList 标签与 archiveList 标签结合使用,在展示分类的同时,也显示该分类下的部分内容。

{% categoryList categories with moduleId="1" parentId="0" %}
    {# 遍历一级分类 #}
    {% for category in categories %}
        <div class="category-block">
            <h3><a href="{{ category.Link }}">{{ category.Title }}</a></h3>
            <ul>
                {# 在每个分类下,获取其关联的文章列表 #}
                {% archiveList articles with type="list" categoryId=category.Id limit="5" %}
                    {% for article in articles %}
                        <li>
                            <a href="{{ article.Link }}">{{ article.Title }}</a>
                            <span>{{ stampToDate(article.CreatedTime, "2006-01-02") }}</span>
                        </li>
                    {% empty %}
                        <li>该分类暂无文章。</li>
                    {% endfor %}
                {% endarchiveList %}
            </ul>
        </div>
    {% endfor %}
{% endcategoryList %}

这里,archiveList 标签通过 categoryId=category.Id 参数,精确地获取了当前循环分类下的文章。您可以根据需要调整 limit 参数来控制显示的文章数量。

巧用导航列表实现多级菜单

除了手动构建分类嵌套,安企CMS的 navList 标签是构建多级导航菜单的理想选择。该标签直接返回一个已经处理好嵌套关系的数据结构,极大地简化了多级菜单的开发。

后台配置好的多级导航,在模板中可以直接这样调用:

{% navList mainNavs %}
    <ul class="main-menu">
        {% for nav in mainNavs %}
            <li {% if nav.IsCurrent %}class="active"{% endif %}>
                <a href="{{ nav.Link }}">{{ nav.Title }}</a>
                {# 判断当前导航项是否有子导航 #}
                {% if nav.NavList %}
                    <ul class="sub-menu">
                        {% for subNav in nav.NavList %}
                            <li {% if subNav.IsCurrent %}class="active"{% endif %}>
                                <a href="{{ subNav.Link }}">{{ subNav.Title }}</a>
                                {# 还可以继续检查 subNav.NavList 实现更深层次的嵌套 #}
                            </li>
                        {% endfor %}
                    </ul>
                {% endif %}
            </li>
        {% endfor %}
    </ul>
{% endnavList %}

navList 返回的 nav 对象具有 NavList 属性,可以直接用于遍历其子导航项,这让多级菜单的构建非常直观。

更进一步,您甚至可以在这些导航项下,根据其关联的 PageId(如果导航项链接的是某个分类或单页),再次调用 archiveListcategoryList 来展示相关内容:

{% navList mainNavs %}
    <ul class="main-menu">
        {% for nav in mainNavs %}
            <li>
                <a href="{{ nav.Link }}">{{ nav.Title }}</a>
                {% if nav.NavList %}
                    <ul class="sub-menu">
                        {% for subNav in nav.NavList %}
                            <li>
                                <a href="{{ subNav.Link }}">{{ subNav.Title }}</a>
                                {# 如果子导航关联的是一个分类,显示该分类下的文章 #}
                                {% if subNav.PageId > 0 %}
                                    {% archiveList articles with type="list" categoryId=subNav.PageId limit="3" %}
                                        {% if articles %}
                                            <div class="articles-in-menu">
                                                {% for article in articles %}
                                                    <p><a href="{{ article.Link }}">{{ article.Title }}</a></p>
                                                {% endfor %}
                                            </div>
                                        {% endif %}
                                    {% endarchiveList %}
                                {% endif %}
                            </li>
                        {% endfor %}
                    </ul>
                {% endif %}
            </li>
        {% endfor %}
    </ul>
{% endnavList %}

这个例子将导航、分类与内容巧妙地结合起来,构建出高度动态和丰富的信息展示。

模型自定义字段的嵌套应用

在安企CMS中,内容模型和分类都支持自定义字段。这些自定义字段也可以包含更复杂的、嵌套的数据结构,例如图片组图(Images)。您可以通过循环遍历这些字段来实现它们的展示。

如果文档详情页有一个名为 Images 的自定义图片组字段:

{% archiveDetail archiveImages with name="Images" %}
    <div class="product-gallery">
        {% for img in archiveImages %}
            <img src="{{ img }}" alt="产品图片">
        {% endfor %}
    </div>
{% endarchiveDetail %}

类似地,如果您在后台为分类或文档模型定义了 Extra 参数(例如包含多个键值对的附加信息),可以通过 archiveParamscategoryDetail 获取后进行遍历:

{% archiveParams params %}
    <div class="extra-info">
        {% for item in params %}
            <p><strong>{{ item.Name }}:</strong> {{ item.Value }}</p>
        {% endfor %}
    </div>
{% endarchiveParams %}

这使得您可以灵活地展示自定义数据,无论是简单的文本还是复杂的图片集合。

总结

安企CMS的模板引擎提供了强大的灵活性来处理各种嵌套结构。通过熟练运用 {% for %}{% if %} 标签,以及 categoryListarchiveList 和 `navList