How to retrieve and display the full content of a single document using the `archiveDetail` detail tag?

In AnQi CMS, displaying the full content of a single document is the foundation of website operation.This is the core of how to efficiently and accurately present the data entered in the background to the user, whether it is a news article, a product detail, or a service introduction.archiveDetailThe place where the label and its related mechanism take effect.

UnderstandingarchiveDetail: Get the core of a single document.

When discussing obtaining the full content of a single document, it is first necessary to clarify: when you visit the detail page of a document (such as你的域名/article/123.html), AnQi CMS has very intelligently loaded all the data of the current document into a name calledarchiveThe global variable is. This means that in the template of the document detail page, you can usually directly call{{archive.字段名}}to quickly and concisely call the various information items of the document, such as{{archive.Title}}The document title will be displayed,{{archive.Content}}Then the document content will be displayed.

However,archiveDetailTags provide more flexible control methods. They allow you not only to obtain the details of the current page's document but also to explicitly specify through document ID (id) or URL alias (token) To get the content of any document. This flexibility is especially useful in scenarios where referencing or comparing the content of other documents is needed. Its basic usage is{% archiveDetail 变量名称 with name="字段名称" id="文档ID" %}Or, if you just want to output a field without defining a variable, you can also omit it变量名称.

Keyword field and practical call

Make full use ofarchiveDetailLabel, it is crucial to understand the various fields it supports.

The basic text information is first. For example, to display the document title, you can use{{archive.Title}}or{% archiveDetail with name="Title" %}. Similarly, the document link (Link), Description (Description) Keywords (Keywords) and the number of views (Views) Etc. can be easily obtained in a similar way. For example, displaying the number of views of the current document on the page:

<p>浏览量：{{archive.Views}} 次</p>

Next are the image resources. The cover image of the document (Logo)，and thumbnail (Thumb）Are common display elements. If the document is configured with multiple cover images（Images），it will return an array, at which point you need toforloop through and display：

<img src="{{archive.Logo}}" alt="{{archive.Title}}" />

{% if archive.Images %}
<div class="gallery">
    {% for imgUrl in archive.Images %}
    <img src="{{imgUrl}}" alt="图片描述" />
    {% endfor %}
</div>
{% endif %}

The core content field of the documentContentIt is the key to displaying article or product details. It should be noted that the content usually contains HTML code generated by rich text editors, in order for the browser to correctly parse and display the style, Must cooperate|safeusing a filterTo prevent HTML from being escaped and displayed as plain text. In addition, if your content is in Markdown format, you can also use the followingrender=trueThe parameter allows the system to automatically render it as HTML.

<div class="article-content">
    {{archive.Content|safe}}
    {# 如果内容是Markdown格式，且想强制渲染： #}
    {# {{archive.Content|render=true|safe}} #}
    {# 如果内容是Markdown格式，但想获取原始Markdown文本： #}
    {# {{archive.Content|render=false|safe}} #}
</div>

The publication and update time of the document (CreatedTimeandUpdatedTime) is in Unix timestamp format, to make it easier to read, you need to usestampToDateThe function performs formatting. For example, format the publication time as "year-month-day":

<span>发布时间：{{stampToDate(archive.CreatedTime, "2006-01-02")}}</span>

The flexibility of AnQi CMS lies in its customizable content model fields. If you add a custom field, such as "author", to a content model in the background,authorOr "product model"(modelNumberYou can access it directly by{{archive.author}}or{{archive.modelNumber}}To iterate over all custom fields,archiveParamsThe tag will be a good helper, it can return all custom fields in array form for easy iteration display:

{# 直接调用自定义字段 #}
<p>作者：{{archive.author}}</p>

{# 遍历所有自定义字段 #}
{% archiveParams params %}
<ul class="custom-fields">
    {% for item in params %}
    <li><strong>{{item.Name}}：</strong>{{item.Value}}</li>
    {% endfor %}
</ul>
{% endarchiveParams %}

When your website is a multi-site architecture,siteIdParameters allow you to call document data across sites, which provides convenience for content integration on multi-brand or multi-language websites.

Example of practical application scenarios

Scenario one: Standard article detail pageIn a blog or news website, a typical article detail page may include title, category links, publication time, tags, views, and body. Below is a concise template snippet showing how to combine this information:

<article class="article-detail">
    <h1 class="article-title">{{archive.Title}}</h1>
    <div class="article-meta">
        <a href="{{archive.Category.Link}}" class="category-link">{{archive.Category.Title}}</a>
        <span class="publish-time">发布于：{{stampToDate(archive.CreatedTime, "2006-01-02")}}</span>
        <span class="views">阅读量：{{archive.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">
        {{archive.Content|safe}}
    </div>
</article>

Scene two: Product details pageFor e-commerce or product display websites, the product detail page may focus more on product images, names, detailed parameters, and descriptions. Here, customized fields and image display are combined:

`twig

<div class="product-images">
    <img src="{{archive.Logo}}" alt="{{archive.Title}}" class="main-product-image" />
    {% if archive.Images %}
    <div class="thumbnail-gallery">
        {% for img in archive.Images %}