How to use the `archiveDetail` tag to display images, views, and publication time on the document detail page?

In website operation, the document detail page is the core area that attracts users and conveys information.A content-rich and intuitive detail page that not only significantly improves user experience but also has a positive impact on search engine optimization (SEO).archiveDetailLabels, allowing us to easily retrieve and display various information of documents, such as images, views, and publication time, etc.

Next, we will explore how to cleverly usearchiveDetailtags to vividly present these key information.

Displaying document images: making the content more attractive

The image is an indispensable part of the document content, it can directly convey information, and enhance the aesthetic beauty of the page. AnQiCMS'sarchiveDetailtags provide us with various ways to call images:

• Document cover first image (Logo) and thumbnail (Thumb):These fields are usually used to display the main visual elements of a document, such as the cover image of an article or the main image of a product. They return a single image link.

  <div class="doc-cover-image">
      <img src="{% archiveDetail with name='Logo' %}" alt="{% archiveDetail with name='Title' %} 的封面图" />
  </div>
  {# 如果需要显示缩略图，可以这样调用 #}
  <div class="doc-thumbnail">
      <img src="{% archiveDetail with name='Thumb' %}" alt="{% archiveDetail with name='Title' %} 的缩略图" />
  </div>
  

  InaltProperty title filled in, this is a good SEO practice.

• Document Group Images (Images):For scenarios that require displaying multiple images, such as product albums on product detail pages,Imagesthe field will return an array of image links. At this point, we need to combineforLoop the label to iterate and display all images.

  {% archiveDetail docImages with name="Images" %}
  {% if docImages %}
  <div class="product-gallery">
      {% for imageUrl in docImages %}
      <img src="{{ imageUrl }}" alt="产品细节图" loading="lazy" />
      {% endfor %}
  </div>
  {% endif %}
  

  Here we added aif docImagescondition to ensure that the gallery area is rendered only when images exist, avoiding issues with displaying empty content.loading="lazy"Properties help optimize page loading speed.

Traffic statistics: Insight into content popularity

Understanding the document views is crucial for content operators, as it helps us judge the popularity of the content and serves as a basis for subsequent optimization strategies. ThrougharchiveDetailLabels, displaying the document's page views becomes very simple:

<span class="doc-views">阅读量：{% archiveDetail with name='Views' %} 次</span>

Place this code below the document title or in the information abstract area, and users can intuitively see the popularity of this document.

发布时间：Immediate delivery and update of content

The publishing or updating time of the document, which can convey the immediacy and validity of the content to the readers, especially for content with strong timeliness, is the case. AnQiCMS'sarchiveDetailTags provideCreatedTime(Creation time) andUpdatedTimeThe (update time) field. These two fields output timestamps, and we need to use tags to format them into the date and time format we want.stampToDateTags to format them into the date and time format we want.

stampToDateThe second parameter of the label is a date format string, which follows the date formatting rules of the Go language, for example:"2006-01-02 15:04:05".

• Display the document publication date:

  <span class="doc-publish-date">发布时间：{{ stampToDate(archive.CreatedTime, "2006年01月02日") }}</span>
  

• Display the document publication date and time:

  <span class="doc-publish-datetime">发布于：{{ stampToDate(archive.CreatedTime, "2006-01-02 15:04:05") }}</span>
  

• Display the document last updated time:

  <span class="doc-update-time">最后更新：{{ stampToDate(archive.UpdatedTime, "2006/01/02 15:04") }}</span>
  

  Here we assumearchiveThe variable is available in the current detail page context, usually it is so in the document detail page.

综合应用：构建一个完整的文档详情页头部

Combine the above elements, and we can build a document detail page header that is both aesthetic and informative. Here is a sample code snippet that demonstrates how to integrate images, view counts, and publication time, while also supplementing the document title and category to provide a more comprehensive context:

<article class="doc-detail-wrapper">
    <h1 class="doc-title">{% archiveDetail with name='Title' %}</h1>

    <div class="doc-meta-info">
        <span class="doc-category">分类：
            <a href="{% categoryDetail with name='Link' %}">{% categoryDetail with name='Title' %}</a>
        </span>
        <span class="doc-publish-date">发布时间：{{ stampToDate(archive.CreatedTime, "2006年01月02日 15:04") }}</span>
        <span class="doc-views">阅读量：{% archiveDetail with name='Views' %} 次</span>
    </div>

    {% archiveDetail mainImage with name='Logo' %}
    {% if mainImage %}
    <div class="doc-featured-image">
        <img src="{{ mainImage }}" alt="{% archiveDetail with name='Title' %} 的配图" loading="lazy" />
    </div>
    {% endif %}

    <div class="doc-content">
        {# 这里会输出文档的正文内容，记得加上 |safe 过滤器以解析HTML #}
        {% archiveDetail fullContent with name='Content' %}
        {{ fullContent|safe }}
    </div>
</article>

By these flexible tag combinations, we can easily create document detail pages that meet various design and functional requirements.The template tag design of AnQiCMS fully considers the actual needs of content operation, making technical implementation intuitive and efficient.

---

Common Questions and Answers (FAQ)

1. 问：Why is the image, view count, and publish time still not displaying after I operate according to the example code? Answer:Firstly, please confirm whether you have uploaded an image when publishing documents in the "Content Management" backend,