In AnQiCMS, how to usearchiveDetailtag fine control to display document content?
AnQiCMS as an efficient and flexible content management system, one of its core advantages lies in its powerful content display capabilities.For each individual article, product detail, or any other 'document' type of content on the website, we hope to be able to finely control their display on the front page.archiveDetailThe place where tags excel.It can not only help us obtain the basic information of the document, but also easily retrieve its associated images, custom fields, and other diverse content, providing rich dynamic display effects for the website.
KnowarchiveDetailtags
archiveDetailThe tag is specifically used to retrieve detailed data of a specific document.In most cases, when you visit a specific document detail page, it will automatically recognize the document ID of the current page and load all its information.If you need to display the content of a specific document at a non-detail page or other location, you can also achieve this by specifying parameters.
Its basic usage form is usually like this:{% archiveDetail 变量名称 with name="字段名称" id="1" %}
Here,变量名称is an optional placeholder, if you want to store the obtained data for subsequent more complex processing, you can name it; if not specified, the label will directly output the field content.name="字段名称"Then it is the key to specify which specific information we want to obtainid="1"(or)token="文档别名") It is used to specify the data of the document you want to obtain. Usually, you can omit it in the document details page.idortokenThe system will automatically retrieve the data of the current document.
Display the core information of the document.
After understanding the basic syntax, we can start to obtain the core contents of the document.
Document Title and Description
The most basic requirement is to obtain the title and description of the document. You can useTitleto obtain the document title, as well asDescriptionto obtain the document summary.
For example, to display the current document's title on the page:<h1>{% archiveDetail with name="Title" %}</h1>
The display of the document description is similar:<p>{% archiveDetail with name="Description" %}</p>
If you want to get the title of a specified ID document, you can do it like this:<h2>特定文档标题：{% archiveDetail with name="Title" id="10" %}</h2>
Document content: Handling rich text and Markdown
The document content is the core part of the detail page, usually containing complex HTML structures or Markdown formatted text.archiveDetailPassname="Content"To get this part of the data.
English translation: Due to the content may contain HTML tags, in order to ensure that the browser can correctly parse and render these contents, you need to use in conjunction with|safeFilter. If your document content is edited using the Markdown editor and you want it to be automatically rendered into HTML on the front end,Contentadded after the fieldrender=trueParameter.
Example:<div>{% archiveDetail docContent with name="Content" render=true %}{{ docContent|safe }}</div>
Additionally, if your website has enabled the lazy loading feature for images, you can replace the images automatically when outputting HTML content throughlazy="data-src"such parameters, allowing the system to automatically replace images in the output HTML contentsrcproperties with specified names (for exampledata-src），方便前端懒加载脚本识别。
Time information: publication and update
The publication and update time of the document is an important indicator for users to understand the timeliness of the content.archiveDetailprovided,CreatedTime（Added time）andUpdatedTimeThe field [Update Time]. These fields return timestamps, and we can useformatParameters are formatted directly within the tag, for example, displayed as “2023-10-26”.
Example:<p>发布日期：{% archiveDetail with name="CreatedTime" format="2006-01-02" %}</p>
<p>更新时间：{% archiveDetail with name="UpdatedTime" format="2006-01-02 15:04" %}</p>
Flexible display of document images
The image is an indispensable part of the content, AnQiCMS provides various image types for documents:
Cover image and thumbnail
LogoThe field usually represents the cover image of the document,ThumbThe field refers to the thumbnail processed by the system. They can be accessed directly throughnameParameter to obtain the image URL.
Example:<img src="{% archiveDetail with name="Logo" %}" alt="{% archiveDetail with name="Title" %}" />
<img src="{% archiveDetail with name="Thumb" %}" alt="{% archiveDetail with name="Title" %}" />
Multiple images group display
If your document contains multiple images (such as the product details page carousel),ImagesField will return an array of image URLs. At this time, you need to define a variable to receive this array, andfora loop to iterate through and display each image.
Example:
{% archiveDetail galleryImages with name="Images" %}
<div class="product-gallery">
{% for imgUrl in galleryImages %}
<img src="{{ imgUrl }}" alt="图片描述" />
{% endfor %}
</div>
Access and display custom fields
AnQiCMS's one of the highlights is its flexible content model, which allows users to customize various fields for different types of documents.archiveDetailTags also support calling these customized fields.
Assuming you have added a custom field namedMaterial(Material), or aAuthor(Author) field:
Directly call the custom field
If you know the custom field's调用字段Name (defined in the backend content model), can be accessed directly throughnameParameters can be used to call them.
Example:<p>产品材质：{% archiveDetail with name="Material" %}</p>
<p>文章作者：{% archiveDetail with name="Author" %}</p>
Traverse all custom fields
In some cases, you may want to dynamically list all the additional parameters of the document (such as the product specification list), without needing to know the names of each field in advance. At this time, you can usearchiveParamsLabels to get these fields, then iterate through to display them.archiveParamsIt will return an array containing the field names(Name）and field value（Value）of the object array.
Example:
<div class="product-specs">
<h3>产品参数</h3>
{% archiveParams docParams %}
{% for param in docParams %}
<p><span>{{ param.Name }}：</span><span>{{ param.Value }}</span></p>
{% endfor %}
{% endarchiveParams %}
</div>
Display them combined with associated information
In the document detail page, in addition to the information of the document itself, we usually also need to display its category and associated tags.
Display the category information
The category information of the document can bearchiveDetailofCategoryField is directly accessed, it returns a category object from which you can extract the category ID, title, link, etc.
Example:
{% archiveDetail currentCategory with name="Category" %}
<p>所属分类：<a href="{{ currentCategory.Link }}">{{ currentCategory.Title }}</a></p>
Display document tags
Document tags are usually bytagListLabel acquisition, and pass the current document ID as a parameter, and then display through the loop.
Example: “`twig
Tag: {% tagList