文档详情页中如何使用`archiveDetail`标签显示图片、浏览量和发布时间？

在网站运营中，文档详情页是吸引用户、传递信息的核心区域。一个内容丰富、信息直观的详情页，不仅能显著提升用户体验，对搜索引擎优化（SEO）也有着积极的推动作用。AnQiCMS 提供了功能强大的 archiveDetail 标签，让我们能够非常方便地获取并展示文档的各项信息，例如图片、浏览量和发布时间等。

接下来，我们将一起探索如何在文档详情页中巧妙运用 archiveDetail 标签，让这些关键信息生动呈现。

展示文档图片：让内容更具吸引力

图片是文档内容不可或缺的一部分，它能直观地传达信息，提升页面美感。AnQiCMS 的 archiveDetail 标签为我们提供了多种图片调用方式：

  • 文档封面首图（Logo）和缩略图（Thumb）： 这两个字段通常用于展示文档的主要视觉元素，例如文章的封面图或产品的主图。它们返回的是单个图片链接。

    <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>

    在 alt 属性中填入文档标题，这是一个很好的 SEO 实践。

  • 文档组图（Images）： 对于需要展示多张图片的场景，例如产品详情页的产品图集，Images 字段会返回一个图片链接数组。这时候，我们需要结合 for 循环标签来遍历并显示所有图片。

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

    这里我们添加了一个 if docImages 判断，确保只有当存在图片时才渲染图库区域，避免空内容的显示问题。loading="lazy" 属性则有助于优化页面加载速度。

浏览量统计：洞察内容热门程度

了解文档的浏览量对于内容运营者来说至关重要，它能帮助我们判断内容的受欢迎程度，并作为后续优化策略的依据。通过 archiveDetail 标签，显示文档的浏览量变得非常简单：

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

将这段代码放置在文档标题下方或信息摘要区域，用户就能直观地看到这篇文档的访问热度了。

发布时间：传递内容的即时性与更新度

文档的发布时间或更新时间，能够向读者传递内容的即时性和有效性，尤其对于时效性较强的内容更是如此。AnQiCMS 的 archiveDetail 标签提供了 CreatedTime（创建时间）和 UpdatedTime（更新时间）字段。这两个字段输出的是时间戳，我们需要借助 stampToDate 标签来将其格式化为我们希望的日期时间格式。

stampToDate 标签的第二个参数是日期格式字符串，它遵循 Go 语言的日期格式化规则，例如："2006-01-02 15:04:05"。

  • 显示文档发布日期：

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

  • 显示文档发布日期和具体时间：

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

  • 显示文档最近更新时间：

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

    这里我们假设 archive 变量已经在当前详情页的上下文环境中可用，通常在文档详情页中都是如此。

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

将上述元素结合起来，我们可以构建一个既美观又信息丰富的文档详情页头部。以下是一个示例代码片段，它展示了如何整合图片、浏览量和发布时间，同时补充了文档标题和分类，以便提供更全面的上下文：

<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>

通过这些灵活的标签组合，我们可以轻松打造出符合各种设计和功能需求的文档详情页。AnQiCMS 的模板标签设计充分考虑了内容运营的实际需求，让技术实现变得直观而高效。

常见问题解答 (FAQ)

  1. 问：为什么我按照示例代码操作后，图片、浏览量和发布时间还是没有显示出来？ 答： 首先，请确认您在后台“内容管理”中发布文档时，是否已经上传了图片、