How to retrieve and display the detailed information of a single document, including its custom fields, using the `archiveDetail` tag?

In a content management system, effectively displaying detailed information of a single document is one of the core requirements.Whether it is news articles, product introductions, or service descriptions, users always hope to have a direct and comprehensive understanding of the specific content of each item.AnQiCMS (AnQiCMS) provides powerfularchiveDetailLabels, allowing you to easily retrieve and display all information about a single document, even including your custom exclusive fields.

Get the core information of the document:archiveDetailusage

archiveDetailTags are tools used in Anqi CMS templates to accurately extract detailed data of a single document. Its basic syntax is{% archiveDetail 变量名称 with name="字段名称" id="文档ID" %}. Here,变量名称is an optional alias used to refer to the obtained data in subsequent template code;nameThe parameter specifies the specific document field you want to retrieve;idThe parameter allows you to specify the document to retrieve for a specific ID. Of course, if you are on the document detail page (such asdetail.htmlorarchive/detail.html), it is usually not necessary to provideidParameters, the system will default to retrieving the document information of the current page. In addition, you can also specify the document's URL alias throughtokenparameters to obtain its details.

This tag can help you extract various built-in fields of the document, such as:

• Id: The unique identifier of the document.
• Title: The title of the document.
• Link: The access link of the document.
• Description: A brief description or summary of the document.
• Views: Document views.
• Logo: The main cover image of the document.
• Thumb: The thumbnail of the document cover.
• CategoryId: The ID of the category to which the document belongs.

For example, if you want to display the document title on the detail page, you can write it like this: <h1>{% archiveDetail with name="Title" %}</h1>

If you need to get the link of the document with a specified ID, you can do it like this:<a href="{% archiveDetail with name="Link" id="10" %}">查看文档10</a>

It is particularly noteworthy thatContentThe field carries the main content of the document, usually containing rich text and graphic information, even in HTML format. When you need to display this content, please be sure to use|safeA filter to ensure that HTML code is parsed correctly and not displayed as plain text:<div>{% archiveDetail content with name="Content" %}{{content|safe}}</div>If your content is in Markdown format and you want it to be rendered as HTML on the front end, you can useContentfield'sarchiveDetailthe tag withrender=trueparameters:<div>{% archiveDetail content with name="Content" render=true %}{{content|safe}}</div>Additionally, for content with many images, you can also make use oflazyThe parameter specifies the lazy loading attribute of the image, for examplelazy="data-src"so that your front-end lazy loading script can work properly.

For date and time fields such asCreatedTime(creation time) andUpdatedTime(update time),archiveDetailthe tag also provides convenient features forformatParameters to directly format the output, saving the manual stepsstampToDateThe steps of the tag:<span>发布日期：{% archiveDetail with name="CreatedTime" format="2006年01月02日" %}</span>

Extended usage: flexible display of custom fields

The strength of AnQi CMS lies in its flexible content model design, which allows you to customize document fields according to your business needs. These custom fields can also be accessed througharchiveDetailEasily retrieve and display tags.

Assuming you have defined a custom field namedpricein the content model. You can directly get its value throughnameparameter:<span>产品价格：{% archiveDetail with name="price" %} 元</span>

If you are unsure about which custom fields are in the document, or if you want to dynamically display all custom fields,archiveParamsThe tag comes into play. It allows you to traverse all the additional parameters of the document. Usually, you would want these parameters to be displayed in the order of the backend settings, at which point you can usesorted=trueParameter (This is the default behavior):

{% archiveParams params %}
<ul class="custom-fields">
    {% for item in params %}
    <li>
        <strong>{{item.Name}}：</strong>
        <span>{{item.Value}}</span>
    </li>
    {% endfor %}
</ul>
{% endarchiveParams %}

In this way, you can build a universal template that automatically adapts to the display of custom fields under different content models.

Practical Application: Building articles and product detail pages

Combine the above tags and you can easily build a well-functioning document detail page

Article detail page example:In a typical article detail page, you may need to display the title, category, publication time, tags, and article content.

<article>
    <h1>{% archiveDetail with name="Title" %}</h1>
    <div class="meta-info">
        <span>分类：<a href="{% categoryDetail with name='Link' id=archive.CategoryId %}">{% categoryDetail with name='Title' id=archive.CategoryId %}</a></span>
        <span>发布于：{% archiveDetail with name="CreatedTime" format="2006-01-02" %}</span>
        <span>阅读量：{% archiveDetail with name="Views" %}</span>
        <div class="tags">标签：
            {% tagList tags with itemId=archive.Id limit="5" %}
            {% for tag in tags %}
                <a href="{{tag.Link}}">{{tag.Title}}</a>
            {% endfor %}
            {% endtagList %}
        </div>
    </div>
    <div class="article-content">
        {% archiveDetail content with name="Content" render=true %}{{content|safe}}</div>
</article>

Product detail page example:For product detail pages, displaying images, names, custom parameters (such as brand, model), and detailed descriptions is a common layout.

<div class="product-detail">
    <div class="product-gallery">
        <img src="{% archiveDetail with name='Logo' %}" alt="{% archiveDetail with name='Title' %}" />
        {# 如果有自定义的图片组字段 'product_images' #}
        {% archiveDetail productImages with name="product_images" %}
        <div class="thumbnail-list">
          {% for img in productImages %}
          <img src="{{img}}" alt="产品图" />
          {% endfor %}
        </div>
        {% endarchiveDetail %}
    </div>
    <div class="product-info">
        <h1>{% archiveDetail with name="Title" %}</h1>
        <p class="description">{% archiveDetail with name="Description" %}</p>
        <div class="product-params">
            {% archiveParams params %}
            {% for item in params %}
            <p><strong>{{item.Name}}：</strong> {{item.Value}}</p>
            {% endfor %}
            {% endarchiveParams %}
        </div>
        <a href="tel:{% contact with name='Cellphone' %}" class="contact-btn">立即咨询：{% contact with name="Cellphone" %}</a>
    </div>
    <div class="product-full-content">
        <h2>产品详情</h2>
        {% archiveDetail content with name="Content" render=true %}{{content|safe}}
    </div>
</div>

Tip

In template development, when you are sure that the current page context is already a document object (for example, indetail.htmlorarchive/detail.html), in addition to using{% archiveDetail with name="字段名称" %}tag, you can also directly through{{archive.字段名}}In a way to obtain the document field, which is usually more concise and convenient. For example,<h1>{{archive.Title}}</h1>It can directly display the document title.

In short,archiveDetailTags provide a flexible and powerful way to display detailed information about a single document in AnQi CMS, including all custom fields,