`archiveDetail`标签如何显示AnQiCMS文章

在 AnQiCMS 中构建内容丰富的网页时，archiveDetail 标签无疑是文章详情页面展示的核心工具。它能够灵活地获取并呈现文章或产品的所有详细信息，帮助网站运营者轻松打造出符合品牌形象和用户体验的详情页面。

archiveDetail 标签的核心作用

当访问一个具体的文章或产品页面时，archiveDetail 标签就派上了用场。它允许您获取当前页面文章的所有数据字段，无论是标题、内容、图片还是其他自定义信息。更方便的是，在文章详情页中，系统通常会自动提供一个名为 archive 的全局对象，让您可以通过 {{archive.字段名称}} 的简洁方式直接访问文章数据，无需再显式使用 archiveDetail 标签进行获取，极大地简化了模板代码。

当然，如果您需要在非详情页（如首页或列表页）获取指定文章的详情，或者在详情页中需要获取其他文章的详情，archiveDetail 标签依然能提供强大的支持。此时，您可以通过 id（文章ID）或 token（文章的URL别名）参数来精确指定要获取的文章。例如，{% archiveDetail 变量名 with name="Title" id="1" %} 可以获取 ID 为 1 的文章标题。

灵活获取文章的各项详细信息

archiveDetail 标签可以获取的内容非常全面，涵盖了文章的方方面面：

  1. 基础元数据：

    • Title：文章的标题。
    • Link：文章的访问链接。
    • Description：文章的简介或描述。
    • Keywords：文章的关键词。
    • SeoTitle：为搜索引擎优化的标题。
    • CanonicalUrl：规范链接，用于SEO，避免内容重复问题。
    • Views：文章的浏览量。
    • CommentCount：评论数量。

  2. 核心内容与结构：

    • Content：文章的主体内容。值得一提的是，AnQiCMS 支持 Markdown 编辑器，Content 字段在显示时可以自动将 Markdown 语法渲染成 HTML。您还可以通过 lazy="data-src" 参数为内容中的图片启用懒加载，优化页面加载速度，并通过 render=true|false 参数手动控制 Markdown 是否渲染。
    • ContentTitles：一个数组，包含文章内容中各级标题的信息，方便生成文章目录或导航。

  3. 图片资源：

    • Logo：文章的封面首图（大图）。
    • Thumb：文章的缩略图。
    • Images：一个图片URL数组，用于展示文章的组图或多图。由于是数组，您需要通过循环来遍历显示。

  4. 时间信息：

    • CreatedTime：文章的创建时间（Unix 时间戳）。
    • UpdatedTime：文章的更新时间（Unix 时间戳）。
    • 这两个字段需要配合 {{stampToDate(时间戳, "格式")}} 标签进行格式化输出，例如 {{stampToDate(archive.CreatedTime, "2006年01月02日 15:04")}} 会显示为“2023年08月20日 14:30”的格式。

  5. 关联数据：

    • Category：文章所属的分类对象，可以直接获取分类的 ID、标题、链接等信息。例如 {{archive.Category.Title}}。您也可以使用 categoryDetail 标签来获取更完整的分类信息。
    • Tags：文章关联的标签。通常需要结合 tagList 标签来循环展示这些标签。

  6. 自定义字段：

    • 在 AnQiCMS 后台的“内容模型”中，您可以为不同的内容模型（如文章模型、产品模型）添加自定义字段。这些自定义字段也可以通过 archiveDetail 标签直接按名称获取，例如 {% archiveDetail with name="author" %}。如果您想展示所有自定义字段，可以使用 archiveParams 标签进行循环遍历。

实际应用示例：构建详情页面

理解了这些字段后，我们可以轻松构建出文章或产品的详情页面。

示例一：经典文章详情页

在一个标准的文章详情页面，您可能希望显示文章标题、所属分类、发布时间、关联标签、浏览量以及文章正文。以下是一个简洁的模板代码片段，展示了如何实现这些内容的展示：

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

这段代码首先获取了文章标题。接着，通过 categoryDetail 标签获取所属分类的链接和名称。发布时间使用 stampToDate 进行格式化。标签则利用 tagList 标签获取并循环展示。文章内容 Content 启用了图片懒加载并渲染 Markdown，并使用 |safe 过滤器确保 HTML 内容正常解析。

示例二：产品详情页，展示自定义参数

对于产品详情页，除了基本信息，可能还需要展示一些产品特有的参数（这些通常在后台“内容模型”中作为自定义字段添加）。

”`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">