How to use the `archiveDetail` tag to display images, view counts, and publishing time on the document detail page?

In website operation, the document detail page is the core area to attract users and convey information.A content-rich, intuitive detail page that can significantly enhance user experience and also has a positive impact on search engine optimization (SEO).AnQiCMS provides powerfularchiveDetailLabels, allowing us to easily obtain and display various information of the document, such as images, views, and publication time, etc.

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

Displaying document images: making the content more attractive

Images are an indispensable part of the document content, they can directly convey information and enhance the beauty of the page. AnQiCMS ofarchiveDetailtags provide us with various ways to call pictures:

• Document cover main 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>
  

  InaltEnter the document title in the attribute, it 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 link. At this point, we need to combineforLoop tags 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 one.if docImagesThe judgment ensures that the gallery area is rendered only when images exist, to avoid displaying empty content issues.loading="lazy"Properties can help optimize page loading speed.

Traffic statistics: Insight into the popularity of content.

Understanding the document's page 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. ThrougharchiveDetailThe tag, which shows 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 summary area, and users can intuitively see the access热度 of this document.

Publishing time: the timeliness and update of the content being conveyed

The document's publication time or update time, which can convey the immediacy and validity of the content to the reader, especially for content with strong timeliness.archiveDetailTags providedCreatedTime(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 tag is a date format string that follows the Go language's date formatting rules, 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's most recent update time:

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

  Here we assumearchiveThe variable is already available in the context of the current detail page, usually it is like this in the document detail page.

An application of integration: Build a complete document detail page header

Combining these elements, we can build a visually appealing and informative document detail page header. Below is a code snippet that demonstrates how to integrate images, views, and publishing time, while also supplementing the document title and category for 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 combining these flexible tags, 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.

Frequently Asked Questions (FAQ)

1. Ask: Why are the images, view counts, and publication time still not displayed after I follow the example code? Answer:First, please confirm that you have uploaded images when publishing documents in the background "Content Management".