AnQiCMS模板如何通过循环标签(for)遍历数组并控制显示样式?

📅 👁️ 82

在网站运营过程中,我们常常需要展示各种列表数据,比如文章列表、产品列表、图片画廊或者导航菜单。安企CMS(AnQiCMS)提供了一套基于 Go 语言模板引擎的强大机制,其中 for 循环标签是实现这一需求的核心工具。通过灵活运用 for 标签及其辅助功能,我们可以轻松遍历数组或列表数据,并根据实际需求精准控制每个元素的显示样式。

安企CMS 模板中的循环标签 for:基础用法

在安企CMS模板中,for 循环标签的语法与多数流行的模板引擎类似,它允许我们迭代一个集合中的每个元素。最基本的用法是:

{% for item in collection %}
    {# 在这里显示每个item的内容 #}
{% endfor %}

这里 collection 是你想要遍历的数组或列表数据,而 item 是在每次循环中代表当前元素的临时变量。例如,如果你想显示最新的文章列表,可以这样使用 archiveList 标签获取数据,然后通过 for 循环来展现:

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

在这个例子中,articles 是通过 archiveList 标签获取到的文章集合,article 则是循环中代表每一篇文章的变量。你可以通过 article.Title 获取文章标题,article.Link 获取文章链接等,这些属性通常直接对应后台数据模型的字段。

collection 可能为空时,for 标签还提供了一个 {% empty %} 分支,用于在集合中没有元素时显示备用内容,这有助于提升用户体验:

<ul class="article-list">
{% archiveList articles with type="list" limit="5" %}
    {% for article in articles %}
        {# 文章内容展示 #}
    {% empty %}
        <li class="no-content">暂无最新文章。</li>
    {% endfor %}
{% endarchiveList %}
</ul>

控制显示样式:遍历过程中的辅助变量

for 循环内部,安企CMS模板引擎提供了一些特殊的辅助变量,可以帮助我们更精细地控制显示样式,或者为列表项添加序号。

  • forloop.Counter: 表示当前循环的序号,从 1 开始计数。
  • forloop.Revcounter: 表示当前循环的倒序序号,例如,如果列表有 5 项,第一项的 Revcounter 是 5,第二项是 4,以此类推。

利用这些变量,我们可以轻松实现交替行颜色、为第一项添加特殊样式等需求。例如,给列表中的偶数项和奇数项设置不同的背景色:

<ul class="article-list">
{% archiveList articles with type="list" limit="5" %}
    {% for article in articles %}
    <li class="article-item {% if forloop.Counter is divisibleby 2 %}even-row{% else %}odd-row{% endif %}">
        <span>{{ forloop.Counter }}.</span>
        <a href="{{ article.Link }}" title="{{ article.Title }}">
            <h3>{{ article.Title }}</h3>
            <p>{{ article.Description }}</p>
        </a>
    </li>
    {% empty %}
        <li class="no-content">暂无最新文章。</li>
    {% endfor %}
{% endarchiveList %}
</ul>

这里,is divisibleby 2 是一个过滤器,用于判断 forloop.Counter 是否能被 2 整除,从而实现奇偶行判断。

条件判断与数据筛选:if 标签的妙用

if 标签在 for 循环中同样扮演着重要的角色,它允许我们根据条件决定是否显示某个元素或应用特定样式。结合 item 对象的属性,可以实现非常灵活的展示逻辑。

比如,你可能只希望显示带有缩略图的文章,或者为没有缩略图的文章显示一个占位符:

”`twig

    {% archiveList articles with type=“list” limit=“5” %}

    {% for article in articles %}
    <li class="article-item">
        <a href="{{ article.Link }}" title="{{ article.Title }}">
            {% if article.Thumb %} {# 检查是否存在缩略图 #}
                <img src="{{ article.Thumb }}" alt="{{ article.Title }}" class="article-thumb">
            {% else %}
                <img src="/static/images/placeholder.webp" alt="无图" class="article-thumb-placeholder">
            {% endif %}
            <h3>{{ article.Title }}</h3>
            <p>{{ article.Description }}</p>
        </a>
    </li>
    {% empty %}
        <li class
    

相关文章

如何在多站点环境下,通过siteId参数调用其他站点的数据进行显示?

在AnQiCMS的多站点环境中,数据互通是提升运营效率、实现内容整合的关键一环。有时,我们可能需要在主站点上展示子站点的内容,或者在一个业务站点中调用另一个品牌站点的联系信息。这时候,AnQiCMS提供的`siteId`参数就显得尤为重要,它能帮助我们轻松实现跨站点的数据调用和显示。 ### 理解AnQiCMS的多站点优势 AnQiCMS设计之初就考虑到了多站点管理的需求

2025-11-08

如何在AnQiCMS模板中调试变量内容和类型(使用dump过滤器)?

在使用AnQiCMS搭建网站和定制模板时,我们经常会遇到这样的情况:页面上的内容显示不如预期,或者某个变量似乎没有正确传递。在这样的时刻,能够快速查看模板中变量的实际内容和数据类型,就显得尤为重要。幸运的是,AnQiCMS的模板引擎(它采用了类似Django的语法)为我们提供了一个非常实用的工具——`dump`过滤器,帮助我们轻松揭示变量的奥秘。 ### 核心功能:`dump`

2025-11-08

AnQiCMS如何实现评论列表的分页显示和评论内容的点赞功能?

在网站运营中,用户评论和互动是提升内容活力的关键。安企CMS(AnQiCMS)提供了强大的内容管理能力,其中评论功能是用户与内容互动的重要桥梁。本文将详细探讨如何在安企CMS中实现评论列表的分页显示,以及为评论内容添加点赞功能,让您的网站互动体验更上一层楼。 ### 安企CMS 评论功能概览 安企CMS从早期版本便已内置了文章评论和评论管理功能,这为网站提供了原生的用户互动支持

2025-11-08

如何在AnQiCMS中开启防采集干扰码和图片水印,以保护内容显示?

在数字化内容日益丰富的今天,保护网站上的原创内容显得尤为重要。安企CMS(AnQiCMS)深知内容创作者和企业用户的痛点,特别内置了防采集干扰码和图片水印功能,旨在帮助用户有效防止内容被恶意抓取和盗用,同时强化品牌标识。 ### 守护内容安全:启用防采集干扰码 原创内容的价值不言而喻,但网络上的信息采集工具却可能在未经许可的情况下大量复制您的文章,这不仅损害了原创者的权益,也可能分散网站流量

2025-11-08

如何在文章内容中设置规范链接(CanonicalUrl)并确保其在页面中正确显示?

在网站运营中,我们经常会遇到内容相似或重复的情况,这不仅可能分散搜索引擎的抓取预算,还可能稀释页面的权重,影响SEO表现。幸运的是,安企CMS为我们提供了设置规范链接(Canonical URL)的功能,这能有效帮助我们解决这些问题,明确告诉搜索引擎哪个页面才是内容的“原始”或“首选”版本。 ### 理解规范链接(Canonical URL)的价值 简单来说

2025-11-08

如何在AnQiCMS中配置并显示结构化数据(Json-LD),提升搜索引擎理解?

在当今的数字世界中,搜索引擎是用户发现网站内容的主要途径。为了帮助搜索引擎更好地“理解”我们网站上的内容,结构化数据扮演着至关重要的角色。Json-LD(JSON for Linking Data)作为一种轻量级、易于实施的标准化数据格式,能够以结构化的方式清晰地描述网页内容,从而提升网站在搜索结果中的可见性和展示效果。AnQiCMS作为一个注重SEO优化的内容管理系统

2025-11-08

AnQiCMS如何设置默认缩略图,以确保没有上传缩略图的文章也能正常显示图片?

在网站内容运营中,保持内容的视觉吸引力和一致性至关重要。许多时候,我们发布的文章可能没有特定的配图,或者编辑时遗漏了上传缩略图,这可能导致页面出现空白或样式不协调的情况。安企CMS(AnQiCMS)充分考虑了这一用户需求,提供了灵活的默认缩略图设置功能,确保即使没有单独上传缩略图的文章也能拥有美观的图片展示。 ### 为什么需要设置默认缩略图? 默认缩略图就像是网站的“备用方案”

2025-11-08

如何在AnQiCMS模板中将多行文本的换行符自动转换为HTML的`<br/>`标签?

在 AnQiCMS 模板中,如何让多行文本的换行符自动显示为 HTML `<br/>` 标签? 在网站内容运营中,我们经常会遇到需要展示多行文本的情况,比如文章简介、产品描述或者用户留言等。这些文本内容在后台编辑时,通常通过按下回车键来创建换行。然而,当这些包含换行符(通常是 `\n`)的文本直接输出到 HTML 页面时,浏览器并不会将其解析为视觉上的换行。相反,HTML

2025-11-08