如何使用AnQiCMS模板标签在首页展示最新文章列表？

在网站运营中，首页展示最新文章列表是提升用户参与度和网站活跃度的常用方法。AnQiCMS 提供了强大而灵活的模板标签系统，让您能够轻松地在首页实现这一功能，无需复杂的编程知识。本文将引导您一步步配置，让您的网站首页内容焕然一新。

了解 AnQiCMS 的模板系统

AnQiCMS 采用类似 Django 模板引擎的语法，使用 Go 语言开发，具备高效、安全的特性。模板文件通常以 .html 为后缀，存放在 /template 目录下。您会发现，在模板文件中，我们使用双花括号 {{变量}} 来输出变量值，而像条件判断、循环控制等逻辑操作，则使用单花括号和百分号 {% 标签 %} 来定义，并且需要相应的结束标签。

这种设计使得模板制作直观易懂，即使您是首次接触 AnQiCMS，也能很快上手。

第一步：定位您的首页模板文件

通常情况下，AnQiCMS 网站的首页模板文件会位于您的模板目录下的 index/index.html 或者在扁平化文件组织模式下直接是 index.html。如果您不确定，可以在后台的“模板设计”部分查看当前使用的模板路径。

找到这个文件后，我们将在这里添加显示最新文章列表的代码片段。

第二步：使用 archiveList 标签获取最新文章

在 AnQiCMS 中，archiveList 标签是获取文章列表的“万能钥匙”。它允许您根据多种条件（如分类、模型、排序方式、显示数量等）来筛选和展示文章。要在首页展示最新文章，我们需要利用它的一些关键参数。

假设您的文章内容模型 ID 为 1（您可以在后台“内容管理”->“内容模型”中确认），并且希望显示 5 篇最新文章，那么可以这样使用 archiveList 标签：

{% archiveList archives with moduleId="1" order="id desc" limit="5" type="list" %}
    {# 在这里循环展示每一篇文章 #}
{% endarchiveList %}

这里解释一下这些参数的含义：

  • archives：这是您为获取到的文章列表定义的一个变量名，您可以根据喜好自定义，后续在循环中将使用这个变量。
  • moduleId="1"：指定我们要获取的是文章模型下的内容。如果您的文章模型ID不是1，请修改为对应的ID。
  • order="id desc"：这是关键，它告诉系统按照文章的ID倒序排列，即最新发布的文章会排在前面。
  • limit="5"：限制只显示 5 篇文章。您可以根据页面布局的需求调整这个数字。
  • type="list"：表示我们只需要一个简单的列表，而不是带有分页功能的列表。

第三步：循环展示文章详情

获取到文章列表后，接下来需要做的就是遍历这个列表，并将每篇文章的标题、链接、简介等信息展示出来。我们会用到 for 循环标签来完成这项工作：

{% archiveList archives with moduleId="1" order="id desc" limit="5" type="list" %}
    {% for item in archives %}
        <div class="latest-article-item">
            <a href="{{ item.Link }}" title="{{ item.Title }}">
                <h3>{{ item.Title }}</h3>
                {% if item.Thumb %}
                    <img src="{{ item.Thumb }}" alt="{{ item.Title }}" class="article-thumbnail">
                {% endif %}
                <p>{{ item.Description|truncatechars:100 }}</p>
            </a>
            <div class="article-meta">
                <span>分类：{% categoryDetail with name="Title" id=item.CategoryId %}</span>
                <span>发布日期：{{ stampToDate(item.CreatedTime, "2006-01-02") }}</span>
                <span>阅读量：{{ item.Views }}</span>
            </div>
        </div>
    {% empty %}
        <p>暂时没有最新文章。</p>
    {% endfor %}
{% endarchiveList %}

让我们详细看看 for 循环内部的各个字段和标签：

  • {% for item in archives %}：循环遍历 archives 变量中的每一篇文章，每篇文章的数据都会被临时赋值给 item 变量。
  • {{ item.Link }}：输出当前文章的链接地址。
  • {{ item.Title }}：输出当前文章的标题。
  • {% if item.Thumb %} 和 <img src="{{ item.Thumb }}" ...>：这会检查当前文章是否有缩略图，如果有，就将其显示出来。这是一个很好的实践，可以避免没有缩略图时出现图片占位符或错误。
  • {{ item.Description|truncatechars:100 }}：输出文章的简介。这里还使用了 truncatechars:100 过滤器，这意味着如果简介文字超过 100 个字符，它会自动截断并添加省略号，保持页面整洁。
  • {% categoryDetail with name="Title" id=item.CategoryId %}：这是一个嵌套标签的巧妙用法。item.CategoryId 只能获取分类的 ID，而 categoryDetail 标签则能根据这个 ID 进一步获取分类的详细信息，例如分类的标题 Title。这样，我们就能在文章列表旁显示文章所属的分类名称。
  • {{ stampToDate(item.CreatedTime, "2006-01-02") }}：item.CreatedTime 返回的是一个时间戳，我们需要使用 stampToDate 函数将其格式化为易读的日期。"2006-01-02" 是 Go 语言定义日期格式的特殊字符串，它会输出类似 2023-10-27 的格式。
  • {{ item.Views }}：显示文章的浏览量。
  • {% empty %} 和 <p>暂时没有最新文章。</p>：这是一个非常实用的 for 循环的附加功能。如果 archives 列表是空的（即没有文章可显示），empty 块中的内容就会被执行，从而友好地提示用户。

完整的代码示例

将上述代码片段插入到您首页模板文件（例如 index.html）中合适的位置，通常是在页面的主要内容区域。

<section class="latest-articles-section">
    <h2>最新文章</h2>
    <div class="article-list-container">
        {% archiveList archives with moduleId="1" order="id desc" limit="5" type="list" %}
            {% for item in archives %}
                <div class="latest-article-item">
                    <a href="{{ item.Link }}" title="{{ item.Title }}">
                        <h3>{{ item.Title }}</h3>
                        {% if item.Thumb %}
                            <img src="{{ item.Thumb }}" alt="{{ item.Title }}" class="article-thumbnail">
                        {% endif %}
                        <p>{{ item.Description|truncatechars:100 }}</p>
                    </a>
                    <div class="article-meta">
                        <span class="category-name">分类：{% categoryDetail with name="Title" id=item.CategoryId %}</span>
                        <span class="publish-date">发布日期：{{ stampToDate(item.CreatedTime, "2006-01-02") }}</span>
                        <span class="view-count">阅读量：{{ item.Views }}</span>
                    </div>
                </div>
            {% empty %}
                <p>暂时没有最新文章可供显示。</p>
            {% endfor %}
        {% endarchiveList %}
    </div>
</section>

请注意，上述代码只包含了 HTML 结构和模板标签。为了让页面看起来更美观，您需要根据您的网站样式添加相应的 CSS 规则。

完成并清除缓存

修改模板文件并保存后，为了确保改