AnQiCMS 如何在首页显示最新发布的文章列表？

网站首页是访客抵达网站后的第一印象，及时更新的最新文章列表能够有效提升网站的活跃度和用户粘性。对于使用安企CMS（AnQiCMS）的用户来说，在首页展示最新发布的文章列表是一项基础且重要的功能，通过系统提供的灵活模板标签，可以轻松实现。

AnQiCMS 凭借其高效、可定制的特点，为用户提供了直观的模板系统。您无需深入了解复杂的后端代码，只需掌握其强大的模板标签用法，即可在网站前端自由地组织和展示内容。

第一步：找到您的首页模板文件

要修改首页内容，首先需要定位到当前网站正在使用的首页模板文件。通常情况下，安企CMS的模板文件位于您网站根目录下的 /template/ 文件夹内。在其中，您会找到一个以您的主题名称命名的文件夹（例如 default），进入该文件夹后，首页模板文件通常命名为 index.html 或位于 index/index.html。

如果您不确定是哪个文件，可以查看您主题文件夹内的 config.json 文件，它会定义主题的基本信息。一旦找到 index.html 文件，您就可以开始编辑它，来添加最新文章的展示逻辑。

第二步：理解 archiveList 标签的核心用法

AnQiCMS 提供了 archiveList 标签，这是用来获取文章列表的核心工具。为了在首页显示最新发布的文章，我们需要配置这个标签来获取特定模型（通常是“文章模型”）下的内容，并按照发布时间倒序排列。

archiveList 标签有几个关键参数，对于显示最新文章至关重要：

  • moduleId：指定要获取哪个内容模型下的文章。在 AnQiCMS 中，“文章模型”通常对应的 moduleId 为 1。如果您有自定义的文章模型，请根据后台“内容管理”->“内容模型”中实际的模型ID进行设置。
  • order：定义文章的排序方式。要显示最新发布的文章，我们通常会使用 id desc（按文章ID降序，新文章ID更大）或 CreatedTime desc（按创建时间降序）。两者都能达到显示最新文章的效果，id desc 通常更简洁。
  • limit：控制要显示的文章数量。例如，limit="5" 将显示最新的5篇文章。
  • type：通常设置为 list，表示获取一个简单的文章列表，而不是带有分页功能的列表（首页通常不需要分页）。

结合这些参数，一个基本的最新文章列表调用结构如下：

{% archiveList latestArticles with moduleId="1" order="id desc" limit="5" type="list" %}
    {% for article in latestArticles %}
        <!-- 在这里编写每篇文章的展示HTML结构 -->
    {% endfor %}
{% endarchiveList %}

在这段代码中，latestArticles 是一个自定义的变量名，用于存放获取到的最新文章数据，您可以在 for 循环中通过 article 变量来访问每篇文章的详细信息。

第三步：构建文章的显示结构

在 {% for article in latestArticles %} 循环内部，我们可以使用 article 变量来访问每篇文章的各种属性，并将其呈现在网页上。常见的文章属性包括：

  • article.Title：文章标题
  • article.Link：文章详情页链接
  • article.Description：文章摘要或简介
  • article.CreatedTime：文章发布时间（时间戳格式）
  • article.Thumb：文章缩略图地址
  • article.CategoryId：文章所属分类ID

下面我们来逐步完善文章的显示结构：

  1. 显示文章标题和链接：

    <h3><a href="{{ article.Link }}" title="{{ article.Title }}">{{ article.Title }}</a></h3>

  2. 格式化显示发布时间： AnQiCMS 提供了 stampToDate 标签，可以将时间戳格式化为易读的日期时间字符串。Go语言的日期格式化方式比较特殊，例如 2006-01-02 15:04:05 代表 年-月-日 时:分:秒。

    <p class="article-meta">发布于：<span>{{ stampToDate(article.CreatedTime, "2006年01月02日") }}</span></p>

  3. 显示文章摘要：

    <p class="article-description">{{ article.Description }}</p>

    这里 article.Description 如果您在后台发布文章时没有手动填写，系统会自动从文章内容中提取一部分作为摘要。

  4. 显示文章缩略图： 如果文章设置了缩略图，可以显示出来以增加视觉吸引力。

    {% if article.Thumb %}
    <div class="article-thumbnail">
        <a href="{{ article.Link }}" title="{{ article.Title }}">
            <img src="{{ article.Thumb }}" alt="{{ article.Title }}">
        </a>
    </div>
{% endif %}

  5. 显示文章所属分类： 您可以结合 categoryDetail 标签，根据 article.CategoryId 获取并显示文章的分类名称和分类链接。

    {% if article.CategoryId %}
    所属分类：<a href="{% categoryDetail with name='Link' id=article.CategoryId %}">{% categoryDetail with name='Title' id=article.CategoryId %}</a>
{% endif %}

完整示例代码

将以上所有元素组合起来，您可以得到一个功能相对完整的最新文章列表展示区。您可以将其放置在首页模板（index.html）中您希望显示的位置。

<section class="latest-articles-section">
    <h2>最新动态</h2>
    <ul class="articles-list">
        {% archiveList latestArticles with moduleId="1" order="id desc" limit="5" type="list" %}
            {% for article in latestArticles %}
                <li class="article-item">
                    <div class="item-inner">
                        {% if article.Thumb %}
                            <div class="article-thumbnail">
                                <a href="{{ article.Link }}" title="{{ article.Title }}">
                                    <img src="{{ article.Thumb }}" alt="{{ article.Title }}">
                                </a>
                            </div>
                        {% endif %}
                        <div class="article-content">
                            <h3><a href="{{ article.Link }}" title="{{ article.Title }}">{{ article.Title }}</a></h3>
                            <p class="article-meta">
                                <span>发布于：{{ stampToDate(article.CreatedTime, "2006年01月02日") }}</span>
                                {% if article.CategoryId %}
                                    <span>所属分类：<a href="{% categoryDetail with name='Link' id=article.CategoryId %}">{% categoryDetail with name='Title' id=article.CategoryId %}</a></span>
                                {% endif %}
                            </p>
                            <p class="article-description">{{ article.Description|truncatechars:100 }}</p> {# 截取前100个字符 #}
                            <a href="{{ article.Link }}" class="read-more-btn">阅读全文 &raquo;</a>
                        </div>
                    </div>
                </li>
            {% empty %}
                <li class="no-content-message">目前还没有发布的文章，敬请期待！</li>
            {% endfor %}
        {% endarchiveList %}
    </ul>
</section>

请注意： 上述代码中的 class 属性（如 latest-articles-section, articles-list 等）仅为