如何使用`pageDetail`标签获取单页（如“关于我们”）的详细内容和图片？

在网站运营中，像“关于我们”、“联系我们”这样的单页是不可或缺的，它们承载着企业文化、联系方式、服务介绍等重要信息。如何将这些精心准备的内容高效、美观地呈现在网站前端，是每位网站运营者都需要掌握的技能。对于使用安企CMS（AnQiCMS）的用户而言，pageDetail标签正是实现这一目标的关键工具。

AnqiCMS中的单页：内容的基石

在深入了解pageDetail标签之前，我们先来认识一下AnqiCMS中的单页。在AnqiCMS的后台管理界面，您可以在“页面资源”模块找到“页面管理”功能。这里就是创建和编辑所有单页的地方。一个单页通常包含以下关键信息：

  • 页面名称（Title）：显示在页面上的标题。
  • 单页面简介（Description）：用于简要概括页面内容，对SEO也很有帮助。
  • 单页面内容（Content）：页面的主体文字、图片、视频等丰富内容。安企CMS支持富文本编辑器，您可以轻松编辑和排版。
  • 自定义URL（Custom URL）：您可以为单页设置一个更友好的URL路径，例如about-us、contact，这对于提升用户体验和SEO都非常重要。
  • Banner图和缩略图（Images/Logo/Thumb）：为页面配置主视觉图片，用于在列表页或页面顶部展示。
  • 单页面模板（Page Template）：允许您为特定单页指定独立的模板文件，实现个性化布局。

这些后台配置的数据，最终都需要通过模板标签呈现在用户眼前，而pageDetail正是这个环节的桥梁。

pageDetail标签：获取单页内容的利器

pageDetail标签是AnqiCMS模板引擎中专门用于获取单页详细内容的标签。它的基本语法非常直观：

{% pageDetail 变量名称 with name="字段名称" id="1" %}

其中：

  • 变量名称：这是一个可选参数。如果您想将获取到的数据存储在一个变量中，以便后续重复使用或进行更复杂的逻辑处理，就可以指定一个变量名（例如aboutPage）。如果不指定，标签会直接输出对应字段的值。
  • name="字段名称"：这是核心参数，用于指定您想要获取单页的哪个字段值。例如，name="Title"获取标题，name="Content"获取内容。
  • id="1" 或 token="about-us"：这两个参数都是可选的。默认情况下，pageDetail标签会自动获取当前访问页面对应的单页内容。如果您需要获取非当前页面的特定单页内容（比如在首页展示“关于我们”的片段），就可以通过指定单页的ID（id）或其自定义URL别名（token）来实现。

了解了基本语法，我们就可以着手获取单页的详细内容和图片了。

获取单页的文字内容

单页的文字主体内容通常存储在Content字段中。我们可以这样获取它：

