When building a website, displaying an article list and allowing users to click to view the article details is a basic and core function.AnQiCMS (AnQiCMS) provides a powerful and flexible API interface, allowing us to easily meet this requirement.Next, we will explore how to utilizearchive/listThe interface retrieves the article summary and then cooperatesarchive/detailThe interface displays the full article content after the user clicks
Step 1: Get the list of articles (archive/list)
For any content website, the first thing you need is a list page of articles, such as a news center, blog, or product showcase page. The Anqi CMS interface is designed for this purpose.archive/listThe interface is designed for this.
When we are facing{域名地址}/api/archive/listWhen sending a GET request, you can add parameters as needed to filter and sort articles. For example, if you want to get articles under a specific model (such as an article model) and display them in pagination, you can set the parameters as follows:
moduleId: Specify the model ID of the article. Usually, the article model ID is 1, and the product model ID is 2.type=pageThis parameter is very important, it tells the system that we need paginated data, so the interface will returntotalfield, which is convenient for us to build the pagination component.limit: Controls the number of articles displayed per page, for examplelimit=10Indicates 10 articles per page.page: Specifies the current page number to be retrieved, for examplepage=1.
After the request is successful, the interface will return a JSON data containing a list of articles. Among them,dataEach object in the array represents a brief article information, includingid/title/description(Article summary),thumb(thumbnail),created_time(publish time) and a very practicallinkfield.
We can iterate over this in the front-end pagedataAn array, generates a list item for each article. Each list item usually contains the article title, thumbnail, introduction, and publication time.The most critical thing is that we need to add clickable links to each title or thumbnail, allowing users to jump to the detailed page of the article. Here,item.linkThe field can be used directly as a link address because it usually contains the full URL of the article detail page. Iflinkthe field is not available, we can also utilizeidorurl_tokento dynamically construct the detail page URL.
For example, a typical list item might look like this:
<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>
In this example,formatTimeIs a function that converts timestamps into a readable format,item.linkProvides a direct link, if it does not exist, then throughitem.idBuild a backup link.
Step 2: Click to view the article details (archive/detail)
When a user clicks on the link of an article in the article list page, the page will jump to the article detail page. When the article detail page is loaded, we need to obtain the unique identifier of the current article (usually the article ID or URL alias), and then call the AnQi CMS'sarchive/detailThe interface to get the full content of the article.
archive/detailThe calling method of the interface is also direct, we send to{域名地址}/api/archive/detailSend a GET request and pass one of the following key parameters:
idThe unique ID of the article, this is the most commonly used method.filenameThe URL alias of the article, also known asarchive/listreturned inurl_tokenfield. This parameter is very convenient when using friendly URLs.
For example, if our detail page URL is/article-detail?id=123then we can extract from the URLid=123and then make an API request:GET {域名地址}/api/archive/detail?id=123.
After the interface successfully responds, the returned JSON data will include all the detailed information of the article, includingtitle(Title),seo_title/keywords/description(Summary),views(views) and the most importantdata.contentThe field contains the complete HTML content of the article.
On the frontend detail page, we can render this data into the corresponding HTML elements:
<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>
here,articleDetailis storagearchive/detailThe object returned by the interface. Byv-htmlthe command, we can directly renderarticleDetail.data.contentthe HTML content to the page, thus displaying the full layout and images of the article.
Summary
Byarchive/listandarchive/detailThese core interfaces, AnQi CMS provides a high-efficient and clear mechanism to manage and display the article content of the website.From quick browsing on the list page to in-depth reading on the detail page, the entire process is built on standardized API calls. Whether it is developers or content operation personnel, they can flexibly use them to build a content platform with a good user experience.
Frequently Asked Questions (FAQ)
1. How to implement pagination for article lists?When callingarchive/listWhen setting up the interface, you need to settype=page，and cooperatelimit(Number of articles per page) andpage(Current page number) parameters. The interface returns thetotalThe field will tell you the total number of articles, you can use this total number tolimitcalculate the total number of pages to build the pagination navigation component on the front end. Whenever the user clicks on a different page number, updatepageParameters need to be called againarchive/listJust do it.
2. Why sometimesarchive/listreturnedlinkThe field is empty, what should I do?
linkThe field is usually a friendly URL automatically generated by the AnQi CMS, if your system has not enabled friendly URLs or the article has not been seturl_tokenThis field may be empty. In this case, you can use the article'sidOrurl_tokento manually assemble the URL of the detail page. For example, if your detail page route is/article/:idor/article/:url_tokenSo on the front end, you can build the link like this:/article/+item.idor/article/+item.url_token.
3.archive/detailThe interface returnsdata.contentanddescriptionWhat is the difference?
descriptionThis field is the introduction or abstract of the article, usually used on list pages or for search engine optimization (SEO), and the content is relatively short. Anddata.contentThe complete main content of the article, including all formatting, images, links, etc., used for the article detail page.Both have their uses, and the appropriate field to use should be selected based on the display scenario.