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

When building website content with AnQiCMS, displaying the complete information of a single document is one of the core requirements.No matter whether it is the detailed content of an article, a detailed introduction of a product, or any other specific entry of a custom content model, an efficient and flexible way is needed to extract and present this data.archiveDetailWhere the tag plays a role.

UnderstandingarchiveDetailThe core role of tags

archiveDetailThe tag is a powerful tool in AnQi CMS template engine, specifically designed to retrieve and display all detailed content and properties of a single document (i.e., the "document" in the content management backend).It can help us present the title, content, images, custom parameters, and even related categories, tags, and information all together on the document detail page to the visitors.

In most cases, when we visit the detail page of a document,archiveDetailThe tag automatically identifies the document on the current page and retrieves all relevant data. This means you do not need to manually specify the document ID, and the tag can work intelligently.

How to specify the document to be retrieved:id/tokenandsiteIdParameter

AlthougharchiveDetailBy default, it will retrieve the document information on the current page, but in some scenarios, we may need to retrieve specific document data, such as displaying a full detail of a 'recommended article' on the homepage, or displaying a full detail of another related product in the sidebar of a product page. In this case, it can be done byidortokenParameters to explicitly specify the target document:

• id: Specify directly through the numeric ID of the document. For example,{% archiveDetail with name="Title" id="1" %}The title of the document with ID 1 will be obtained.
• tokenIf the document is set to URL alias (usually used for pseudo-static URLs), you can usetokenthe parameter to specify. For example,{% archiveDetail with name="Content" token="about-us" %}May be used to retrieve the document content with the alias 'about-us'.

Moreover, for users who use the AnQi CMS multi-site management function, if they need to call data from other sites, they can usesiteIdParameters are used to specify the target site. However, in most single-site applications, this parameter is usually not manually filled in.

Explore the rich properties of the document: throughnameParameter acquisition

archiveDetailThe most commonly used feature of the tag is tonameParameters to obtain the specific attributes of the document. These attributes cover all aspects of the document, from basic text content to multimedia resources, to timestamps and custom fields.

You can directly use{% archiveDetail with name="属性名" %}to directly output the value of a property, or through{% archiveDetail 变量名 with name="属性名" %}{{ 变量名 }}to assign the property value to a variable and then perform subsequent operations.

Let's take a look at some commonly used properties and their applications:

1. Basic information: Title, description, content

• Title: The title of the document. This is one of the most basic and most important pieces of information.
• Description: A document's introduction or description. Commonly used in the summary part of the detail page.
• Content: The main content of the document. It is the core of the detail page. It is worth noting that,ContentThe attribute supports two additional parameters:
  • lazy="data-src"If your template has enabled lazy loading of images, you can use this parameter to<img>label'ssrcattribute is replaced withdata-srcor any specified property.
  • render=true|falseWhen you are using the Markdown editor in the background,ContentThe default behavior is to automatically convert Markdown format to HTML. If you need to manually control this conversion process, you can userender=falseprevent automatic conversion, orrender=trueforce conversion.

2. Image Resources: Logo, thumbnail, multi-image display

Documents usually contain images for display, preview, or as covers:

• Logo: The cover image of the document.
• Thumb: The cover thumbnail of the document.
• Images: If the document is associated with multiple images (such as the carousel on the product details page),Imagesit will return an array of image URLs, you can access them throughforLoop to traverse and display all images.

3. Time information: Release and update time

• CreatedTime: Document release timestamp.
• UpdatedTime: Document update timestamp.

These timestamps are usually needed throughstampToDateLabel formatting is required to display the date in a human-readable format, for example:{{ stampToDate(archive.CreatedTime, "2006-01-02 15:04") }}.

4. Associated Information: Category and tags

A document often does not exist in isolation, it belongs to a certain category, and may be marked with multiple tags:

• Category: Retrieve complete information about the document's category, including category ID, title, link, description, etc.This allows you to easily display the category name and provide a link on the document detail page.
• Tag: List of tags associated with the document. Usually it needs to be combinedtagListtags to traverse and display.

5. Custom field: Flexible extension content

The strength of AnQi CMS lies in its flexible content model. If you define additional custom fields for a content model (such as "author", "source", "product parameters", etc.), these fields can also be accessed througharchiveDetailLabel retrieval.

• Direct pass.nameAccess: If the custom field name isauthor, you can use it directly.{% archiveDetail with name="author" %}Get its value.

• ByarchiveParamsLabel loop: For custom parameters with an uncertain number or those that need to be traversed and displayed, you can usearchiveParamsLabel. It can return an array containing all the custom field names and values, making it convenient for you to display them uniformly, for example:

  {% archiveParams params %}
  {% for item in params %}
      <div>{{ item.Name }}：{{ item.Value }}</div>
  {% endfor %}
  {% endarchiveParams %}
  

