如何获取并显示特定单页面的全部内容及关联图片？

在安企CMS中，单页面是网站内容构成的重要部分，比如“关于我们”、“联系方式”等。有效地获取并展示这些单页面的全部内容以及关联图片，对于网站的信息传达和视觉表现至关重要。安企CMS提供了直观的后台管理和灵活的模板标签，让这一过程变得非常便捷。

在后台轻松设置单页面内容和图片

首先，我们需要在安企CMS的后台管理系统中创建和编辑单页面内容。这通常在“页面资源”下的“页面管理”模块进行。当你添加或编辑一个单页面时，会看到一系列的字段来填充内容：

你可以输入“页面名称”，这会是页面的标题。接着，“单页面简介”可以用来提供页面的简要概述。最重要的内容体现在“单页面内容”区域，这里支持富文本编辑器，可以插入文字、链接、表格等，也可以直接嵌入图片。

针对关联图片，安企CMS提供了几种方式来管理： 首先是“缩略图”，你可以为单页面上传一张主要的缩略图，它通常用于列表展示或作为页面的主视觉图。此外，还有一个非常实用的“Banner图”选项，它允许你上传多张图片，这些图片通常用于页面顶部的轮播图或者作为页面的图片画廊展示。通过这些设置，你就可以在后台方便地组织单页面的文字和图片内容。

在前台模板中获取并展示单页面信息

完成了后台的内容设置后，接下来就是如何在网站的前端模板中将这些内容展示出来。安企CMS采用了简洁的模板标签系统，使得内容调用变得非常直观。

核心文本内容的调用

要获取单页面的详细内容，我们主要使用 pageDetail 模板标签。这个标签能够帮助我们获取特定单页面的各种信息。

假设你正在编辑一个名为 page/detail.html 的单页面详情模板，或者你为某个特定单页面指定了自定义模板。在模板中，你可以直接通过 {% pageDetail with name="Title" %} 来获取页面的标题，通过 {% pageDetail with name="Description" %} 获取页面简介。

对于单页面的主体内容，也就是你在后台“单页面内容”编辑器中填写的富文本，你可以使用 {% pageDetail pageContent with name="Content" %}{{pageContent|safe}} 来获取并展示。这里的 |safe 是一个非常关键的过滤器，它告诉模板引擎，这段内容是安全的HTML，不需要进行转义，从而确保你后台输入的HTML格式和样式能被浏览器正确解析和渲染。如果你的单页面内容是使用Markdown编辑器编写的，并且希望在前台渲染为HTML，可以在Content标签中添加render=true参数，例如{% pageDetail pageContent with name="Content" render=true %}{{pageContent|safe}}。

展示关联图片

图片作为单页面视觉呈现的重要组成部分，安企CMS也提供了清晰的调用方式。

如果你上传了单页面的“缩略图”，可以通过 {% pageDetail with name="Logo" %} 获取大尺寸的缩略图地址，或者通过 {% pageDetail with name="Thumb" %} 获取小尺寸的缩略图地址。然后将它们嵌入到 <img> 标签的 src 属性中即可： <img src="{% pageDetail with name="Logo" %}" alt="{% pageDetail with name="Title" %}" />

对于后台上传的“Banner图”（即多张关联图片），安企CMS会将它们作为一个图片数组提供。你需要使用 pageDetail 标签结合 for 循环来遍历并展示这些图片。通常我们会这样操作：

{% pageDetail pageImages with name="Images" %}
<ul>
    {% for item in pageImages %}
        <li>
            <img src="{{ item }}" alt="{% pageDetail with name='Title' %}" />
        </li>
    {% endfor %}
</ul>

这段代码会获取所有关联的Banner图片地址，并为每一张图片生成一个 <li> 标签，内嵌 <img> 标签，实现一个简单的图片列表展示。

指定要展示的单页面

大多数情况下，当用户访问一个单页面时，模板会自动识别当前页面的内容并显示。但如果你需要在其他页面或特定场景下，主动调用某个 非当前 单页面的内容，pageDetail 标签也提供了灵活性。你可以通过 id 或 token 参数来指定你想要获取的单页面：

• 通过ID指定： {% pageDetail aboutUsTitle with name="Title" id="10" %} 这里 id="10" 会获取ID为10的单页面标题。
• 通过URL别名（token）指定： {% pageDetail contactUsContent with name="Content" token="contact-us" %} 这里 token="contact-us" 会获取URL别名为“contact-us”的单页面内容。

这样，你就可以精确地控制在页面上显示哪个单页面的内容了。

完整示例：一个“关于我们”页面的展示

假设我们有一个“关于我们”的单页面，其ID为5，自定义URL别名为 about-us，后台设置了标题、简介、详细内容，一张主Logo图，以及多张Banner图。以下是一个如何在模板中全面展示这些内容的简化代码示例：

{# 页面头部引入公共模板，通常包含TDK、CSS等 #}
{% include "partial/header.html" %}

<main class="page-container">
    <article class="page-content-wrapper">
        <h1 class="page-title">{% pageDetail with name="Title" %}</h1>
        <p class="page-description">{% pageDetail with name="Description" %}</p>

        {# 展示主要内容，注意使用 |safe 过滤器 #}
        <section class="main-content">
            {% pageDetail pageMainContent with name="Content" %}
            {{ pageMainContent|safe }}
        </section>

        {# 如果有主Logo图片，可以这样展示 #}
        {% pageDetail pageLogo with name="Logo" %}
        {% if pageLogo %}
            <div class="page-logo">
                <img src="{{ pageLogo }}" alt="{% pageDetail with name='Title' %}" />
            </div>
        {% endif %}

        {# 展示多张Banner图，使用循环遍历 #}
        {% pageDetail pageImages with name="Images" %}
        {% if pageImages %}
            <div class="page-gallery">
                <h3>页面图集</h3>
                <div class="image-carousel">
                    {% for image_url in pageImages %}
                        <img src="{{ image_url }}" alt="{% pageDetail with name='Title' %}-图{{ forloop.Counter }}" />
                    {% endfor %}
                </div>
            </div>
        {% endif %}

    </article>
</main>

{# 页面底部引入公共模板，通常包含JS、页脚信息等 #}
{% include "partial/footer.html" %}

一些实用小贴士

• 自定义单页面模板： 安企CMS支持为单个页面指定独立的模板文件。你可以在后台编辑单页面时，在“单页面模板”字段填写如 page/about_us.html，然后创建相应的模板文件，这样该页面就会使用这个专属模板。
• 图片优化： 在后台的“内容设置”中，你可以启用图片自动压缩、转换为WebP格式等功能，这有助于提升页面加载速度和用户体验。
• SEO友好： 单页面同样支持设置独立的SEO标题、关键词和描述。合理利用这些字段可以帮助你的单页面在搜索引擎中获得更好的排名。

通过以上方法，你可以轻松地在安企CMS中管理和展示单页面的所有内容及关联图片，打造功能丰富且美观的网站。

常见问题 (FAQ)

**1. 我如何在