AnQiCMS 模板如何获取并显示某个单页面的详细内容和Banner图？

在安企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>