在安企CMS中,如何通过模板标签动态获取并显示文章列表?

📅 👁️ 78

网站内容的动态展示是现代网站运营的核心之一,它不仅能提升用户体验,让访客轻松找到感兴趣的信息,还能有效助力搜索引擎优化(SEO),使网站更受搜索引擎青睐。在安企CMS中,通过强大的模板标签功能,我们可以非常灵活地获取并显示各种类型的文章列表。

安企CMS的模板系统借鉴了Django模板引擎的语法,整体风格自然流畅,对于熟悉前端开发的你来说,上手会非常快。在模板文件中,我们主要通过两种符号来操作:双花括号 {{ 变量 }} 用于输出变量内容,而单花括号加百分号 {% 标签 %} 则用于执行逻辑判断、循环或者调用特定的功能标签。

核心工具:archiveList 标签

要动态获取并显示文章列表,我们首先要认识安企CMS中的“万能”标签—— archiveList。这个标签是我们构建文章列表的基石,它提供了丰富的参数,可以帮助我们精准地筛选、排序和展示文章。

基本文章列表的获取

如果你只是想在一个页面上展示最新发布的几篇文章,不涉及分页,那么 archiveList 标签会非常简单实用。我们通常会给这个标签一个变量名,比如 articles,然后通过 for 循环遍历这个变量来显示每篇文章的信息。

例如,要在首页展示5篇最新文章的标题和简介:

<div class="latest-articles">
    {% archiveList articles with type="list" limit="5" order="id desc" %}
        {% for item in articles %}
            <article>
                <h3><a href="{{ item.Link }}">{{ item.Title }}</a></h3>
                <p>{{ item.Description }}</p>
                <footer>
                    <span>发布日期:{{ stampToDate(item.CreatedTime, "2006年01月02日") }}</span>
                    <span>浏览量:{{ item.Views }}</span>
                </footer>
            </article>
        {% empty %}
            <p>暂无文章内容。</p>
        {% endfor %}
    {% endarchiveList %}
</div>

在这段代码中:

  • archiveList articles 定义了一个名为 articles 的变量,用来存储获取到的文章列表。
  • type="list" 表示我们获取的是一个固定数量的列表,而不是为分页做准备。
  • limit="5" 限制了只显示最新的5篇文章。
  • order="id desc" 告诉系统按照文章ID倒序排列,通常意味着最新发布的在前。你也可以使用 order="views desc" 按浏览量排序,或者 order="sort desc" 按后台自定义排序。
  • for item in articles 循环遍历 articles 变量中的每一篇文章,将当前文章的数据赋值给 item
  • item.Linkitem.Titleitem.Descriptionitem.Views 都是每篇文章的属性,可以直接通过 . 语法访问。
  • stampToDate(item.CreatedTime, "2006年01月02日") 是一个非常有用的时间格式化函数。安企CMS中的时间戳通常是10位数字,你需要使用 stampToDate 并传入Go语言的时间格式(例如 “2006年01月02日”)才能将其转换为我们熟悉的日期格式。
  • {% empty %} 块会在 articles 列表为空时显示,避免页面空白。

如果你需要显示文章的缩略图,可以利用 item.Thumbitem.Logo 属性。为了确保图片存在时才显示,你可以结合 if 标签使用:

{% if item.Thumb %}
    <img src="{{ item.Thumb }}" alt="{{ item.Title }}" class="article-thumb" />
{% endif %}

结合 moduleId 获取特定内容模型文章

安企CMS支持灵活的内容模型,这意味着你可能不仅有“文章”模型,还有“产品”、“案例”等其他模型。如果你想获取特定模型下的文章列表,就需要使用 moduleId 参数。通常,“文章模型”的 moduleId1,“产品模型”为 2。你可以在后台的内容模型管理中查看具体ID。

例如,获取最新的5个产品列表:

{% archiveList products with type="list" moduleId="2" limit="5" order="id desc" %}
    {% for product in products %}
        <div class="product-item">
            <a href="{{ product.Link }}">
                {% if product.Logo %}
                    <img src="{{ product.Logo }}" alt="{{ product.Title }}" />
                {% endif %}
                <h3>{{ product.Title }}</h3>
            </a>
            <p>{{ product.Description }}</p>
        </div>
    {% endfor %}
{% endarchiveList %}

实现分页:让文章列表更易浏览

当文章数量很多时,分页是必不可少的功能。在安企CMS中,实现分页列表需要 archiveList 标签与 pagination 标签配合使用。

首先,archiveList 需要将 type 设置为 "page",并指定每页显示的数量 limit。然后,在 archiveList 标签的 endarchiveList 之后,我们使用 pagination 标签来生成分页导航。

以下是一个带分页的文章列表示例:

