Anqi CMS Guide to Content Detail Display and Image Lazy Loading Practice
In today's digital world, the way a website presents its content directly affects user experience and search engine rankings.Whether it is a detailed article introduction or a beautiful product display, how to present the content efficiently and beautifully to visitors and ensure the website loading speed is a challenge that every operator needs to face.AnQiCMS (AnQiCMS) is a powerful content management system that provides us with flexible tools to meet these challenges.This article will delve into how to fully utilize the functions of the Anqi CMS, elegantly display detailed content of articles or products, and further enhance the performance of the website through lazy loading technology.
Deeply explore the content display capabilities of Anqi CMS
The Anqi CMS provides high flexibility in displaying content on the detail page. For articles, products, and other content on your website, we mainly usearchiveDetailTag to retrieve and display their detailed information. This tag is the core of content display, which can help us extract content titles, descriptions, publishing time, even custom fields, etc.
For example, to display the title of an article, you can reference it in the template like this:{{ archive.Title }}Similarly, the article's summary is:{{ archive.Description }}The publication time can be accessed through,{{ stampToDate(archive.CreatedTime, "2006-01-02") }}This is how to format the display. These are all very intuitive variable call methods.
In addition, the images contained in the content are also very important. Safe CMS provides various types of images:Logo通常指内容的封面首图，Thumb是经过系统处理的缩略图，而Images则可能是一组图片，适用于产品多图展示或文章组图。我们可以根据需要，通过{{ archive.Logo }}or traverse{% for img in archive.Images %}to call flexibly.
When your content includes rich text and images mixed together, especially when written with a Markdown editor, AnQi CMS can intelligently render Markdown syntax to HTML. When calling the content field, such as{{ archive.Content|safe }},|safeThe filter plays a crucial role here, it tells the system to output the content as safe HTML rather than plain text, so that the formatting, styles, and images you edit in the background can be displayed correctly. If the content is in Markdown format, you can also userender=trueParameter forced rendering.
The strength of AnQi CMS also lies in its flexible content model. If you define custom fields (such as "author", "product parameters", etc.) for article or product models, these fields can also be througharchiveDetailLabel easily call. For example, if you define a namedauthorcustom field, you can use it directly{{ archive.author }}to display. If the custom field is a set of parameters, such as product specifications,archiveParamsLabel looping output, realizing personalized content display.
For single-page (such as 'About Us', 'Contact Us'), you can usepageDetailTags, their calling methods and available fields are the same asarchiveDetailTags similar, helping you display rich content on static pages.
Implement lazy loading of images to optimize page loading speed.
In the content page, especially in detailed pages with pictures and text, images often occupy most of the visual space and loading resources of the page.To improve the loading speed and user experience of the website, and reduce unnecessary bandwidth consumption, the technology of picture lazy loading (Lazy Loading) has become particularly important.It means that the page will only load the images visible to the user at the time of the initial load, and those images that are not within the viewport will be loaded asynchronously until the user scrolls to the point where they become visible.
Anqi CMS has already considered this point in content display.archiveDetailLabel content field called, especially for rich text editor generatedContentIt provides a very practicallazyParameter.
Specifically, when you call the detailed content of the article or product, such as:{% archiveDetail archiveContent with name="Content" lazy="data-src" %}{{archiveContent|safe}}{% endarchiveDetail %}，English CMS will intelligently。“Contentfield picture.<img src="..." />Tagssrcattribute in the content withdata-src(or any custom attribute you specify)。“
This backend processing lays a foundation for the front-end lazy loading.data-srcreal picture address and assign it to。“srcProperties, thus achieving the on-demand loading of images.This way, even for detail pages with a large number of images, the loading speed remains smooth, greatly enhancing the access experience and page performance.
to create a perfect content page.“
Combine these features, and you can build a content-rich and high-performance CMS in safety.