How does the `archiveDetail` tag handle the Markdown rendering and lazy loading (lazyload) display of document content?

Manage and display content in AnQi CMS,archiveDetailTags are undoubtedly one of the core tools, responsible for extracting the content stored in the database and rendering it on the web. For modern websites, the way content is presented and the loading efficiency are crucial, andarchiveDetailThis provides very practical capabilities in handling document content Markdown rendering and lazy loading of images.

Smart usearchiveDetailTags, present document details in depth.

archiveDetailThe label is designed to display detailed information of a single document. It is not just a simple data pull, but also has the ability to intelligently process content, especially playing a key role in processing articles or product detail pages.When you need to display the title, link, description, and other basic information of the document on the page, you can directly call{{archive.Title}}or{{archive.Link}}fields. When it comes to the main content of the document,Contentfields,archiveDetailtag function is more rich and powerful.

seamless rendering of Markdown content, goodbye to繁琐排版

For content creators, Markdown is an efficient and concise writing style.It allows you to format text with simple markup syntax without having to worry about complex HTML code.AnQi CMS knows this, thereforearchiveDetailThe tag can directly recognize and render Markdown formatted document content.

When you enable the Markdown editor in the background and use it to write document content,archiveDetailtags during outputContentWhen a field is entered, it will automatically convert Markdown syntax to standard HTML structure.This means that your content creators can focus on the content creation itself without worrying about formatting issues.The system will automatically handle Markdown elements such as title levels, lists, links, and references, displaying them beautifully to the user.

If you need more fine-grained control, for example, you do not want the system to automatically convert Markdown in certain specific cases, or you need to force the conversion,archiveDetailLabels also providedrenderparameters. By settingrender=falseYou can prevent the automatic Markdown to HTML conversion process; otherwise,render=trueIt will force the conversion. This provides you with great flexibility at the template level to meet different display needs.

For example, you would usually call the document content like this in the template.

<div>
    {% archiveDetail archiveContent with name="Content" %}{{archiveContent|safe}}</div>
</div>

If you want to force Markdown rendering:

<div>
    {% archiveDetail archiveContent with name="Content" render=true %}{{archiveContent|safe}}</div>
</div>

And if you want to keep the original Markdown format without rendering:

<div>
    {% archiveDetail archiveContent with name="Content" render=false %}{{archiveContent|safe}}</div>
</div>

This processing method not only simplifies the content publishing process, but also ensures the consistency and cleanliness of the front-end display, which is helpful to improve the user experience.

Intelligent support for lazy loading of images, optimizing page loading speed

Under the current network environment, the speed of image loading is an important factor affecting user retention and search engine rankings.Especially for detail pages with many images, loading all images at once can cause the page to freeze, seriously affecting user experience.Safe CMS ofarchiveDetailTags provide built-in support for lazy loading (lazyload) for this

In the outputContentWhen using the field, you can take advantage oflazyParameters to indicate the system modifies the image tag attributes, preparing for the frontend lazy loading script. For example, many lazy loading libraries will look fordata-srcproperties to delay loading images. You just need toarchiveDetailthe tag withlazy="data-src"The system will thenContentAll fields in<img>label'ssrcproperties todata-src(or any value you specify).

Here is a specific usage example:

<div>
    {% archiveDetail archiveContent with name="Content" lazy="data-src" %}{{archiveContent|safe}}</div>
</div>

Through this simple setting,archiveDetailThe label has been preprocessed the image HTML for you on the server side.When the browser loads the page, initially only a few images are loaded, and as the user scrolls the page, images entering the viewport are dynamically loaded by the front-end JavaScript lazy loading script, thereby significantly improving the initial loading speed and fluidity of the page, greatly optimizing the user experience and website performance.

Summary

archiveDetailTags play a role in AnQi CMS that is not just data extraction, but also a powerful assistant in content presentation strategy.With built-in support for intelligent rendering of Markdown content and lazy loading of images, it helps website operators to improve content creation efficiency while also considering user experience and website performance optimization.Fully utilize these features, making your website content more attractive and faster loading, thus better serving your audience.

Frequently Asked Questions (FAQ)

1. I usedlazy="data-src"But the image still does not have lazy loading effect, why is that? archiveDetaillabel'slazyThe parameter is responsible for moving the image'ssrcReplace with the lazy loading property you specified (for exampledata-src）。However, this is just to prepare the HTML structure.To truly implement image lazy loading, you also need to integrate a JavaScript lazy loading library on the front end, which will be responsible for listening to whether the image enters the viewport and load it at the appropriate time,data-srcvalue tosrcIn the property, it triggers image loading. Therefore, please check if the corresponding lazy loading JavaScript library has been introduced in your template, and whether the library is correctly configured and initialized.

2. How to ensurearchiveDetailThe rendered Markdown content can correctly display mathematical formulas or flowcharts?The Markdown renderer built into AnQi CMS will convert it to basic HTML.To display mathematical formulas (such as LaTeX syntax) and flowcharts (such as Mermaid syntax) correctly on the front end, it usually requires additional third-party JavaScript libraries for parsing and rendering.You need to fill in the template's<head>or<body>Introduce the corresponding CDN resources or local scripts at the bottom, for example, MathJax for mathematical formulas, Mermaid.js for flowcharts.These libraries will scan and parse specific Markdown syntax blocks after the page is loaded, converting them into visual graphics.The specific introduction method can be referred to in the development document of AnQi CMS regarding 'How to use Markdown correctly on the web and display mathematical formulas and flowcharts'.

3. If I don't want to letarchiveDetailHow can I automatically convert Markdown to HTML?You can specify only the top-level categories by using thearchiveDetailExplicitly specify in the tagrender=falseTo prevent Markdown content from being automatically rendered. For example:{% archiveDetail archiveContent with name="Content" render=false %}{{archiveContent|safe}}</div>Thus,ContentThe field will be output in its original Markdown text format and will not be converted to HTML.This can be very useful when you may want to use a custom Markdown renderer on the client side, or simply display the original Markdown code.