How to display AnQiCMS articles with the `archiveDetail` tag?

When building a rich website in AnQiCMS,archiveDetailThe tag is undoubtedly the core tool for displaying the article detail page. It can flexibly obtain and present all the detailed information of the article or product, helping website operators easily create a detail page that conforms to the brand image and user experience.

archiveDetailThe core role of tags

when visiting a specific article or product page,archiveDetailThe tag comes in handy. It allows you to retrieve all data fields of the current page article, whether it is the title, content, images, or other custom information.It is more convenient that in the article detail page, the system usually automatically provides a name calledarchiveglobal object, allowing you to access{{archive.字段名称}}A concise way to directly access article data without explicitly usingarchiveDetailtags to obtain, greatly simplifying the template code.

Of course, if you need to get the details of a specified article on a non-detail page (such as the homepage or list page), or if you need to get the details of other articles on the detail page,archiveDetailTags can still provide strong support. At this point, you can useid(article ID) ortoken(the URL alias of the article) parameter to specify the article to be retrieved accurately. For example,{% archiveDetail 变量名 with name="Title" id="1" %}You can retrieve the title of the article with ID 1.

Flexibly retrieve all the details of the article.

archiveDetailThe content that can be obtained through tags is very comprehensive, covering all aspects of the article:

1. Basic Metadata:

   • Title: Article Title.
   • Link: Article Access Link.
   • Description: Article Summary or Description.
   • Keywords: Article Keywords.
   • SeoTitle: Title optimized for search engines.
   • CanonicalUrl: Standard link for SEO, to avoid duplicate content issues.
   • Views: Page views of the article.
   • CommentCount: Number of comments.

2. Core content and structure:

   • Content: The main content of the article. It is worth mentioning that AnQiCMS supports Markdown editors,ContentThe field can automatically render Markdown syntax into HTML. You can alsolazy="data-src"The parameter enables lazy loading of images in the content, optimizes page loading speed, and allowsrender=true|falsemanual control over whether Markdown is rendered.
   • ContentTitlesAn array that includes information about the titles of various levels in the article content, convenient for generating the table of contents or navigation.

3. Image resources:

   • LogoThe cover image (large image) of the article.
   • ThumbThe thumbnail of the article.
   • ImagesAn array of image URLs, used to display the group photos or multi-images of an article. Since it is an array, you need to traverse and display it through a loop.

4. Time information:

   • CreatedTimeThe creation time of the article (Unix timestamp).
   • UpdatedTimeThe update time of the article (Unix timestamp).
   • These two fields need to be coordinated.{{stampToDate(时间戳, "格式")}}tags to format the output, for example{{stampToDate(archive.CreatedTime, "2006年01月02日 15:04")}}The format will be displayed as "2023 August 20 14:30".

5. Relevant data:

   • Category: The category object of the article, which can be used to directly obtain the category ID, title, and link information. For example{{archive.Category.Title}}. You can also usecategoryDetailtags to obtain more complete category information.
   • Tags: Tags associated with the article. Usually need to be combinedtagListto cyclically display these tags.

6. Custom field:

   • In the AnQiCMS backend's "Content Model", you can add custom fields for different content models (such as article models, product models). These custom fields can also bearchiveDetailLabel directly access by name, for example{% archiveDetail with name="author" %}. If you want to display all custom fields, you can usearchiveParamslabels for iteration.

Actual application example: build detail page

After understanding these fields, we can easily build the detail page of an article or product.

Example 1: Classic article detail page

On a standard article detail page, you may want to display the article title, category, publish time, associated tags, views, and article content. Below is a concise template code snippet showing how to display these contents:

<article class="article-detail">
    <h1 class="article-title">{% archiveDetail with name="Title" %}</h1> {# 或直接 {{archive.Title}} #}
    <div class="article-meta">
        <span class="category">分类：<a href="{% categoryDetail with name='Link' id=archive.CategoryId %}">{% categoryDetail with name='Title' id=archive.CategoryId %}</a></span>
        <span class="date">发布于：{{stampToDate(archive.CreatedTime, "2006年01月02日")}}</span>
        <span class="tags">标签：
            {% tagList tags with itemId=archive.Id limit="5" %}
                {% for item in tags %}
                    <a href="{{item.Link}}">{{item.Title}}</a>
                {% endfor %}
            {% endtagList %}
        </span>
        <span class="views">阅读量：{% archiveDetail with name="Views" %}</span>
    </div>
    <div class="article-content">
        {% archiveDetail articleContent with name="Content" lazy="data-src" render=true %}
        {{articleContent|safe}} {# |safe 用于避免HTML转义 #}
    </div>
</article>

This code first retrieves the article title. Then, it usescategoryDetailtags to get the link and name of the category. The publish time isstampToDateformatted. Tags are used totagListLabel retrieval and cyclic display. Article contentContentEnabled image lazy loading and rendering Markdown, and using|safeThe filter ensures that HTML content is parsed normally.

Example two: Product detail page, displaying custom parameters

For the product detail page, in addition to the basic information, it may also be necessary to display some unique product parameters (these are usually added as custom fields in the background "content model").

`twig

<div class="product-image">
    <img src="{% archiveDetail with name='Logo' %}" alt="{% archiveDetail with name='Title' %}" />
    {# 如果有组图，可以循环展示 #}
    {% archiveDetail productImages with name="Images" %}
    {% for img in productImages %}
        <img src="{{img}}" alt="{{archive.Title}} - 图{{loop.Counter}}" />
    {% endfor %}
    {% endarchiveDetail %}
</div>
<div class="product-info">