在构建网站时，展示文章列表并允许用户点击查看文章详情是基本且核心的功能。安企CMS（AnQiCMS）提供了强大而灵活的API接口，让我们可以轻松实现这一需求。接下来，我们将探讨如何利用archive/list接口获取文章概要，再配合archive/detail接口在用户点击后展示完整的文章内容。
第一步：获取文章列表（archive/list）
对于任何内容网站，首先需要一个文章列表页面，例如新闻中心、博客或产品展示页面。安企CMS的archive/list接口正是为此而设计。
当我们向{域名地址}/api/archive/list发送GET请求时，可以根据需求附加一些参数来筛选和排序文章。例如，如果我们想要获取某个特定模型（如文章模型）下的文章，并希望分页显示，可以这样设置参数：
moduleId：指定文章所属的模型ID。通常文章模型ID为1，产品模型ID为2。type=page：这个参数非常重要，它告诉系统我们需要分页数据，这样接口会返回total字段，方便我们构建分页组件。limit：控制每页显示的文章数量，例如limit=10表示每页10篇文章。page：指定当前要获取的页码，例如page=1。
当请求成功后，接口会返回一个包含文章列表的JSON数据。其中，data数组里的每一个对象都代表一篇文章的简要信息，包括id、title、description（文章简介）、thumb（缩略图）、created_time（发布时间）以及一个非常实用的link字段。
在前端页面中，我们可以遍历这个data数组，为每篇文章生成一个列表项。每个列表项通常包含文章标题、缩略图、简介和发布时间。最关键的是，我们需要为每个标题或缩略图添加一个可点击的链接，让用户能够跳转到文章的详细页面。这里，item.link字段可以直接作为链接地址，因为它通常包含了完整的文章详情页URL。如果link字段不可用，我们也可以利用id或url_token来动态构建详情页URL。
例如，一个典型的列表项可能看起来像这样：
<div class="article-item">
<a :href="item.link || '/detail?id=' + item.id">
<img :src="item.thumb" :alt="item.title" />
<h3>{{ item.title }}</h3>
</a>
<p>{{ item.description }}</p>
<small>发布时间：{{ formatTime(item.created_time) }}</small>
</div>
在这个例子中，formatTime是一个将时间戳转换为可读格式的函数，item.link提供了直接的链接，如果不存在，则通过item.id构建一个备用链接。
第二步：点击查看文章详情（archive/detail）
当用户在文章列表页点击某篇文章的链接时，页面会跳转到文章详情页。在文章详情页加载时，我们需要获取到当前文章的唯一标识（通常是文章ID或URL别名），然后调用安企CMS的archive/detail接口来获取该文章的完整内容。
archive/detail接口的调用方式也很直接，我们向{域名地址}/api/archive/detail发送GET请求，并传入以下关键参数之一：
id：文章的唯一ID，这是最常用的方式。filename：文章的URL别名，也就是archive/list中返回的url_token字段。当使用友好URL时，这个参数非常方便。
例如，如果我们的详情页URL是/article-detail?id=123，那么就可以从URL中提取id=123，然后发起API请求：GET {域名地址}/api/archive/detail?id=123。
接口成功响应后，返回的JSON数据中会包含该文章的所有详细信息，包括title（标题）、seo_title、keywords、description（简介）、views（浏览量）等，以及最重要的data.content字段，它包含了文章的HTML格式的完整内容。
在前端详情页，我们可以将这些数据渲染到相应的HTML元素中：
<div class="article-detail">
<h1>{{ articleDetail.title }}</h1>
<div class="meta-info">
<span>发布时间：{{ formatTime(articleDetail.created_time) }}</span>
<span>浏览量：{{ articleDetail.views }}</span>
</div>
<div class="article-content" v-html="articleDetail.data.content"></div>
</div>
这里，articleDetail是存储archive/detail接口返回数据的对象。通过v-html指令，我们可以直接将articleDetail.data.content中的HTML内容渲染到页面上，从而展示文章的完整排版和图片。
总结
通过archive/list和archive/detail这两个核心接口，安企CMS提供了一套高效、清晰的机制来管理和展示网站的文章内容。从列表页的快速浏览到详情页的深度阅读，整个流程都建立在标准化的API调用之上，无论是开发者还是内容运营人员，都能灵活运用，构建出用户体验良好的内容平台。
常见问题 (FAQ)
1. 如何实现文章列表的分页功能？
在调用archive/list接口时，您需要设置type=page，并配合limit（每页文章数量）和page（当前页码）参数。接口返回的total字段会告诉您总文章数量，您可以根据这个总数和limit值来计算总页数，从而构建前端的分页导航组件。每当用户点击不同的页码时，更新page参数并重新调用archive/list即可。
2. 为什么有时候archive/list返回的link字段是空的，我该怎么处理？
link字段通常是安企CMS自动生成的友好URL，如果您的系统未开启友好URL或者文章未设置url_token，这个字段可能为空。此时，您可以使用文章的id或者url_token来手动拼接详情页的URL。例如，如果您的详情页路由是/article/:id或/article/:url_token，那么在前端就可以这样构建链接：/article/ + item.id 或 /article/ + item.url_token。
3. archive/detail接口返回的data.content和description有什么区别？
description字段是文章的简介或摘要，通常用于列表页或搜索引擎优化（SEO），内容相对简短。而data.content则是文章的完整主体内容，包含所有排版、图片、链接等，用于文章详情页的展示。两者各有其用途，在使用时应根据展示场景选择合适的字段。