`archiveDetail`标签如何获取并显示文档详情页的特定字段(如标题、内容、图片)?

在安企CMS搭建的网站中,每一个文档详情页都是展示核心内容、吸引访客停留的关键。为了确保这些页面能高效、灵活地呈现文章标题、内容、图片等重要信息,理解并善用archiveDetail标签就显得尤为重要。它正是您精确定位并灵活展示这些核心数据的强大工具。

驾驭archiveDetail标签:精确定位与展示文档详情内容

当您在AnQiCMS中创建了一个文章或产品详情页时,archiveDetail标签是您从数据库中提取当前页面或指定文档详细信息的关键。这个标签的设计理念是简洁而强大,让您能够轻松地将后端数据呈现在前端模板上。

archiveDetail的基本用法

在大多数情况下,当您正在编辑一个文档详情页(例如,article/detail.htmlproduct/detail.html)时,archiveDetail标签会自动识别并获取当前页面所对应的文档数据。它最常见的用法是直接通过name属性指定您想要获取的文档字段。

例如,要显示当前文档的标题,您可以使用以下语法:

<div>文档标题:{% archiveDetail with name="Title" %}</div>

此外,在文档详情页的模板中,您通常也可以更直接地通过{{archive.字段名称}}这样的形式来访问当前文档的各项属性,例如{{archive.Title}}。这种方式更加简洁,适用于直接获取当前页面的文档信息。

如果您需要在非文档详情页(比如首页的某个区块)或者需要指定显示某篇特定文档的详情,archiveDetail标签也提供了idtoken参数,让您能够根据文档的ID或URL别名来精确获取其数据:

{# 获取ID为1的文档标题 #}
<div>指定文档标题:{% archiveDetail with name="Title" id="1" %}</div>
{# 获取URL别名为"about-us"的文档内容 #}
<div>指定文档内容:{% archiveDetail with name="Content" token="about-us" %}</div>

获取并显示核心信息

接下来,我们来看看如何使用archiveDetail标签获取并显示文档详情页的常见字段:

1. 文档标题 (Title)

获取文档标题非常直接,它通常是页面上最显著的元素之一:

<h1>{% archiveDetail with name="Title" %}</h1>
{# 或者更简洁地 #}
<h1>{{archive.Title}}</h1>

2. 文档内容 (Content)

文档内容通常是页面上篇幅最长的部分,承载着信息主体。由于文档内容可能包含HTML标签(如段落、链接、图片等),为了确保这些HTML内容能够正确渲染而非被浏览器作为纯文本显示,您需要使用|safe过滤器。

<div>
    {%- archiveDetail articleContent with name="Content" %}
    {{articleContent|safe}}
</div>
{# 或者更简洁地 #}
<div>{{archive.Content|safe}}</div>

如果您的后台启用了Markdown编辑器,并且希望前端内容自动渲染为HTML,可以在archiveDetail标签中添加render=true参数:

{# 启用Markdown渲染 #}
<div>
    {%- archiveDetail articleContent with name="Content" render=true %}
    {{articleContent|safe}}
</div>

此外,如果您希望文档内容中的图片支持懒加载,可以结合前端懒加载库的需求,在archiveDetail标签中指定lazy="data-src"(根据您的懒加载库实际data-src属性名调整):

{# 启用图片懒加载,将图片src属性替换为data-src #}
<div>
    {%- archiveDetail articleContent with name="Content" lazy="data-src" %}
    {{articleContent|safe}}
</div>

3. 文档图片 (Logo, Thumb, Images)

安企CMS提供了多种图片字段来满足不同展示需求:

  • Logo:通常用于获取文档的主封面图或大图。
    
    <img src="{% archiveDetail with name="Logo" %}" alt="{% archiveDetail with name="Title" %}" />
    
  • Thumb:用于获取文档的缩略图,通常是经过系统裁剪或压缩的小尺寸图片。
    
    <img src="{% archiveDetail with name="Thumb" %}" alt="{% archiveDetail with name="Title" %}" />
    
  • Images:如果文档包含一组图片(例如产品详情页的轮播图),Images会返回一个图片URL数组。您需要使用for循环来遍历并显示这些图片:
    
    <div>
        {% archiveDetail archiveImages with name="Images" %}
        {% for item in archiveImages %}
            <img src="{{item}}" alt="文档图片" />
        {% endfor %}
    </div>
    

4. 其他常用字段

除了标题、内容和图片,archiveDetail标签还能获取许多其他有用的文档信息:

  • 文档描述 (Description):通常是文章的简介或摘要。
    
    <meta name="description" content="{% archiveDetail with name="Description" %}">
    
  • 文档链接 (Link):当前文档的URL地址。
    
    <a href="{% archiveDetail with name="Link" %}">查看详情</a>
    
  • 浏览量 (Views):显示文档的阅读或访问次数。
    
    <span>浏览量:{% archiveDetail with name="Views" %}</span>
    
  • 发布时间 (CreatedTime)更新时间 (UpdatedTime):这些是时间戳,需要配合stampToDate标签进行格式化显示。
    
    <span>发布日期:{{ stampToDate(archive.CreatedTime, "2006年01月02日") }}</span>
    <span>更新时间:{{ stampToDate(archive.UpdatedTime, "2006-01-02 15:04:05") }}</span>
    
  • 文档分类 (Category):获取当前文档所属分类的详细信息,这在展示面包屑导航或相关分类时非常有用。
    
    {% archiveDetail currentCategory with name="Category" %}
    <a href="{{ currentCategory.Link }}">{{ currentCategory.Title }}</a>
    {% endarchiveDetail %}
    
  • 自定义字段:AnQiCMS允许您为内容模型添加自定义字段。如果您的文档模型定义了如authorsource等自定义字段,您可以直接通过name属性来获取它们:
    
    <span>作者:{% archiveDetail with name="author" %}</span>
    
    如果您想遍历所有自定义字段,可以使用archiveParams标签:
    
    {% archiveParams params %}
    <div>
        {% for item in params %}
            <span>{{item.Name}}:</span>
            <span>{{item.Value}}</span>
        {% endfor %}
    </div>
    {% endarchiveParams %}
    

实际应用场景示例

让我们看一个典型的文章详情页的结构,如何通过archiveDetail及相关标签来构建:

”`twig {% extends ‘base.html’ %} {# 继承基础模板 #}

{% block content %}

{# 获取并显示文档标题 #}
<h1>{% archiveDetail with name="Title" %}</h1>

<div class="meta-info">
    {# 显示文档分类 #}
    {% archiveDetail currentCategory with name="Category" %}
    <span>分类:<a href="{{ currentCategory.Link }}">{{ currentCategory.Title }}</a></span>
    {% endarchiveDetail %}

    {# 显示发布时间 #}
    <span>发布日期:{{ stampToDate(archive.CreatedTime, "2006