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

In the website built with AnQi CMS, each document detail page is a 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, it is important to understand and make good use ofarchiveDetailThe label is particularly important. It is the powerful tool that allows you to accurately locate and flexibly display these core data.

RidearchiveDetailLabel: Accurate location and display of document details content

When you create an article or product detail page in AnQiCMS,archiveDetailThe label is the key detail you extract from the database for the current page or specified document.The design philosophy of this tag is simple and powerful, allowing you to easily present backend data on the frontend template.

archiveDetailbasic usage

In most cases, when you are editing a document detail page (such as,article/detail.htmlorproduct/detail.html){archiveDetailTags will automatically recognize and retrieve the document data corresponding to the current page. Its most common usage is to directly specify the document field you want to retrieve throughnamethe property.

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

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

Additionally, you can also be more direct in the template of the document details page,{{archive.字段名称}}This form is used to access the various properties of the current document, for example,{{archive.Title}}. This method 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,archiveDetailtags also provideidortokenParameters, allowing you to accurately obtain the data according to 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 take a look at how to usearchiveDetailLabeling the common fields to retrieve and display document detail pages:

1. Document Title (Title)

It is very direct to retrieve the document title, which 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.), in order to ensure that these HTML contents are rendered correctly and not displayed as plain text by the browser, you need to use|safeFilter.

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

if your backend has enabled Markdown editor and you want the front-end content to be automatically rendered as HTML,archiveDetailtag.render=trueParameters:

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

Additionally, if you want images in the document content to support lazy loading, you can combine the requirements of the front-end lazy loading libraryarchiveDetailspecified in the taglazy="data-src"(Based on the actual lazy loading library you are usingdata-srcproperty name adjustment):

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

3. Document image (Logo,Thumb,Images)

The AutoCMS 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" %}" />
  • Thumb：Used to get the thumbnail of the document, which is usually a small-sized image cropped or compressed by the system.
    
<img src="{% archiveDetail with name="Thumb" %}" alt="{% archiveDetail with name="Title" %}" />
  • Images：If the document contains a set of images (such as the carousel of product details page),ImagesWill return an array of image URLs. You need to usefora loop to iterate over 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 the title, content, and images,archiveDetailtags can also obtain many other useful document information:

  • Document Description (Description): Usually the introduction or abstract of the article.
    
<meta name="description" content="{% archiveDetail with name="Description" %}">
  • document link (}Link): The URL address of the current document.
    
<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 withstampToDatetags for formatted display.
    
<span>发布日期：{{ stampToDate(archive.CreatedTime, "2006年01月02日") }}</span>
<span>更新时间：{{ stampToDate(archive.UpdatedTime, "2006-01-02 15:04:05") }}</span>
  • Document category (Category): Retrieve the detailed information of the current document's 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 fieldsAnQiCMS allows you to add custom fields to content models. If your document model defines fields likeauthor/sourceyou can directly access them through thenameproperty:
    
<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 take a look at the structure of a typical article detail page, how toarchiveDetailand related tags to build:

auto

{% 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