Example of practical application scenarios

archiveDetailThe flexibility of the tag allows it to adapt to various complex page display needs.

1. Build a standard article detail page

In a typical article detail page, you would want to display the article title, publication time, category, views, tags, and article content.

<article>
    <h1>{% archiveDetail with name="Title" %}</h1>
    <div class="meta-info">
        <span>分类：<a href="{% categoryDetail with name='Link' %}">{% categoryDetail with name='Title' %}</a></span>
        <span>发布日期：{% archiveDetail with name="CreatedTime" format="2006-01-02" %}</span>
        <span>浏览量：{% archiveDetail with name="Views" %}</span>
        <div class="tags">
            标签：{% tagList tags %}{% for tag in tags %}<a href="{{ tag.Link }}">{{ tag.Title }}</a> {% endfor %}{% endtagList %}
        </div>
    </div>
    <div class="content">
        {%- archiveDetail articleContent with name="Content" render=true lazy="data-src" %}
        {{ articleContent|safe }} {# 注意：使用 |safe 过滤器确保HTML内容正确渲染 #}
    </div>
</article>

2. Display product details.

For a product detail page, in addition to the product name and description, it may also be necessary to display multiple product images, prices, and customized product parameters.

<section class="product-detail">
    <div class="product-gallery">
        {% archiveDetail productImages with name="Images" %}
        {% for img in productImages %}
            <img src="{{ img }}" alt="{% archiveDetail with name='Title' %}" />
        {% endfor %}
        {% endarchiveDetail %}
    </div>
    <div class="product-info">
        <h1>{% archiveDetail with name="Title" %}</h1>
        <p class="price">价格：{% archiveDetail with name="Price" %}</p>
        <p class="description">{% archiveDetail with name="Description" %}</p>
        <div class="parameters">
            {% archiveParams params %}
            {% for param in params %}
                <div>{{ param.Name }}：{{ param.Value }}</div>
            {% endfor %}
            {% endarchiveParams %}
        </div>
    </div>
    <div class="full-description">
        <h2>产品详情</h2>
        {%- archiveDetail productContent with name="Content" render=true %}
        {{ productContent|safe }}
    </div>
</section>

UsearchiveDetailPractical Tips

• Make good use of|safeFilter：WhenarchiveDetailThe content obtained may contain HTML tags (such asContentorDescription), you must use|safea filter to avoid escaping, ensuring that the HTML structure is rendered correctly.
• Combine with other tags:archiveDetailFrequently work with other tags. For example, useprevArchiveandnextArchivetags to create previous/next navigation, or combinearchiveListto display related documents.
• Variable namingTo improve the readability of the template, it is recommended toarchiveDetailAssign meaningful variable names to the values obtained, such as{% archiveDetail articleTitle with name="Title" %}.

MasteredarchiveDetailThe use of tags, and you can build rich, dynamic and changeable detail pages more freely in Anqi CMS, providing users with a better browsing experience.

Frequently Asked Questions (FAQ)

Q1: Why am I gettingarchiveDetailinContentcontent is not displayed correctly as HTML, but instead shows the original Markdown text or contains<p>Tag?A1: If you are using a Markdown editor, make sure that youarchiveDetailthe tag withrender=trueparameters, for example{% archiveDetail articleContent with name="Content" render=true %}{{ articleContent|safe }}. And be sure to add the variable to the output content.|safeFilter to prevent HTML tags from being escaped.

Q2: I want to display the publication time of the document but output it directly.CreatedTimeHow to format a string of numbers into a date format?A2:CreatedTimeandUpdatedTimeThe return is a timestamp. You need to usestampToDateLabel to format it. For example, to display as “2006-01-02”, you can use{{ stampToDate(archive.CreatedTime, "2006-01-02") }}. Anqi CMS supports Go language time formatting rules and can adjust the format string as needed.

Q3: How to get the image and description of the category owned by the document details page?A3:archiveDetaillabel'sname="Category"The parameter can directly obtain the complete object of the document category. Then you can further obtain its properties through the category object. For example:

{% archiveDetail docCategory with name="Category" %}
    <img src="{{ docCategory.Logo }}" alt="{{ docCategory.Title }}" />
    <p>{{ docCategory.Description }}</p>
{% endarchiveDetail %}

Or, you can also combinecategoryDetailtags, througharchiveDetailObtainedCategoryIdPlease specify:

{% categoryDetail catLogo with name="Logo" id=archive.CategoryId %}
<img src="{{ catLogo }}" />