安企CMS:在首页高效展示最新内容并实现分页的**实践
网站首页作为访客了解站点内容和获取最新信息的重要入口,清晰、有效地展示最新发布的文章或产品至关重要。安企CMS提供了强大且灵活的模板标签,帮助我们轻松实现这一目标,同时还能对内容进行精细化的分页控制,确保用户体验流畅。
核心功能概览:archiveList 与 pagination
要在首页展示最新的内容,我们主要会用到安企CMS的两个核心模板标签:archiveList 和 pagination。
archiveList 标签负责从数据库中获取我们所需的内容列表,无论是文章还是产品,都可以通过它来查询。它支持多种参数,用于筛选、排序和限制内容的数量,是我们获取最新内容的基础。
而 pagination 标签则是在 archiveList 的基础上,为内容列表提供分页功能。当内容数量较多时,分页能有效提升页面加载速度和用户浏览体验,避免一次性加载过多信息。这两个标签通常会协同工作,共同构建出功能完善的内容展示区域。
第一步:确定要展示的内容类型和数量
在安企CMS中,文章和产品都被视为不同的“内容模型”。在后台“内容管理”下的“内容模型”中,通常会默认有“文章模型”(ModuleId=1)和“产品模型”(ModuleId=2)。你需要根据自己的需求,确定是想展示最新的文章,还是最新的产品,或者两者都展示。
此外,你也需要决定在不分页的情况下,首页默认显示多少条最新内容,以及在分页模式下,每页显示多少条。
第二步:在首页模板中调用最新内容(无分页)
假设我们想在首页展示最新的5篇文章。我们可以编辑当前使用的模板(通常是template/你的模板目录/index/index.html 或 template/你的模板目录/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