When building a website, displaying a list of articles and allowing users to click to view the details of the articles is a basic and core function.AnQiCMS (AnQiCMS) provides a powerful and flexible API interface, allowing us to easily achieve this requirement.archive/listInterface to get article abstracts, and cooperate witharchive/detailInterface to display the full article content after the user clicks.
Step 1: Get the list of articles (archive/list)
For any content-based website, a list page of articles is needed first, such as a news center, blog, or product showcase page. The interface of AnQi CMS is specifically designed for this.archive/listThe interface is designed for this.
When we are{域名地址}/api/archive/listWhen sending a GET request, you can add some parameters as needed to filter and sort articles. For example, if we want to get articles under a specific model (such as the article model) and display them with pagination, we can set the parameters as follows:
moduleIdSpecify the model ID of the article. The article model ID is usually 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 returntotalfields, which is convenient for us to build the pagination component.limit: It controls the number of articles displayed per page, for examplelimit=10[en] Indicates 10 articles per page.page[en] : Specifies the current page to be retrieved, for example,page=1.
[en] After a successful request, 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(Abstract of the article),thumb[Thumbnail],created_time(Publishing time) and a very practicallinkfield.
In the front-end page, we can iterate over thisdataArray, generate a list item for each article.Each list item usually includes the article title, thumbnail, introduction, and publish time.The most crucial aspect is that we need to add clickable links to each title or thumbnail, allowing users to jump to the detailed article page.item.linkfield can be used directly as a link address because it usually contains the full URL of the article detail page. IflinkField is unavailable, we can also use itidorurl_tokento dynamically build 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 readable formats,item.linkprovides a direct link, or if it does not exist,item.idbuilds a backup link.
Step two: Click to view the article details (archive/detail)
When the 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 loading, 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/detailInterface to get the full content of the article.
archive/detailThe way to call the interface is also straightforward, we send{域名地址}/api/archive/detailSend a GET request and pass one of the following key parameters:
id: The unique ID of the article, which is the most commonly used method.filename: The 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=123, then we can extract it from the URLid=123, and then send 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(view count) and the most importantdata.contentThe field, it 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 storedarchive/detailThe object returned by the interface. Byv-htmlthe command, we can directly renderarticleDetail.data.contentthe HTML content to the page, thus displaying the complete layout and images of the article.
Summary
Passarchive/listandarchive/detailThese two core interfaces, Anqi CMS provides an efficient and clear mechanism for managing and displaying the website's article content.From quick browsing on the list page to in-depth reading on the detail page, the entire process is built on standardized API calls. Both developers and content operators can flexibly use them to build a user-friendly content platform.
Common Questions (FAQ)
How to implement pagination for article lists?When callingarchive/listthe interface, you need to settype=page, and cooperate withlimit(number of articles per page) andpage[Page number] parameter. The interface returns the.totalfield will tell you the total number of articles, and you can use this total number andlimitCalculate the total number of pages to build the pagination component on the front end. Each time the user clicks on a different page number, updatepagethe parameters and call againarchive/list.
2. Why sometimesarchive/listreturnedlinkThe field is empty, how should I handle it?
linkThe field is usually a friendly URL automatically generated by the Aiqi 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 in the front end, you can construct the link like this:/article/+item.idor/article/+item.url_token.
3.archive/detailReturned by the interface.data.contentanddescriptionWhat is the difference?
descriptionThe field is a summary or abstract of the article, usually used on list pages or for search engine optimization (SEO), and the content is relatively short.data.contentThe content is the complete main body of the article, including all formatting, images, links, etc., used for displaying the article details page.Both have their uses, and the appropriate field should be selected according to the display scenario.