How is the `archiveDetail` tag used to retrieve and display detailed content information for a single document?

In AnQi CMS,archiveDetailTags are a very core and practical tool in template creation, mainly used to obtain and display detailed content information of a single document. Whether it is a blog post, product details, news report, or any other content that needs to be displayed independently on a page, archiveDetailCan help you flexibly extract and display on the front page of the website.

archiveDetailAn overview of the core functions of the tag

The design purpose of this tag is to provide rich data support for a single document, allowing you to easily call various properties of the document when building a detail page.It is not limited to the title and content, but also includes SEO information, images, time, category, and various custom fields, thus achieving a highly customized page display.

archiveDetailBasic usage of tags

archiveDetailThe label usage is very intuitive. When you are on a document detail page, the system defaults to recognizing the current document and allows you to directly call its properties.If you need to retrieve data from a specific document, you canidortokenSpecify the parameters.

The basic syntax structure is usually like this:{% archiveDetail 变量名称 with name="字段名称" id="文档ID" %}

Among them:

  • 变量名称It is optional, if you do not set it, the label will directly output the field content.If set, you can assign the obtained content to a variable for further processing or multiple use in the template.
  • name="字段名称"Specify the specific attributes of the document you want to retrieve, such as title, content, etc.
  • id="文档ID"ortoken="文档URL别名"It is used to specify which document's data to retrieve. When you are on the document detail page, these two parameters are usually omitted, and the tag will automatically retrieve the document information on the current page.If you need to call the specified document on other pages, they are particularly important.

For example, you often see such usage on the document detail page.{{archive.Title}}Directly output the document title here. Thisarchiveis a global variable representing the document object of the current page.

Deep understanding of commonly used fields and applications

archiveDetailTag throughnameParameters can retrieve various fields of the document, which cover all aspects of the document and can meet the vast majority of display needs.

  1. Basic information and SEO

    • Document ID (Id), Title (Title) and link (Link), Description (Description)These are the basic information of the document, used for displaying the main content of the page and SEO optimization. You can easily place the document title in<h1>Description used in the tagmeta description.
    • SEO Title (SeoTitle) Keywords (Keywords)These fields are designed for search engine optimization, allowing you to set more targeted TDK (Title, Description, Keywords) for each document to enhance the performance of the document in search results.
    • Standard link (CanonicalUrl)When multiple URLs point to the same content, you can specify a canonical link to avoid duplicate crawling by search engines and improve SEO efficiency.

  2. Content main (Content) and directory (ContentTitles)

    • ContentThis is the main content of the document. It is worth mentioning that,Contentthe field supports lazy loading of images (lazy="data-src") and Markdown rendering (render=trueThis means that if your content contains a large number of images, you can enable lazy loading to optimize page loading speed;If your content is written in Markdown, the system can also automatically convert it to HTML for display, greatly enhancing the flexibility of content editing.
    • ContentTitles: If your document content structure is clear, containing multiple title levels, this field can return an array of titles, which you can use to automatically generate an article table of contents, enhancing the user's reading experience.

  3. Image display (Logo,Thumb,Images)

    • LogoandThumbUsed to retrieve the cover image and thumbnail of the document, suitable for the visual presentation on list pages or detail pages.
    • Images: If the document contains a set of images (such as product group images), this field will return an array of image URLs. You need to cooperateforwith loop tags to iterate and display all images.

  4. Time information (CreatedTime,UpdatedTime)

    • These fields return the timestamp of the document's creation and update time. Typically, you need to combinestampToDatetags to format it into a readable date and time format, such as{{stampToDate(archive.CreatedTime, "2006-01-02 15:04")}}.

  5. Category (Category)

    • archiveDetailThe tag can directly obtain the category information of the document.CategoryThe field itself is an object, you can further access itsTitle/Linkproperties, such as{{archive.Category.Title}}to display the category name.

  6. Custom field parameter (archiveParams)

    • In addition to the above built-in fields, the additional fields you customize for the document model in the background can also be usedarchiveDetailor a specialarchiveParamsTag retrieval. This provides you with great content expansion capabilities. You can directly access{{archive.您的自定义字段名}}by visiting, or usearchiveParamstags to traverse all custom parameters.

Practical scenario examples

In order to understand betterarchiveDetailThe application, let's look at some common scenarios:

Scenario one: Building a blog article detail page

On a typical blog article detail page, you may need to display the article title, publish time, category, tags, content, and views.

<article>
    <h1 class="article-title">{% archiveDetail with name="Title" %}</h1>
    <div class="article-meta">
        发布于：<span>{% archiveDetail with name="CreatedTime" format="2006年01月02日" %}</span>
        分类：<a href="{% categoryDetail with name='Link' id=archive.CategoryId %}">{% categoryDetail with name='Title' id=archive.CategoryId %}</a>
        浏览：<span>{% archiveDetail with name="Views" %}次</span>
    </div>
    <div class="article-content">
        {%- archiveDetail articleContent with name="Content" lazy="data-src" render=true %}
        {{articleContent|safe}}
    </div>
</article>

Here, we obtained the article title, formatted publication time, and throughCategoryIdThe link and name of the category were obtained, as well as the article view count.The content part enables lazy loading of images and Markdown rendering, ensuring rich content and efficient loading.

Scenario two: Display the product detail page

For a product detail page, in addition to the product name and detailed introduction, it may also be necessary to display the main product image, multiple product detail images, and product specifications, etc., as custom parameters.

<div class="product-detail-wrapper">
    <div class="product-image-gallery">
        <img src="{% archiveDetail with name='Logo' %}" alt="{% archiveDetail with name='Title' %}" class="product-main-image" />
        <ul class="product-thumb-list">
            {% archiveDetail productImages with name="Images" %}
            {% for img in productImages %}
            <li><img src="{{img}}" alt="{% archiveDetail with name='Title' %}" /></li>
            {% endfor %}
        </ul>
    </div>
    <div class="product-info">
        <h1 class="product-name">{% archiveDetail with name="Title" %}</h1>
        <p class="product-description">{% archiveDetail with name="Description" %}</p>
        <div class="product-specs">
            <h3>产品规格</h3>
            {% archiveParams params %}
            {% for item in params %}
            <p><span>{{item.Name}}：</span>{{item.Value}}</p>
            {% endfor %}
            {% endarchiveParams %}
        </div>
    </div>
    <div class="product-full-content">
        <h2>详细介绍</h2>
        {%- archiveDetail productContent with name="Content" %}
        {{productContent|safe}}
    </div>
</div>

In this example, we displayed the main product imageLogoand utilizedImagesthe field to loop through the product group images. At the same time, througharchiveParamsThe label traversed and displayed all custom product specifications, finally presenting