{# 默认用法，自动获取当前页面单页的内容 #}
<div>
    {% pageDetail with name="Content" %}
</div>

如果您将内容存储在一个变量中，并希望确保HTML标签能够正确解析（因为后台通常使用富文本编辑器），您需要结合|safe过滤器。如果后台内容编辑器开启了Markdown功能，并且您希望将Markdown格式的内容渲染成HTML，还需要添加render=true参数：

{% pageDetail pageContent with name="Content" render=true %}
<div>
    {{ pageContent|safe }}
</div>

在这里，render=true告诉AnqiCMS模板引擎将Markdown内容转换为HTML，而|safe过滤器则确保转换后的HTML代码不会被再次转义，从而在浏览器中正确显示样式和布局。

获取单页的图片内容

单页可以配置多种图片类型，包括主形象图、缩略图和组图。pageDetail标签提供了对应的字段来获取这些图片：

  1. 获取主形象图（Logo）和缩略图（Thumb）： Logo通常用于页面的主视觉图或较大尺寸图片，而Thumb则用于较小尺寸的缩略图展示。

    {# 获取单页的主形象图 #}
<img src="{% pageDetail with name="Logo" %}" alt="{% pageDetail with name="Title" %}" />


{# 获取单页的缩略图 #}
<img src="{% pageDetail with name="Thumb" %}" alt="{% pageDetail with name="Title" %}" />

  2. 获取单页的幻灯片组图（Images）： 如果一个单页配置了多张图片，例如用于轮播图或图集展示，这些图片会存储在Images字段中。由于Images是一个图片地址的数组，您需要使用for循环来遍历并显示每一张图片。

    {% pageDetail pageImages with name="Images" %}
<div class="gallery">
    {% for imageUrl in pageImages %}
        <img src="{{ imageUrl }}" alt="Image {{ forloop.Counter }}" />
    {% endfor %}
</div>

    在这里，pageImages是一个包含了所有图片URL的数组。我们通过for循环遍历它，imageUrl变量在每次循环中都会是数组中的一个图片地址，forloop.Counter则可以用来显示当前图片的序号。

实践案例：“关于我们”页面的构建

让我们通过一个“关于我们”页面的实际例子，将上述知识点串联起来。假设我们有一个后台ID为10或自定义URL别名为about-us的“关于我们”单页。

{# 引入头部文件，通常包含网站的公共样式和JS #}
{% include "partial/header.html" %}

<main class="main-content">
    <section class="about-hero">
        {# 获取“关于我们”页面的主形象图，通过token指定 #}
        <img src="{% pageDetail with name="Logo" token="about-us" %}" alt="关于我们主视觉" class="hero-image">
    </section>

    <section class="about-intro container">
        {# 获取“关于我们”页面的标题 #}
        <h1 class="page-title">{% pageDetail with name="Title" token="about-us" %}</h1>
        {# 获取“关于我们”页面的简介 #}
        <p class="page-description">{% pageDetail with name="Description" token="about-us" %}</p>
    </section>

    <section class="about-details container">
        {# 获取“关于我们”页面的详细内容，并确保HTML正确渲染 #}
        {% pageDetail pageDetailContent with name="Content" token="about-us" render=true %}
        <article class="content-body">
            {{ pageDetailContent|safe }}
        </article>
    </section>

    <section class="company-gallery container">
        <h2>公司环境</h2>
        {# 获取“关于我们”页面的组图，并以图集形式展示 #}
        {% pageDetail companyPhotos with name="Images" token="about-us" %}
        <div class="image-grid">
            {% for photoUrl in companyPhotos %}
                <img src="{{ photoUrl }}" alt="公司环境图片 {{ forloop.Counter }}" class="grid-item">
            {% endfor %}
        </div>
    </section>
</main>

{# 引入底部文件 #}
{% include "partial/footer.html" %}

在这段代码中，我们通过多次调用pageDetail标签，分别获取了“关于我们”页面的主形象图、标题、简介、详细内容以及公司环境的组图，并通过token="about-us"确保获取的是指定单页的数据。

灵活运用：高级用法与自定义

除了获取当前页面的内容，pageDetail标签的灵活性还体现在以下方面：

  • 指定ID或Token获取：如上例所示，您可以使用id="单页ID"或token="单页URL别名"来精确获取任何已创建的单页内容，无论当前用户访问的是哪个页面。这在需要在其他页面（例如首页）展示某个单页的精简信息时尤其有用。
  • 多站点数据调用：如果您在AnqiCMS后台配置了多站点管理，并且希望调用其他站点下的单页数据，可以使用siteId参数指定目标站点ID。例如，{% pageDetail with name="Content" id="1" siteId="2" %}会获取站点ID为2的单页ID为1的内容。
  • 单页自定义模板：AnqiCMS允许您为单个页面设置自定义的模板文件。例如，如果您的“联系我们”页面需要一个特殊的地图布局，您可以在后台该单页的编辑页面中指定一个名为page/contact.html的模板。这样，当用户访问“联系我们”时，系统会自动应用这个自定义模板，而您只需在page/contact.html中按照需求调用pageDetail标签即可。

通过灵活运用pageDetail标签及其参数，您可以轻松