”`twig

{% archiveList articles with type="page" limit="10" %}
    {% for article in articles %}
        <article class="article-item">
            <h2><a href="{{ article.Link }}">{{ article.Title }}</a></h2>
            {% if article.Thumb %}
                <img src="{{ article.Thumb }}" alt="{{ article.Title }}" />
            {% endif %}
            <p class="article-description">{{ article.Description }}</p>
            <div class="article-meta">
                <span>分类: {% categoryDetail with name="Title" id=article.CategoryId %}</span>
                <span>浏览量: {{ article.Views }}</span>
                <span>发布时间: {{ stampToDate(article.CreatedTime, "2006年01月02日") }}</span>
            </div>
        </article>
    {% empty %}
        <p>这里暂时没有文章。</p>
    {% endfor %}

    <div class="pagination-nav">
        {% pagination pages with show="5" %}
            <a href="{{ pages.FirstPage.Link }}" class="page-link">首页</a>
            {% if pages.PrevPage %}<a href="{{ pages.

相关文章

如何配置安企CMS以支持响应式设计或独立的移动端内容显示?

在当今多设备并存的时代,网站能够良好地适应各种屏幕尺寸,无论是PC、平板还是手机,已成为一项基本要求。安企CMS(AnQiCMS)深知这一点,并提供了多种灵活的配置选项,帮助你轻松实现响应式设计或独立的移动端内容显示,确保你的内容在任何设备上都能给用户带来优质的浏览体验。 安企CMS提供了三种主要的网站模式来支持多终端显示:自适应、代码适配和PC+手机独立站点

2025-11-08

安企CMS如何实现不同页面(如文章、产品、单页)使用独立模板进行显示?

在网站运营中,我们常常需要针对不同类型的内容,如一篇深度文章、一个产品展示页或是一个“关于我们”的单页面,采用截然不同的布局和设计风格。这种差异化的展示不仅能提升用户体验,更能帮助内容更好地传达信息,达成营销目标。AnQiCMS(安企CMS)在这方面提供了非常灵活且强大的解决方案,让我们可以轻松实现不同页面使用独立模板进行显示。 安企CMS的核心设计理念之一就是“灵活的内容模型”

2025-11-08

如何在安企CMS中自定义内容在前端页面的展示布局?

安企CMS (AnQiCMS) 作为一个高效、灵活的内容管理系统,其强大的模板功能和内容模型为我们提供了极大的自由度,可以根据网站的实际需求,精细化地控制内容在前端页面的展示布局。要实现这一目标,我们需要深入理解安企CMS的模板引擎、内容模型以及内置标签的运用。 --- ### 安企CMS 布局定制的核心要素 在安企CMS中自定义内容布局,主要围绕以下几个核心要素展开: 1.

2025-11-08

如何在前端页面中高效地组织和引用模板中的公共页头、页脚等代码片段?

在安企CMS中管理前端页面代码,特别是页头、页脚等需要在多个页面中重复出现的代码片段,是提升开发效率和网站可维护性的关键。安企CMS提供了强大且灵活的模板引擎,让我们能够通过优雅的方式组织和引用这些通用代码。 ### 理解模板复用的重要性 设想一下,如果您的网站有几十个甚至上百个页面,每个页面都独立地包含了完整的页头、导航、页脚代码。当网站的Logo需要更换,或者页脚的版权信息需要更新时

2025-11-08

如何根据分类、模块或推荐属性筛选并显示特定内容列表?

在使用安企CMS管理网站内容时,我们经常需要将特定的内容(比如文章、产品)以列表的形式展现在网站的不同区域。这可能意味着我们需要在首页显示最新的头条文章,在产品分类页只展示某个特定系列的产品,或者在侧边栏推荐一些热门内容。安企CMS提供了灵活的标签,让我们可以根据分类、内容模型或推荐属性等多种条件,精准地筛选并显示所需的内容列表。 接下来,我们就一起探索如何利用安企CMS强大的模板标签

2025-11-08

安企CMS如何实现内容详情页的完整信息(包括自定义字段)显示?

在网站运营中,内容详情页是访客了解产品或服务的核心入口,其信息展示的完整性和用户体验至关重要。安企CMS(AnQiCMS)在设计时充分考虑了内容展示的灵活性和定制性,即使是您定义的各种自定义字段,也能在内容详情页中优雅地呈现。 接下来,我们将一起探索如何在安企CMS中,从内容模型的建立到模板的调用,完整地展现内容详情页的所有信息,包括那些独具匠心的自定义字段。 ### 构建内容骨架

2025-11-08

如何在内容列表和详情页中优化图片显示(缩略图、多图、懒加载)?

在内容为王的数字时代,网站上的图片不仅是视觉的装饰,更是吸引用户、传递信息、提升品牌形象的关键元素。然而,未经优化的图片也可能成为拖慢网站加载速度、影响用户体验甚至损害SEO表现的罪魁祸首。幸运的是,安企CMS(AnQiCMS)为我们提供了全面而强大的图片优化工具,让网站在保持视觉吸引力的同时,实现高性能加载。 本文将深入探讨在安企CMS中,如何充分利用其功能

2025-11-08

如何在安企CMS中动态显示网站的导航菜单,包括二级或多级下拉菜单?

在网站运营中,清晰、直观的导航菜单是用户体验的基石。一个设计精良的导航系统,不仅能帮助访客迅速找到所需信息,更能有效引导其在网站内部的浏览路径,对网站的可用性和SEO表现都有着举足轻重的影响。安企CMS深知其重要性,提供了一套灵活且强大的导航管理功能,让您无需编写复杂的代码,就能轻松实现动态、多级的导航菜单。 接下来,我们将一起探索如何在安企CMS中构建和管理这些动态导航菜单

2025-11-08