When using the Aanqi CMS for website content management, we often access/api/archive/detailthe detailed information of documents through interfaces. Among them,data.content
the document content in HTML format
According to the API document description and return data example of AnQi CMS, we can clearly see,data.contentthe document content returned by the field isa string in HTML format。For example, in the return example of getting document details,data.data.contentThe value of"<p>欢迎使用AnqiCMS</p>". This clearly indicates that the content is<p>Tag encapsulation, this is a standard HTML paragraph tag. In addition, in the interface for publishing documents,/anqiapi-archive/220.htmlthe request data example,contentthe field is also structured in HTML"<p>欢迎使用anqicms</p>"Display, which further verifies that the content is stored and transmitted in HTML format.
This design concept gives the content great flexibility, allowing rich text content such as bold, italic, lists, paragraph styles, hyperlinks, etc., edited through the Safe CMS backend editor to be fully transmitted through this field.This means you do not need to perform complex text parsing on the front-end to restore the format, you can directly render this HTML string as web content, greatly simplifying front-end development work.
Embedding rich media content
As for images or other rich media content, the answer is also affirmative, they can be included indata.contentThe HTML returned by the field. When you edit articles in the Aiqi CMS backend, the images, videos, audio, or other embedded content you insert will usually be converted to the corresponding HTML tags (for example,<img>Tags are used for images,<video>or<iframe>Tags are used for video embedding, and as part of the main content of the article, stored in thiscontentField within.This means that, after receiving this HTML on the front end, you can render it directly.The browser will automatically parse and display the rich media elements such as images, videos, etc., without the need to obtain or concatenate them separately.data.contentit may contain<img src="https://example.com/image.jpg" alt="描述">Such tags.
It is worth noting that the documents of Anqi CMS still existimages/logoandthumbThe fields such as this, which are typically used to store the cover image, thumbnail, or a list of related images, provide independent image URLs.data.contentThe image within the field is displayed inline with the main body of the article, as part of the article content flow. Although both involve images, they differ in function and usage.
Points to consider in practical applications
When usingdata.contentWhen dealing with fields, there are some practical suggestions.Firstly, since the content is in HTML format, when rendering on the front end, it is necessary to ensure that your page or component can correctly parse and display HTML tags.v-htmlor React'sdangerouslySetInnerHTML
In summary, the Anqi CMS'sdata.contentThe field provides a powerful and flexible content carrier.It returns the detailed content of the document in HTML format and can directly carry various rich media information such as images, videos, etc.This greatly simplifies the logic of front-end content display, making the content presentation of the website richer and more vivid.
Common Questions (FAQ)
1.data.contentis the content returned from the field always in HTML format?
Yes, from the API design and examples of Anqi CMS,data.content(including document, category, and single page content details) The content returned by the field is always encapsulated by HTML tags. Even if you only enter plain text in the background, the system will wrap it in<p>Tags or other basic HTML structures returned so that the front end can render uniformly according to HTML.
2. Ifdata.contentContains images or videos, how can the front end handle them to be displayed correctly?
Due todata.contentReturns a complete HTML string, the front-end can directly insert this string into the page's DOM (for example, using native JavaScript'selement.innerHTML = response.data.content，或在现代前端框架中使用相应的指令，如 Vue.js 的v-htmlor React'sdangerouslySetInnerHTML）。浏览器会自动解析并渲染其中的<img>/<video>auto media elements, so that rich media content is displayed correctly.
3.data.contentof the pictures andarchiveDetailin the interfaceimagesfield, what is different from the pictures provided?
data.contentThe image referred to is an inline image inserted in the article body through the rich text editor, which is an indispensable part of the main content of the article.archiveDetailin the interfaceimagesfield (as well aslogoandthumbIt is usually used to store the cover image of the article, the thumbnail of the article list page, or a set of album images.These images exist independently of the main content of the article, often used for list display, page layout, or as feature images of the article, rather than presented directly in the article body.