How to retrieve the title, content, image, and custom fields of a specific document using the `archiveDetail` tag?

How to use in AnQiCMSarchiveDetailFine control of document content display with tags

AnQiCMS is an efficient and flexible content management system, one of its core advantages lies in its powerful content display capabilities.We hope to be able to finely control the display of each independent article, product details, or any other "document" type of content on the front page of the website. This is exactlyarchiveDetailThe label showcases its talents. It not only helps us obtain the basic information of the document but also easily retrieves associated images, custom fields, and other diverse content, providing rich dynamic display effects for the website.

Get to knowarchiveDetailTag

archiveDetailTags are specifically used to obtain detailed data of a specific document. In most cases, when you visit the details page of a specific document, it will automatically identify 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 data obtained for subsequent more complex processing, you can name it; if not specified, the label will output the field content directly.name="字段名称"This is the key to specify which specific information we want to obtain, andid="1"(Or)token="文档别名"）is used to specify which document's data you want to obtain. Usually, you can omit this in the document detail 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 content of the document.

Document Title and Description

The basic requirement is to get the title and description of the document. You can useTitleto get the document title, as well asDescriptionto get the document synopsis.

For example, to display the current document title on the page:<h1>{% archiveDetail with name="Title" %}</h1>

The description is displayed similarly:<p>{% archiveDetail with name="Description" %}</p>

If you want to get the title of a document with a specified ID, 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.archiveDetailByname="Content"To get this part of the data.

Since the content may contain HTML tags, you need to use it in conjunction to ensure that the browser can correctly parse and render these contents|safeFilter. If your document content uses a Markdown editor and you want it to be automatically rendered as HTML, you canContentfield.render=trueParameter.

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

In addition, if your website has enabled the image lazy loading feature, you canlazy="data-src"use such parameters to make the system automatically replace images when outputting HTML contentsrcwith a specified attribute name, such asdata-src），convenient for front-end lazy loading script recognition.

Time information: publishing and updating

The publishing and updating time of the document is an important indicator for users to understand the timeliness of the content.archiveDetailProvidedCreatedTime(Add Time) andUpdatedTimeThe field of (update time). These fields return timestamps, and we canformatParameters are formatted directly in 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

Images are 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 throughnameparameters 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" %}" />

multi-image group display

If your document contains multiple images (such as product detail page carousels),ImagesThe field will return an array of image URLs. At this point, you need to define a variable to receive this array and thenforLoop to traverse 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 is a highlight with its flexible content model, allowing users to customize various fields for different types of documents.archiveDetailTags also support calling these custom fields.

Suppose you have added a namedMaterial(Material) custom field, 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 directly accessednameparameters.

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 specifications list), without knowing the name of each field in advance. In this case, you can usearchiveParamsLabels to retrieve these fields, then display them through a loop.archiveParamsIt will return a list containing field names(Name) and the values of the fields, and you can useValueThe 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 combined with associated information

On the document detail page, in addition to the information of the document itself, we usually need to display its category and associated tags.

Display the category information of the document

The category information of the document can be displayed byarchiveDetailofCategoryThe field directly retrieves, 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 retrieval, pass the current document ID as a parameter, and then display through a loop.

Example: “`twig

Tag: {% tagList