在安企CMS搭建的网站中,每一个文档详情页都是展示核心内容、吸引访客停留的关键。为了确保这些页面能高效、灵活地呈现文章标题、内容、图片等重要信息,理解并善用archiveDetail标签就显得尤为重要。它正是您精确定位并灵活展示这些核心数据的强大工具。
驾驭archiveDetail标签:精确定位与展示文档详情内容
当您在AnQiCMS中创建了一个文章或产品详情页时,archiveDetail标签是您从数据库中提取当前页面或指定文档详细信息的关键。这个标签的设计理念是简洁而强大,让您能够轻松地将后端数据呈现在前端模板上。
archiveDetail的基本用法
在大多数情况下,当您正在编辑一个文档详情页(例如,article/detail.html或product/detail.html)时,archiveDetail标签会自动识别并获取当前页面所对应的文档数据。它最常见的用法是直接通过name属性指定您想要获取的文档字段。
例如,要显示当前文档的标题,您可以使用以下语法:
<div>文档标题:{% archiveDetail with name="Title" %}</div>
此外,在文档详情页的模板中,您通常也可以更直接地通过{{archive.字段名称}}这样的形式来访问当前文档的各项属性,例如{{archive.Title}}。这种方式更加简洁,适用于直接获取当前页面的文档信息。
如果您需要在非文档详情页(比如首页的某个区块)或者需要指定显示某篇特定文档的详情,archiveDetail标签也提供了id或token参数,让您能够根据文档的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允许您为内容模型添加自定义字段。如果您的文档模型定义了如
author、source等自定义字段,您可以直接通过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