如何使用`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标签提供了对应的字段来获取这些图片：
获取主形象图（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" %}" />获取单页的幻灯片组图（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标签及其参数，您可以轻松