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

In the Anqi CMS,archiveDetailTags are a very core and practical tool during template creation, mainly used to obtain and display detailed 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, archiveDetailCan help you flexibly extract and present on the front page of the website.

archiveDetailOverview 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 the detail page.It is not limited to titles and content but includes SEO information, images, time, categories, and various custom fields you define, thereby achieving a highly customized page display.

archiveDetailBasic usage of the tag

archiveDetailThe label usage is very intuitive.When you are on the detail page of a document, the system defaults to recognizing the current document and allows you to directly call its properties.idortokenSpecify the parameters.

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

Among them:

  • 变量名称[en]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="字段名称"Used to specify the specific properties 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 optional, as the tag will automatically retrieve the document information of the current page.If you need to call specific documents on other pages, they are particularly important.

For example, you often see such usage on the document detail page:{{archive.Title}}Output the document title directly. Here is thearchiveis a global variable representing the document object of the current page.

Deep understanding of commonly used fields and applications

archiveDetailTagged throughnameParameters can retrieve various fields of the document, covering all aspects of the document and meeting the vast majority of display needs.

  1. Basic Information and SEO

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

  2. Content body (Content) and catalog (ContentTitles)

    • Content[en]: This is the main content of the document. It is worth mentioning,Contentfield supports lazy loading of images (lazy="data-src") and Markdown rendering (render=true).This 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.
    • ContentTitlesIf your document content structure is clear and includes multiple title levels, this field can return an array of titles, which you can use to automatically generate a table of contents and enhance the user's reading experience.

  3. Image display (Logo,Thumb,Images)

    • LogoandThumb: Used to obtain the cover image and thumbnail of the document, suitable for visual presentation on list pages or detail pages.
    • ImagesIf 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 two fields return the timestamp of the document's creation time and update time. Usually, you need to combinestampToDatetags to format them into a readable date and time format, such as{{stampToDate(archive.CreatedTime, "2006-01-02 15:04")}}.

  5. Category (Category)

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

  6. Custom field parameters (archiveParams)

    • In addition to the above built-in fields, the additional fields you customize for the document model in the background can also be accessed througharchiveDetailor a dedicatedarchiveParamsTag acquisition. This provides you with great content expansion capabilities. You can directly access{{archive.您的自定义字段名}}it, or usearchiveParamstags to iterate over all custom parameters.

Useful scenario examples

To better understandarchiveDetailThe application, let's take a look at several common scenarios:

Scenario one: Building the blog article detail page

In a typical blog article detail page, you may need to display the article title, publish time, category, tags, content, and page 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 retrieve the article title, formatted publication time, and throughCategoryIdThe link and name of the category and the article views were obtained.The content part enables image lazy loading and Markdown rendering, ensuring the richness and loading efficiency of the content.

Scenario two: Display 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 customized 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 show the main product image.Logoand utilizeImagesfields to cyclically display the product group images. At the same time, througharchiveParamsLabel traversal and displayed all custom product specification parameters, finally presented