如何在首页展示最新的N篇文章或产品,并进行分页控制?

📅 👁️ 66

安企CMS:在首页高效展示最新内容并实现分页的**实践

网站首页作为访客了解站点内容和获取最新信息的重要入口,清晰、有效地展示最新发布的文章或产品至关重要。安企CMS提供了强大且灵活的模板标签,帮助我们轻松实现这一目标,同时还能对内容进行精细化的分页控制,确保用户体验流畅。

核心功能概览:archiveListpagination

要在首页展示最新的内容,我们主要会用到安企CMS的两个核心模板标签:archiveListpagination

archiveList 标签负责从数据库中获取我们所需的内容列表,无论是文章还是产品,都可以通过它来查询。它支持多种参数,用于筛选、排序和限制内容的数量,是我们获取最新内容的基础。

pagination 标签则是在 archiveList 的基础上,为内容列表提供分页功能。当内容数量较多时,分页能有效提升页面加载速度和用户浏览体验,避免一次性加载过多信息。这两个标签通常会协同工作,共同构建出功能完善的内容展示区域。

第一步:确定要展示的内容类型和数量

在安企CMS中,文章和产品都被视为不同的“内容模型”。在后台“内容管理”下的“内容模型”中,通常会默认有“文章模型”(ModuleId=1)和“产品模型”(ModuleId=2)。你需要根据自己的需求,确定是想展示最新的文章,还是最新的产品,或者两者都展示。

此外,你也需要决定在不分页的情况下,首页默认显示多少条最新内容,以及在分页模式下,每页显示多少条。

第二步:在首页模板中调用最新内容(无分页)

假设我们想在首页展示最新的5篇文章。我们可以编辑当前使用的模板(通常是template/你的模板目录/index/index.htmltemplate/你的模板目录/index.html),并使用 archiveList 标签。

<section class="latest-articles">
    <h2>最新文章</h2>
    <div class="article-list-container">
    {% archiveList latestArticles with moduleId="1" type="list" limit="5" order="id desc" %}
        {% for item in latestArticles %}
            <article class="article-summary">
                <a href="{{ item.Link }}">
                    {% if item.Thumb %}
                        <img src="{{ item.Thumb }}" alt="{{ item.Title }}" class="article-thumb">
                    {% endif %}
                    <h3>{{ item.Title }}</h3>
                    <p>{{ item.Description|truncatechars:100 }}</p>
                    <div class="article-meta">
                        <span>发布于:{{ stampToDate(item.CreatedTime, "2006-01-02") }}</span>
                        <span>浏览量:{{ item.Views }}</span>
                    </div>
                </a>
            </article>
        {% empty %}
            <p>暂无最新文章,敬请期待!</p>
        {% endfor %}
    {% endarchiveList %}
    </div>
</section>

这段代码的解释如下:

  • {% archiveList latestArticles with moduleId="1" type="list" limit="5" order="id desc" %}:这是核心的内容获取标签。
    • latestArticles:我们给获取到的文章列表定义了一个变量名,方便后续在 for 循环中使用。
    • moduleId="1":指定我们想要获取“文章模型”的内容(如果想获取产品,则改为moduleId="2")。
    • type="list":表示我们只获取一个固定数量的列表,不进行分页。
    • limit="5":限制只获取最新的5条内容。
    • order="id desc":按照内容的ID降序排列,由于ID通常是递增的,这也就意味着获取的是最新发布的内容。
  • {% for item in latestArticles %}:遍历 latestArticles 变量中的每一条内容。
  • item.Link, item.Title, item.Description, item.Thumb, item.CreatedTime, item.Views:这些都是 archiveList 标签中 item 变量可用的字段,分别代表文章的链接、标题、描述、缩略图、创建时间、浏览量等。你可以根据需要选择显示。
  • {{ stampToDate(item.CreatedTime, "2006-01-02") }}stampToDate 是安企CMS提供的一个实用过滤器,用于将时间戳格式化为我们可读的日期格式。"2006-01-02" 是 Go 语言中日期格式化的特殊写法。
  • {{ item.Description|truncatechars:100 }}truncatechars 过滤器用于截取文章描述,限制在100个字符内,并添加省略号,保持页面整洁。
  • {% empty %}:这是一个非常友好的设计,当 latestArticles 列表为空时,会自动显示 {% empty %} 块内的内容,避免页面空白。

第三步:添加分页控制

当内容量增大,我们不再满足于仅仅展示固定数量的内容时,就需要引入分页功能。这只需要对 archiveList 标签的 type 参数做一点修改,并结合 pagination 标签。

