How to retrieve and display specific fields (such as title, content, image) of the document detail page using the `archiveDetail` tag?

In the Anqi CMS-built website, each document detail page is the key to displaying core content and attracting visitors to stay. To ensure that these pages can efficiently and flexibly present important information such as article titles, content, and images, understanding and utilizing it well is necessary.archiveDetailTags are particularly important. They are the powerful tools that allow you to accurately locate and flexibly display these core data.

MasterarchiveDetailTags: Accurate location and display of document details content

When you create an article or product detail page in AnQiCMS,archiveDetailThe tag is the key information you extract from the database for the current page or specified document.This tag's design concept is simple and powerful, allowing you to easily present backend data on the frontend template.

archiveDetailusage

In most cases, when you are editing a document detail page (for example,article/detail.htmlorproduct/detail.html),archiveDetailThe tag automatically identifies and retrieves the document data corresponding to the current page. Its most common usage is to directly passnameThe attribute specifies the document field you want to retrieve.

For example, to display the title of the current document, you can use the following syntax:

<div>文档标题：{% archiveDetail with name="Title" %}</div>

In addition, you can also do it more directly through the template of the document details page,{{archive.字段名称}}such a form to access the various properties of the current document, for example{{archive.Title}}. This way is more concise and suitable for directly obtaining the document information of the current page.

If you need to display on a non-document detail page (such as a block on the homepage) or specify the details of a particular document, archiveDetailLabels also providedidortokenParameters, allowing you to accurately retrieve data based on the document ID or URL alias:

{# 获取ID为1的文档标题 #}
<div>指定文档标题：{% archiveDetail with name="Title" id="1" %}</div>
{# 获取URL别名为"about-us"的文档内容 #}
<div>指定文档内容：{% archiveDetail with name="Content" token="about-us" %}</div>

Get and display core information

Next, let's see how to use itarchiveDetailLabel to retrieve and display common fields of the document detail page:

1. Document title (Title)

Obtaining the document title is very direct, it is usually one of the most prominent elements on the page:

<h1>{% archiveDetail with name="Title" %}</h1>
{# 或者更简洁地 #}
<h1>{{archive.Title}}</h1>

2. Document content (Content)

The document content is usually the longest part on the page, carrying the main information. Since the document content may contain HTML tags (such as paragraphs, links, images, etc.), you need to use|safefilter.

<div>
    {%- archiveDetail articleContent with name="Content" %}
    {{articleContent|safe}}
</div>
{# 或者更简洁地 #}
<div>{{archive.Content|safe}}</div>

If your backend has enabled the Markdown editor and you want the front-end content to be automatically rendered as HTML, you canarchiveDetailthe tag withrender=trueparameters:

{# 启用Markdown渲染 #}
<div>
    {%- archiveDetail articleContent with name="Content" render=true %}
    {{articleContent|safe}}
</div>

In addition, if you want the images in the document content to support lazy loading, you can combine the requirements of the front-end lazy loading library inarchiveDetailthe taglazy="data-src"(According to the actual requirements of your lazy loading librarydata-srcAdjust the attribute name):

{# 启用图片懒加载，将图片src属性替换为data-src #}
<div>
    {%- archiveDetail articleContent with name="Content" lazy="data-src" %}
    {{articleContent|safe}}
</div>

3. Document image (Logo,Thumb,Images)

AnQi CMS provides various image fields to meet different display needs:

  • Logo: Usually used to get the main cover image or large image of the document.
    
<img src="{% archiveDetail with name="Logo" %}" alt="{% archiveDetail with name="Title" %}" />
  • ThumbUsed to retrieve the document thumbnail, which is usually a small-size image cropped or compressed by the system.
    
<img src="{% archiveDetail with name="Thumb" %}" alt="{% archiveDetail with name="Title" %}" />
  • ImagesIf the document contains a set of images (such as a carousel on a product details page),ImagesIt will return an array of image URLs. You need to usefora loop to iterate and display these images:
    
<div>
    {% archiveDetail archiveImages with name="Images" %}
    {% for item in archiveImages %}
        <img src="{{item}}" alt="文档图片" />
    {% endfor %}
</div>

4. Other commonly used fields

In addition to titles, contents, and images,archiveDetailtags can also obtain a lot of other useful document information:

  • Document description (Description): It is usually the introduction or summary of the article.
    
<meta name="description" content="{% archiveDetail with name="Description" %}">
  • Document link (Link): The current document's URL address.
    
<a href="{% archiveDetail with name="Link" %}">查看详情</a>
  • Views (Views): Shows the number of times the document has been read or accessed.
    
<span>浏览量：{% archiveDetail with name="Views" %}</span>
  • Publish time (CreatedTime)andUpdate time (UpdatedTime): These are timestamps that need to be matched withstampToDateLabel formatting is displayed.
    
<span>发布日期：{{ stampToDate(archive.CreatedTime, "2006年01月02日") }}</span>
<span>更新时间：{{ stampToDate(archive.UpdatedTime, "2006-01-02 15:04:05") }}</span>
  • Document classification (Category): Retrieve the detailed information of the current document category, which is very useful when displaying breadcrumb navigation or related categories.
    
{% archiveDetail currentCategory with name="Category" %}
<a href="{{ currentCategory.Link }}">{{ currentCategory.Title }}</a>
{% endarchiveDetail %}
  • Custom field: AnQiCMS allows you to add custom fields to content models. If your document model defines such custom fields, you can directly access them through theauthor/sourcecustom fields, you can directly access them throughnameproperty to get them:
    
<span>作者：{% archiveDetail with name="author" %}</span>
    If you want to iterate over all custom fields, you can usearchiveParamsTags:
    
{% archiveParams params %}
<div>
    {% for item in params %}
        <span>{{item.Name}}：</span>
        <span>{{item.Value}}</span>
    {% endfor %}
</div>
{% endarchiveParams %}

Example of practical application scenarios

Let's look at the structure of a typical article detail page, how toarchiveDetailand related tags to build:

”`twig {% extends ‘base.html’ %} {# Inherit base template #}

{% block content %}

{# 获取并显示文档标题 #}
<h1>{% archiveDetail with name="Title" %}</h1>

<div class="meta-info">
    {# 显示文档分类 #}
    {% archiveDetail currentCategory with name="Category" %}
    <span>分类：<a href="{{ currentCategory.Link }}">{{ currentCategory.Title }}</a></span>
    {% endarchiveDetail %}

    {# 显示发布时间 #}
    <span>发布日期：{{ stampToDate(archive.CreatedTime, "2006