How to use the `archiveDetail` tag in AnQi CMS to display custom field content of a document?

The AnQi CMS offers a flexible content model design, allowing users to add various custom fields to documents according to their business needs.These custom fields greatly enrich the expression of the website content, whether it is to display product specifications, event details, or additional information of articles, it can be handled with ease.How to cleverly use in the document detail pagearchiveDetailTags to display these valuable custom field contents?

UnderstandingarchiveDetailThe core role of tags

In the AnQi CMS template system,archiveDetailTags are tools used to obtain detailed information about a single document. When you ask a specific article or a product page on a website, it is usually this tag working silently in the background, presenting all the data of the document to the visitor.

The basic usage of this tag is as follows:{% archiveDetail 变量名称 with name="字段名称" id="1" %}.

  • nameThe parameter specifies which field content you want to retrieve, such as the document titleTitleDocument contentContentetc.
  • idThe parameter is used to specify the specific document ID. If you want to get information about a specific document, you can use this parameter.
  • tokenThe parameter is the URL alias of the document, and it can also be used to specify the document.
  • siteIdThis is used in a multi-site environment to specify which site's data to retrieve.

However, most of the time, when you are on the document details page (for example, the file name{模型table}/detail.htmltemplate) is usedarchiveDetailtags, it is usually not necessary to specify explicitlyidortoken. The system will intelligently identify the document on the current page and automatically obtain its detailed data. At this point, you can directly use{{archive.字段名称}}This abbreviated way of calling the standard fields of the document is convenient and intuitive. However, for custom fields, we often rely more onarchiveDetaillabel'snameparameters to accurately obtain.

Display the standard field content of the document

Before we delve into custom fields, let's take a look atarchiveDetailHow to display some common standard fields. These fields are usually present in all documents and do not require additional configuration:

For example, to display the title, description, content, or views of a document, you can do this:

<div>文档标题：{% archiveDetail with name="Title" %}</div>
<div>文档描述：{% archiveDetail with name="Description" %}</div>
<div>文档浏览量：{% archiveDetail with name="Views" %}</div>
<div>文档发布时间：{% archiveDetail with name="CreatedTime" format="2006-01-02" %}</div>
<div>文档内容：{% archiveDetail archiveContent with name="Content" %}{{archiveContent|safe}}</div>

Please note that when displaying the content of a document (Content), we usually use|safeFilter. This is because the document content may contain HTML tags,|safeTell the template engine that this content is safe, does not need to be escaped, and thus ensures that HTML can be rendered normally rather than displayed as plain text.

Core Function: Display Custom Field Content

The strength of Anqi CMS lies in its flexible content model.Under the 'Content Management' menu in the background, you can enter the 'Content Model' settings, create or modify models for different content types (such as articles, products), and add unique custom fields for them.These custom fields can be single-line text, numbers, multi-line text, single selection, multiple selection, or dropdown selection, among other types, to meet various personalized content display needs.

1. Call a Single Custom Field

Once a custom field is defined for the document model in the background, for example, if you add a field named “to the product model产品型号the field name called “product_modelThen, in the product details page, you can access it througharchiveDetaillabel'snameCall it directly via the parameter:

<div>产品型号：{% archiveDetail with name="product_model" %}</div>

If you name the custom fieldauthorYou can retrieve it like this:

<div>文章作者：{% archiveDetail with name="author" %}</div>

This method is simple and direct, suitable for when you know exactly which custom field to display.

2. Loop to display all custom fields

Sometimes, you may want to display all the custom fields of a document in an area without having to list them individually. At this point,archiveParamsthe tag comes into play.archiveParamsThe tag can retrieve all custom parameters of the current document or a specified document and return them as an array.

You can use it like this:

{% archiveParams params %}
<div>
    {% for item in params %}
    <div>
        <span>{{item.Name}}：</span>
        <span>{{item.Value}}</span>
    </div>
    {% endfor %}
</div>
{% endarchiveParams %}

In this code block,paramsIt is an array containing multiple objects, each withName(Custom field name) andValue(The value of the field) attribute. ThroughforLoop, you can easily iterate through and display all custom fields of the document. This is particularly convenient for scenarios where you need to dynamically display product parameter lists or detailed properties.

3. Handle special custom fields (such as group images)

If your custom field type is a group image (multiple images), for example, if you define a field named in the backgroundarcimagesThe group image field, then it will be recognized as an array of image URLs in the template. You need to use a loop to display these images one by one:

{% archiveDetail arcimages with name="arcimages" %}
<ul class="arc-images">
  {% for img in arcimages %}
  <li><img src="{{img}}" alt="文档图片" /></li>
  {% endfor %}
</ul>

Here, we first usearchiveDetailthe tag to get the name ofarcimagesAssign the group chart data toarcimagesthe variable, then throughforLoop through this array, embed the URL of each image into<img>in the tag.

Practice case: Combine standard and custom fields to display

To better illustratearchiveDetailThe actual application, let's take a look at how to combine standard fields and custom fields in common articles and product detail pages.

Example of article detail page layout:

Assuming you have a detailed article page, in addition to standard information such as title, content, publication time, and views, you also want to display the "article source" (a custom fieldsource）and "editor" (custom fieldeditor)

<article>
    <h1>{% archiveDetail with name="Title" %}</h1>
    <div>
        <a href="{% categoryDetail with name='Link' %}">{% categoryDetail with name='Title' %}</a>
        <span>发布时间：{% archiveDetail with name="CreatedTime" format="2006-01-02" %}</span>
        <span>浏览量：{% archiveDetail with name="Views" %}°</span>
    </div>
    <div>
        <span>文章来源：{% archiveDetail with name="source" %}</span>
        <span>编辑者：{% archiveDetail with name="editor" %}</span>
    </div>
    <div>
        {%- archiveDetail articleContent with name="Content" %}
        {{articleContent|safe}}
    </div>
</article>

Layout example for product detail page:

For the product detail page, you may need to display product images, product names, product descriptions, and usearchiveParamsDisplay all product specifications dynamically.

<article>
    <div>
        <div>
            <img src="{% archiveDetail with name='Logo' %}" alt="{% archiveDetail with name='Title' %}" />
        </div>
        <div>
            <h1>{% archiveDetail with name="Title" %}</h1>
            <div>产品简介：{% archiveDetail with name="Description" %}</div>
            
            <h3>产品参数：</h3>
            {% archiveParams params %}
            {% for item in params %}
            <div>
                <span>{{item.Name}}：</span>
                <span>{{item.Value}}</span>
            </div>
            {% endfor %}
            {% endarchiveParams %}
            
            <div>
                <a href="tel:{% contact with name='Cellphone' %}" rel="nofollow">电话联系：{% contact with name="Cellphone" %}</a>
            </div>
        </div>
    </div>
    <div>
        <h2>产品详情：</h2>
        <div>
            {%- archiveDetail articleContent with name="Content" %}
            {{articleContent|safe}}
        </div>
    </div>
</article>

Usage tips and precautions.

  • |safeThe filter is indispensable: When your custom field content (especially the 'multiline text' type) may contain HTML tags, be sure to use|safeThe filter, otherwise the HTML code will be escaped into plain text and cannot be rendered normally.
  • Rendering of Markdown content: If your custom field content is entered using a Markdown editor and you want to render it as HTML on the front end, you canarchiveDetailthe tag withrender=trueparameters, for example{% archiveDetail customMarkdownField with name="customMarkdown" render=true %}{{customMarkdownField|safe}}.
  • Field names are strictly case-sensitive:In