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

安企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