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

Smart usearchiveDetailTags, present document details in depth

archiveDetailLabels are designed to display detailed information about a single document.It is not just about pulling data, but also has the ability to intelligently process content, especially playing a key role in processing articles or product detail pages.{{archive.Title}}or{{archive.Link}}English content for the fields. When it comes to the main content of the document,Contentfield,archiveDetailthe functions of the tags become richer and more powerful.

seamless rendering of Markdown content, goodbye to complicated formatting

For content creators, Markdown is an efficient and concise writing method.It allows you to format text with simple markup syntax without having to worry about complex HTML code.archiveDetailTags can directly identify and render documents in Markdown format.

When you enable the Markdown editor in the background and use it to write document content,archiveDetailtags are used in the outputContentWhen a field is present, 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 title levels, lists, links, references, and other Markdown elements, presenting them beautifully to the user.

If you need more fine-grained control, for example, not to have the system automatically convert Markdown in certain specific cases, or to force the conversion,archiveDetailtags also providerenderparameters. By settingrender=false，您可以阻止内容的自动 Markdown 转 HTML 过程；反之，“English”}]render=trueIt will force the conversion. This provides great flexibility at the template level to meet different display requirements.

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>

If you want to keep the original Markdown format without rendering:

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

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

Smart support for image lazy loading, 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 lag, seriously affecting user experience.archiveDetailBuilt-in support for image lazy loading (lazyload) is provided for tags.

when outputtingContentwhen dealing with fields, you can make use oflazyParameters to indicate system modification of image tag attributes, ready for the front-end lazy loading script. For example, many lazy loading libraries will search fordata-srcattributes to delay loading images. You just need to inarchiveDetailtag.lazy="data-src"，系统便会将Contentall fields in<img>TagssrcThe attribute converts todata-src（或其他您指定的值）。

以下是具体的使用示例：

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

通过这一简单的设置，archiveDetailLabel has been preprocessed for you on the server side HTML.When the browser loads the page, only a small number of images are initially loaded. As the user scrolls through the page, images that come into the viewport are dynamically loaded by the front-end JavaScript lazy loading script, significantly improving the initial loading speed and smoothness of the page, greatly optimizing the user experience and website performance.

Summary

archiveDetailThe label plays not only the role of data extraction in AnQi CMS, but also serves as a powerful assistant for content presentation strategy.With built-in support for intelligent rendering of Markdown content and lazy loading of images, it helps website operators improve content creation efficiency while also considering user experience and website performance optimization.Make full use of these features, your website content will be more attractive and load faster, thus better serving your audience.

Common Questions (FAQ)

  1. I usedlazy="data-src"，但图片依然没有懒加载效果，这是为什么？ archiveDetailTagslazyThe parameter is responsible for moving the value of the image to the server side.srcProperty replacement with the lazy loading property you specified (for example,data-src）。However, this is just to prepare the HTML structure.data-srctosrcProperty in, thus triggering image loading.Therefore, please check whether the corresponding lazy loading JavaScript library is introduced in your template and whether the library is properly configured and initialized.

  2. How to ensurearchiveDetailDoes the rendered Markdown content display mathematical formulas or flowcharts correctly?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.<head>or<body>The bottom includes the corresponding CDN resources or local scripts, such as MathJax for mathematical formulas, and 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 correctly use Markdown and display mathematical formulas and flowcharts on web pages'.

  3. If I don't want toarchiveDetailEnglish translation: auto will convert Markdown to HTML, how can it be done?You can check if the content is empty byarchiveDetailspecify in the tag.render=falseHow to prevent Markdown content from being automatically rendered. For example: {% archiveDetail archiveContent with name="Content" render=false %}{{archiveContent|safe}}</div>like this,ContentThe field will be output in its original Markdown text format and will not be converted to HTML.This is very useful when you might want to use a custom Markdown renderer on the client side, or simply display the original Markdown code.