How to display the detailed content of articles or products and support lazy loading of images?

Anqi CMS detailed content display and image lazy loading practical guide

In today's digital world, the way website content is presented 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 Anqi CMS, elegantly display the detailed content of articles or products, and further improve the performance of the website through lazy loading technology.

Explore the detailed display capabilities of the AnQi CMS in depth

The AnQi CMS provides high flexibility in displaying content on detail pages. For articles, products, and other content on your website, we mainly usearchiveDetailLabels to retrieve and display their details. This label is the core of content display, helping us extract content titles, descriptions, publication times, and even custom fields.

For example, to display the title of an article, you can reference it in the template like this:{{ archive.Title }}Similarly, the article's abstract is{{ archive.Description }}And the publish time can be accessed via{{ stampToDate(archive.CreatedTime, "2006-01-02") }}This is how the formatting is displayed. These are all very intuitive variable calling methods.

In addition, the images contained in the content are also very important. Anqi CMS provides a variety of image types:LogoIt usually refers to the cover image of the content,ThumbIt is a thumbnail processed by the system,ImagesIt may be a set of images, suitable for product multi-image display or article group images. We can select them according to our needs,{{ archive.Logo }}Or iterate{% for img in archive.Images %}To call flexibly.

When your content includes rich text and image layouts, especially when written through a Markdown editor, Anqi CMS can intelligently render Markdown syntax into HTML. For example, when calling the content field,{{ archive.Content|safe }},|safeThe filter plays a crucial role here, as it informs the system to output the content as safe HTML rather than plain text, allowing the formatting, styles, and images you edit in the background to display correctly. If the content is in Markdown format, you can also userender=trueParameter forced rendering.

The strength of AnQi CMS lies in its flexible content model. If you define custom fields for article or product models (such as "author", "product parameters", etc.), these fields can also be accessed througharchiveDetailLabel easily accessible. For example, if you define a namedauthorThe custom field, can be used directly{{ archive.author }}to display. If a custom field is a set of parameters, such as product specifications, you can go througharchiveParamsLoop tags to output personalized content display.

For single pages (such as "About Us", "Contact Us"), you can usepageDetailTags, their calling methods and fields that can be obtained witharchiveDetailTags similar, help you display rich content on static pages.

Implement lazy loading of images, optimize page loading speed

On 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 enhance the loading speed of the website and the user experience, and to reduce unnecessary bandwidth consumption, the image lazy loading (Lazy Loading) technology has become particularly important.It means that the page will only load the images visible to the user in the current viewport when initially loaded, and the images outside the viewport range will be loaded delayed until the user scrolls to the position where they become visible.

Anqi CMS has already considered this point in content display. InarchiveDetailCalling content fields, especially those generated by rich text editorsContentprovides a very practical feature when content is accessedlazyParameter.

Specifically, when you call up the detailed content of articles or products, such as: {% archiveDetail archiveContent with name="Content" lazy="data-src" %}{{archiveContent|safe}}{% endarchiveDetail %}，AnQi CMS will intelligentlyContentimages in the field<img src="..." />label'ssrcattribute is replaced withdata-src(or any custom attributes you specify).

This backend processing laid the foundation for the lazy loading of the front-end.You just need to introduce a lightweight JavaScript lazy loading library (such as lazysizes.js, or write simple Intersection Observer API code), when the image enters the user's viewport, the library will readdata-srcand assign the real image address tosrcProperties, thus achieving the on-demand loading of images. In this way, even for detail pages with a large number of images, it can maintain a smooth loading speed, greatly improving the access experience and page performance.

combined to create a perfect content page

Combine these features and you can build a Anqi CMS that is both content-rich and performance-excellent