How does the `archiveDetail` tag in AnQiCMS control the Markdown rendering or lazy loading of document content?

As a senior website operations expert, I know that in the increasingly fierce online environment, efficient content management and elegant presentation are crucial for the success of a website.AnQiCMS as a powerful and flexible content management system, its template tag system has provided us with great convenience.Today, let's delve into a seemingly simple yet powerful tool: AnQiCMS'archiveDetailTags, especially the secrets it controls in Markdown rendering and lazy loading of images in document content.

archiveDetailThe tag is the core tool used in AnQiCMS to obtain detailed data of a single document. It can not only extract basic information such as title and description, but also deeply process the main content of the document, which directly affects the form of content seen by users and the loading performance of the page.

Precisely control: Rendering strategy of Markdown content

Markdown is a lightweight markup language that is favored by content creators for its simplicity, efficiency, and ease of use.It allows us to focus on the content itself without having to pay too much attention to complex formatting.AnQiCMS knows the convenience of content editing, so its built-in Markdown editor makes content creation extremely easy.However, when this Markdown formatted content needs to be displayed on the front-end page, AnQiCMS'sarchiveDetailTags provide fine-grained control capabilities.

The key is in.archiveDetailin the labelContentA field that can intelligently handle document content. Furthermore, this field also has a specialrenderThe parameter is the key to our precise control of Markdown rendering.

By settingrender=trueYou can instruct AnQiCMS to store document content formatted as Markdown, which will be automatically parsed and rendered into standard HTML when output to the front-end page.This means that your article can maintain a concise Markdown writing experience while presenting a beautiful and structured HTML page on the user end.For example, if your Markdown content includes elements such as headings, lists, code blocks, and so on,render=trueIt will ensure that they are correctly converted to<h1>/<ul>/<pre>The corresponding HTML tags.

On the contrary, if you have a specific need to retain the original Markdown text without any HTML conversion, you just need torenderthe parameter tofalseIn this case,archiveDetailThe tag will directly output the original Markdown string in the document content, which is very useful when it is necessary to display the Markdown source code or when the front-end has a custom Markdown parser.

Code example:

{# 确保Markdown内容被渲染成HTML #}
<div>文档内容：{% archiveDetail archiveContent with name="Content" render=true %}{{archiveContent|safe}}</div>

{# 如果你希望保留原始Markdown文本，不进行渲染 #}
<div>文档原始Markdown：{% archiveDetail archiveContent with name="Content" render=false %}{{archiveContent|safe}}</div>

It is worth mentioning that to make full use of this feature, you need to ensure that the Markdown editor is enabled in the "Global Settings" -> "Content Settings" of the AnQiCMS backend. Once enabled,archiveDetailCan be based on yourrenderParameter settings, intelligently process document content, bringing great flexibility to the display of your content.

Optimize experience: Lazy loading mechanism for image content

Images are an important component of website content, but too many images, especially those that are all loaded at the beginning of page loading, can often slow down website speed, affect user experience, and even have a negative impact on SEO.This is when the picture lazy loading (Lazy Loading) technology becomes particularly important, as it allows images to be loaded only when they enter the user's viewport, thereby saving bandwidth and improving page response speed.

AnQiCMS'archiveDetailThe tag handles document content (name="Content") and cleverly integrates support for lazy loading of images. By adding in the tag,lazy="data-src"Such a property actually tells AnQiCMS that when it processes the document content in<img>do not use tags directly,srcInstead of loading the image attribute, it puts the original URL into a nameddata-srcThe custom attribute in.

When the page is loaded, the browser will not immediately request the image with.data-srcattribute because itssrcThe property is usually empty or points to a placeholder. The frontend JavaScript lazy loading library will介入 only when these image elements are about to enter the user's visible area, readdata-srcThe actual image URL, and assign it tosrcProperties, thus triggering the loading of images. This on-demand loading method can significantly reduce the burden of the initial page load, improving the overall performance and user perception speed of the website.

Code example:

{# 启用图片懒加载，将图片URL转移到data-src属性 #}
<div>文档内容：{% archiveDetail archiveContent with name="Content" lazy="data-src" %}{{archiveContent|safe}}</div>

Please note,lazy="data-src"It is a command for AnQiCMS to output HTML structure. To truly implement the lazy loading effect of images, your front-end template still needs to cooperate with the corresponding JavaScript library to work. These libraries usually initialize after the page is loaded, listen to scroll events, determine whether the image has entered the viewport, and then execute thedata-srcReplacesrcThe operation.

Summary

In summary, AnQiCMS'archiveDetailTags are not only a channel for obtaining document content, but also a powerful assistant for you to refine content display and optimize website performance. Whether throughrenderThe parameter controls the rendering mode of Markdown content, or throughlazy="data-src"Command optimizes the image loading strategy,archiveDetailProvide flexible and practical solutions to make your website operation more efficient and intelligent, providing users with a smooth, professional reading experience.

Frequently Asked Questions (FAQ)

Q1: I have already enabled the Markdown editor in the background, andarchiveDetailThe tag is set.render=truebut the Markdown content is still not rendered into HTML, why is that?

A1:Please check your front-end template code. In usingarchiveDetailtag to obtainContentAfter the content, make sure to output it as 'safe' content, that is, to add it after the variable|safea filter. For example:{{archiveContent|safe}}. If missing|safeThe template engine may escape HTML tags for security reasons, resulting in the HTML rendered by Markdown being displayed as plain text.

Q2: Configuredlazy="data-src"After that, the image still loads immediately, and lazy loading is not implemented. Where is the problem?

A2: lazy="data-src"The parameter is used to let AnQiCMS transfer the image URL fromsrcattribute todata-srcProperty. This is just to provide structural preparation for lazy loading.To truly implement lazy loading of images, you also need to introduce and configure a JavaScript lazy loading library on the front-end page (such aslazysizes.js/vanilla-lazyloadWait).These JS libraries are responsible for listening to page scrolling and copying the value back when the image enters the visible areadata-srcdynamically copy back the valuesrcThe property triggers the loading of the image. If the front-end JS library is missing, the image will not be lazy-loaded.

Q3:archiveDetaillabel'slazyDoes the parameter support customizing others?data-*attribute, for examplelazy="data-original"?

A3:According to the official documentation of AnQiCMS,archiveDetailthe built-in support of the tag for image lazy loading isspecificallyUselazy="data-src"This fixed format. This means that the AnQiCMS system will internally process the document content in<img>label'ssrcattribute values todata-srcproperties. If you need to usedata-originalOr other custom attribute names to implement lazy loading, you may need to adapt on the front-end JS level or consider using AnQiCMS's custom filter (filterAdvanced template features, forContentProcess the output HTML twice to match the specific attribute requirements of the lazy loading library you need. But the most direct and officially recommended way is to配合lazy="data-src"usage.