在安企CMS中，要获取并显示特定单页面的详细内容及其关联的Banner图，主要涉及理解单页面的管理方式和掌握模板标签的灵活运用。AnQiCMS 提供了直观的后台管理界面和强大的模板引擎，让这项工作变得简单高效。
深入了解安企CMS中的单页面
安企CMS的“单页面”功能专为那些结构固定、内容相对独立、无需频繁更新的页面设计，例如“关于我们”、“联系方式”、“服务介绍”等。在后台，您可以通过“页面资源”下的“页面管理”来创建和编辑这些单页面。每个单页面都可以配置其专属的标题、自定义URL、内容、缩略图，以及重要的——Banner图。
值得注意的是，AnQiCMS还允许您为单个页面指定独特的模板文件。默认情况下，单页面的内容会使用 page/detail.html 模板进行渲染。但如果您需要某个特定单页面（例如ID为5的“关于我们”页面）拥有完全不同的布局，您可以创建 page/detail-5.html，甚至在后台的“单页面模板”字段中指定一个自定义名称，比如 about_us.html，然后将该文件放在 template/您的模板目录/page/ 路径下。这种灵活性使得每个单页面都能拥有高度定制化的展示效果。
获取单页面的详细内容
在模板中，获取单页面内容的“核心工具”是 pageDetail 标签。这个标签能够帮助您拉取指定单页面的各种信息。
要获取当前正在访问的单页面的内容，您无需指定任何ID或别名，pageDetail 标签会自动识别：
{# 假设您正在访问ID为1的“关于我们”页面 #}
{# 获取单页面标题 #}
<h1>{% pageDetail with name="Title" %}</h1>
{# 获取单页面描述 #}
<p>{% pageDetail with name="Description" %}</p>
{# 获取单页面内容，需要注意安全输出 #}
<div class="page-content">
{% pageDetail pageContent with name="Content" %}
{{ pageContent|safe }}
</div>
关键点说明：
with name="字段名称": 这是指定您想要获取哪个具体字段内容的参数。例如，"Title"获取标题，"Description"获取描述，"Content"获取主要内容。pageContent with name="Content": 这里我们将获取到的单页面内容赋值给了一个名为pageContent的变量。这样做的好处是，您可以在{% pageDetail ... %}标签体外，多次或以更灵活的方式使用这个变量。{{ pageContent|safe }}: 这一点非常重要！单页面的“内容”字段通常包含由富文本编辑器生成的HTML代码。为了让浏览器正确解析并显示这些HTML，而不是将其作为纯文本输出，您必须使用|safe过滤器。如果忘记使用，页面上的HTML标签将直接显示出来，导致样式混乱。
如果您需要获取非当前页面的某个特定单页面内容，可以通过指定其ID或自定义URL别名（token）来实现：
{# 获取ID为2的单页面的标题 #}
<h2>{% pageDetail with name="Title" id="2" %}</h2>
{# 获取自定义URL别名为“contact-us”的单页面内容 #}
<div class="contact-info">
{% pageDetail contactPageContent with name="Content" token="contact-us" %}
{{ contactPageContent|safe }}
</div>
显示单页面的Banner图
安企CMS的单页面支持上传多张Banner图。这些图片同样可以通过 pageDetail 标签来获取，并通过循环展示。
pageDetail 标签中有一个名为 Images 的字段，它会返回一个包含所有上传Banner图URL的数组。
{# 假设您正在访问的单页面上传了多张Banner图 #}
<div class="page-banner-slider">
{% pageDetail pageBanners with name="Images" %}
{% if pageBanners %} {# 检查是否有Banner图上传 #}
{% for imageUrl in pageBanners %}
<div class="banner-item">
<img src="{{ imageUrl }}" alt="单页面Banner" />
</div>
{% endfor %}
{% else %}
{# 如果没有上传Banner图，可以显示一个默认图片或者不显示 #}
<img src="/static/images/default_banner.jpg" alt="默认Banner" />
{% endif %}
</div>
获取第一张Banner图的技巧：
在某些设计中，您可能只需要显示单页面上传的第一张Banner图。在这种情况下，您可以直接访问数组的第一个元素：
<div class="page-header-banner" style="background-image: url('{% pageDetail firstBanner with name="Images" %}{% if firstBanner %}{{ firstBanner[0] }}{% endif %}');">
{# 这里可以放置标题等内容 #}
<h1>{% pageDetail with name="Title" %}</h1>
</div>
在这个例子中，我们首先尝试获取 Images 字段，并将其赋值给 firstBanner 变量。然后，通过 {% if firstBanner %}{{ firstBanner[0] }}{% endif %} 的判断，确保只有在 firstBanner 数组存在且不为空时，才输出其第一个元素的URL。
结合实例：构建一个完整的单页面展示模板
假设我们有一个“关于我们”的单页面，ID为5，内容是HTML格式，并且上传了多张Banner图。以下是一个简化的模板片段，展示如何组合使用这些标签：
”`twig {% extends ‘base.html’ %} {# 继承基础布局模板 #}
{% block title %}
<title>{% tdk with name="Title" siteName=true %}</title>
<meta name="keywords" content="{% tdk with name="Keywords" %}">
<meta name="description" content="{% tdk with name="Description" %}">
{% endblock %}
{% block content %}
<div class="container">
{# 面包屑导航，让用户了解当前位置 #}
{% breadcrumb crumbs %}
<ul class="breadcrumb">
{% for item in crumbs %}
<li><a href="{{ item.Link }}">{{ item.Name }}</a></li>
{% endfor %}
</ul>
{% endbreadcrumb %}
{# 单页面Banner区域 #}
<div class="page-banner-area">
{% pageDetail pageBanners with name="Images" id="5" %} {# 获取ID为5的单页面Banner图 #}
{% if pageBanners %}
<div class="owl-carousel owl-theme"> {# 假设您使用Owl Carousel来展示轮播图 #}
{% for imageUrl in pageBanners %}
<div class="item">
<img src="{{ imageUrl }}" alt="关于我们Banner" class="img-fluid"/>
</div>
{% endfor %}
</div>
{% else %}
<div class="default-banner">
<img src="/public/static/images/default_about_banner.jpg" alt="默认关于我们Banner" class="img-fluid"/>
</div>