As an experienced website operation 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 provides us with great convenience.archiveDetailTags, especially the mysteries of its Markdown rendering and lazy loading of images.
archiveDetailThe label 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 perform in-depth processing on the main content of the document, thereby directly affecting the form of content displayed to users and the loading performance of the page.
Precise 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 exceptionally easy.archiveDetailTags provide fine-grained control capabilities.
The key is inarchiveDetailthe tag inContentField, which can intelligently handle document content. Furthermore, this field also has a specialrenderThe parameter, this parameter is the key to our precise control of Markdown rendering.
By settingrender=true，您可以指示AnQiCMS将存储为Markdown格式的文档内容，在输出到前端页面时自动解析并渲染成标准的HTML结构。This means that your article can maintain the concise writing experience of Markdown, while presenting a beautiful and structured HTML page on the user's end.render=trueIt will ensure that they are correctly converted to<h1>/<ul>/<pre>the corresponding HTML tags.
Alternatively, if you have some specific requirement to retain the original Markdown text without any HTML conversion, then you just need torenderparameter settingsfalseIn this case,archiveDetailLabels will directly output the original Markdown string from 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,archiveDetail便能根据您的 Englishrender参数设定，智能地处理文档内容，为您的内容展示带来极大的灵活性。
优化体验：图片内容的懒加载机制
Images are an important part of the website content, but too many images, especially if they are all loaded at the beginning of page loading, can often slow down the website speed, affect user experience, and even have a negative impact on SEO.This is when the image 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.
AnQiCMSarchiveDetailLabel in processing document content (name="Content") cleverly integrates support for lazy loading of images. By adding in the tag,lazy="data-src"Such a property, you are actually telling AnQiCMS that when it processes document content,<img>do not use the attribute directly when labeling,srcInstead of loading the image, it puts the original URL into a name,data-srcThe custom attribute is in the English.
When the page is loaded, the browser will not immediately request images with the English.data-srcattribute because its English.srcThe property is usually empty or points to a placeholder. Only when these image elements are about to enter the user's visible area, the front-end JavaScript lazy loading library will intervene and 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 first page load, enhancing the overall performance of the website and the perceived speed of the users.
Code example:
{# 启用图片懒加载，将图片URL转移到data-src属性 #}
<div>文档内容：{% archiveDetail archiveContent with name="Content" lazy="data-src" %}{{archiveContent|safe}}</div>
Please note,lazy="data-src"Just a command that AnQiCMS outputs HTML structure. To truly implement the lazy loading effect of images, your front-end template still needs to cooperate with the corresponding JavaScript library. These libraries usually initialize after the page is loaded, listen to scroll events, and determine whether the images are in the viewport, and then execute the corresponding action.data-srcwithsrcEnglish operation.
Summary
In summary, the value of AnQiCMS'sarchiveDetailTags 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 throughrenderParameters control the rendering mode of Markdown content, or throughlazy="data-src"Command optimize the image loading strategy,archiveDetailProvide flexible and practical solutions to make your website operation more efficient and intelligent, providing users with a smooth and professional reading experience.
Common Questions and Answers (FAQ)
Q1: I have enabled the Markdown editor in the background, andarchiveDetailset in the tagrender=truebut the Markdown content is still not rendered into HTML, why is that?
A1:Please check your front-end template code. After usingarchiveDetailtags to getContentthe content, make sure to output it as "safe" content, that is, add it after the variable|safefilter. For example:{{archiveContent|safe}}. If it is 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 without implementing lazy loading, where is the problem?
A2: lazy="data-src"The function of the parameter is to let AnQiCMS, when generating HTML, transfer the image URL fromsrcthe attribute todata-srcProperty.This is just to provide structural preparation for lazy loading.lazysizes.js/vanilla-lazyloadThese JS libraries are responsible for listening to page scrolling, and when the image enters the visible area, theydata-srcdynamically copy the value backsrcProperties, thus triggering the image loading. If the front-end JS library is not配合, the image will not be lazy-loaded.
Q3:archiveDetailTagslazywhether the parameter supports customizing othersdata-*property, for examplelazy="data-original"?
A3:According to the official documentation of AnQiCMS,archiveDetailthe built-in support for lazy loading images of the tag isspecificallyUselazy="data-src"This fixed format. This means that the AnQiCMS system will transfer the document content to<img>Tagssrcthe attribute value todata-srcthe attribute. If you need to usedata-originalOr other custom property names to implement lazy loading, you may need to adapt at the frontend JS level, or consider using AnQiCMS's custom filters,filter）et advanced template features，toContentperform a second processing of the output HTML to match the specific attribute requirements of the lazy loading library you need. But the most direct and officially recommended way is to cooperate withlazy="data-src"Use.