”`twig

<h2>最新产品</h2>
<div class="product-list-container">
{% archiveList paginatedProducts with moduleId="2" type="page" limit="10" order="id desc" %}
    {% for item in paginatedProducts %}
        <article class="product-item">
            <a href="{{ item.Link }}">
                {% if item.Logo %} {# 产品通常使用Logo作为主图 #}
                    <img src="{{ item.Logo }}" alt="{{ item.Title }}" class class="product-logo">
                {% endif %}
                <h3>{{ item.Title }}</h3>
                <p class="product-price">价格:¥{{ item.Price }}</p> {# 假设产品模型有价格字段 #}
                <div class="product-meta">
                    <span>更新于:{{ stampToDate(item.UpdatedTime, "2006-01-02") }}</span>
                </div>
            </a>
        </article>
    {% empty %}
        <p>暂无产品上架,敬请期待!</p>
    {% endfor %}

    {# 分页导航区域 #}
    <nav class="pagination-controls">
        {% pagination pages with show="5" %}
            <ul class="pagination-list">
                <li class="page-item {% if pages.FirstPage.IsCurrent %}active{% endif %}">
                    <a href="{{ pages.FirstPage.Link }}">首页</a>
                </li>
                {% if pages.PrevPage %}
                    <li class="page-item">
                        <a href="{{ pages

相关文章

模板中输出变量时,如何通过过滤器进行内容的安全转义以防止XSS攻击?

在网站内容的管理和展示过程中,确保用户数据的安全是至关重要的一环。特别是当网站需要展示用户提交的内容或从外部源获取的数据时,如何有效防范跨站脚本(XSS)攻击,是每一位网站运营者都需要关注的问题。安企CMS(AnQiCMS)在设计之初就充分考虑了这一点,通过其强大的模板引擎和灵活的过滤器机制,为内容的输出提供了坚实的安全保障。 ### XSS攻击

2025-11-08

如何在AnQiCMS模板中输出当前的日期和时间,并指定格式?

在 AnQiCMS 模板中显示日期和时间,并按照特定格式输出,是网站内容运营中常见的需求。无论是展示文章发布时间、活动截止日期,还是在页脚显示当前的年份,准确且美观的时间信息都能提升用户体验。AnQiCMS 提供了简洁高效的模板标签,让您可以轻松实现这些功能。 接下来,我们将详细探讨如何在 AnQiCMS 模板中输出当前的日期和时间,并指定您需要的格式。 --- ### 一、使用

2025-11-08

`extends`标签在AnQiCMS模板继承体系中扮演什么角色?

在AnQiCMS的模板开发中,`extends`标签扮演着核心角色,它是构建高效、可维护且结构统一的网站模板的关键。可以把`extends`标签理解为创建“母版”和“子页面”之间关联的桥梁,它让您可以轻松地为整个网站定义一个通用的布局骨架,而无需在每个页面中重复编写大量相同的代码。 想象一下,一个网站通常会有固定不变的头部(header)、底部(footer)以及侧边栏(sidebar)

2025-11-08

`macro`宏函数在AnQiCMS模板中如何帮助我减少重复的渲染逻辑?

在安企CMS的模板开发中,提升效率和保持代码整洁是每个开发者都在追求的目标。网站页面往往包含许多结构相似但内容不同的区域,例如文章列表中的每一篇文章卡片、产品详情页的各项特点展示,或是导航菜单中的每个链接项。如果每次都重复编写这些相似的渲染逻辑,不仅耗时耗力,而且一旦需要修改,就可能面临在多个地方进行重复性改动的困境。幸运的是,AnQiCMS强大的模板系统提供了 `macro` 宏函数

2025-11-08

如何根据分类ID筛选并循环输出特定分类下的文档列表?

在构建和运营网站时,内容的组织与呈现方式至关重要。尤其是当网站内容日益丰富,如何让访问者迅速找到他们感兴趣的信息,并清晰地浏览特定主题下的所有文章,就成了一个需要精心设计的问题。安企CMS(AnQiCMS)提供了强大且灵活的内容管理能力,让我们可以轻松实现对文档列表的精准控制与展示。今天,我们就来探讨一个常见的需求:如何根据分类ID,筛选并循环输出特定分类下的文档列表

2025-11-08

如何在文档列表中排除特定分类或多个分类的文章?

在安企CMS中管理网站内容时,我们常常需要精确控制文章的展示。有时,我们可能希望某个特定分类的文章不出现在常规的文章列表中,例如用于内部通知、测试内容,或者一些只在特定页面展示的推广信息。安企CMS提供了简洁而高效的方法来满足这类需求,让您能够灵活地排除特定分类或多个分类的文章,从而实现更精准的内容呈现。 ### 核心解决方案:灵活运用 `archiveList`

2025-11-08

如何仅显示某个分类下的文章,而不包含其子分类的文章?

在网站内容管理中,我们经常会遇到这样的需求:希望在某个页面上展示特定分类下的文章,但又不想包含该分类下的子分类文章,以保持内容的纯粹性和聚焦性。例如,您可能有一个“公司新闻”分类,其中包含“企业动态”、“行业资讯”等子分类,但在首页只想展示纯粹的“公司新闻”,而不希望将所有子分类内容混杂进来。 安企CMS作为一款功能强大且灵活的内容管理系统,提供了简洁高效的方式来满足这类精细化的内容展示需求

2025-11-08

如何根据文章的推荐属性(如“头条”、“推荐”)来筛选并展示文章列表?

在安企CMS中,高效的内容管理是网站成功的关键之一。文章推荐属性,作为内容精细化运营的重要一环,能够帮助我们更灵活地展示网站内容,引导用户关注重点信息,从而提升网站的活跃度和转化率。本文将深入探讨如何根据文章的推荐属性(如“头条”、“推荐”)来筛选并展示文章列表,让您的网站内容更具吸引力。 ### 理解安企CMS的文章推荐属性 安企CMS为每一篇发布的文章提供了丰富的推荐属性设置

2025-11-08