怎样才能为安企CMS中的文章列表设计专属的展示模板？

在安企CMS中，为文章列表设计专属的展示模板，是打造网站独特风格和优化用户体验的关键一步。安企CMS以其灵活的内容模型和强大的模板引擎（类似Django语法）为我们提供了极大的自由度，让我们能够根据不同的内容类型、营销目标或用户需求，呈现多样化的文章列表。

网站的文章列表页面就像是一个内容的橱窗，如何摆放、如何突出重点，直接影响着访客的浏览兴趣和转化效果。一个设计精良的列表模板，不仅能让内容一目了然，还能在视觉上带来愉悦感，同时通过合理的布局提升SEO表现。接下来，就让我们一步步探讨如何在安企CMS中实现这一目标。

第一步：了解安企CMS的模板基础

在开始设计之前，我们需要先了解安企CMS中模板文件的一些基本约定。所有的模板文件都存放在 /template 目录下。当你创建一个新的模板时，通常会在这个目录下建立一个属于你网站的模板文件夹，并在其中组织你的HTML文件。

对于文章列表，安企CMS提供了一种非常灵活的模板匹配机制。它会按照一定的规则来寻找最匹配的模板文件：

  • 首先，它会查找针对特定分类ID的列表模板，格式是 {模型table}/list-{分类ID}.html。例如，如果你的“新闻”分类ID是123，而新闻属于“文章模型”（默认表名为archive），那么系统会优先寻找 archive/list-123.html。
  • 如果找不到特定分类的模板，它会退而求其次，查找适用于整个模型的通用列表模板，格式是 {模型table}/list.html。比如，archive/list.html 会作为所有文章列表的默认模板。
  • 再往上，还有一些更通用的模板规则，但对于列表页，我们主要关注以上两种，它们能满足绝大多数定制需求。

安企CMS的模板语法类似Django，变量用双花括号 {{变量}} 包裹，逻辑控制（如条件判断、循环）则用单花括号加百分号 {% 标签 %}。熟悉这些“魔法咒语”，就能自如地在模板中调用和展示数据了。

第二步：动手创建你的专属列表模板文件

现在我们知道了模板的存放位置和命名规则，可以开始动手了。

  1. 确定定制目标： 你是想为所有文章列表设计一个统一的新样式？还是只为某个特定的分类（比如“行业新闻”、“产品案例”）设计一个独特的列表页？

    • 如果希望全局修改所有文章列表的样式，你可以在你使用的模板目录下创建一个 archive/list.html 文件（如果它不存在，或修改已有的）。
    • 如果想为特定分类定制，你需要知道该分类的ID。比如，“科技资讯”分类的ID是 456，那么你就可以创建一个 archive/list-456.html 文件。

  2. 选择起点： 最简单的方式是复制一份现有的列表模板作为起点进行修改。通常，你可以在 template/default/archive/list.html 或者 template/default/product/list.html 中找到一个基础的列表结构。将这份文件复制到你的自定义模板目录下，并按照上述命名规则重命名。

  3. 编辑模板文件： 使用你习惯的代码编辑器打开这个新创建的模板文件。我们会在这里编写HTML结构，并嵌入安企CMS提供的模板标签来动态展示内容。

第三步：在模板中调用文章数据

在自定义的文章列表模板中，最核心的任务就是调用和展示文章数据。安企CMS提供了 archiveList 标签来完成这个任务。

  1. 获取文章列表： 我们使用 archiveList 标签来获取文章数据。为了支持分页，我们需要设置 type="page"。同时，你可以用 limit 参数控制每页显示的文章数量，例如 limit="10" 表示每页显示10篇文章。如果你想指定某个分类的文章，可以使用 categoryId 参数，例如 categoryId="123"。如果这个模板是为特定分类设计的，categoryId 通常可以省略，系统会自动识别当前分类。

    {% archiveList archives with type="page" limit="10" %}
    {# 在这里循环遍历文章 #}
{% endarchiveList %}

    这里，archives 是一个变量名，它会接收到文章列表数据，你也可以换成其他你喜欢的名字。

  2. 循环展示每篇文章： archives 是一个包含多篇文章的数组对象，我们需要使用 for 循环来逐一遍历并展示每篇文章的详细信息。

    {% archiveList archives with type="page" limit="10" %}
    {% for item in archives %}
        <div class="article-item">
            <a href="{{ item.Link }}" class="article-title">
                <h3>{{ item.Title }}</h3>
            </a>
            {% if item.Thumb %}
                <a href="{{ item.Link }}" class="article-thumbnail">
                    <img src="{{ item.Thumb }}" alt="{{ item.Title }}" loading="lazy">
                </a>
            {% endif %}
            <p class="article-description">{{ item.Description }}</p>
            <div class="article-meta">
                <span>发布日期：{{ stampToDate(item.CreatedTime, "2006-01-02") }}</span>
                <span>阅读量：{{ item.Views }}</span>
                <span>分类：<a href="{% categoryDetail with name='Link' id=item.CategoryId %}">{% categoryDetail with name='Title' id=item.CategoryId %}</a></span>
            </div>
        </div>
    {% empty %}
        <p>该分类下暂时没有文章。</p>
    {% endfor %}
{% endarchiveList %}

    在这个例子中：

    • item.Title：文章标题
    • item.Link：文章链接
    • item.Thumb：文章缩略图（可判断是否存在再显示）
    • item.Description：文章简介
    • stampToDate(item.CreatedTime, "2006-01-02")：将文章创建时间戳格式化为“年-月-日”的格式。
    • item.Views：文章浏览量。
    • categoryDetail with name='Title' id=item.CategoryId 和 categoryDetail with name='Link' id=item.CategoryId：通过 item.CategoryId 获取当前文章所属分类的名称和链接。

第四步：为列表增添“页码精灵”

一个完善的文章列表自然少不了分页功能，它能帮助访客轻松浏览大量内容，同时对SEO也非常友好