在AnQiCMS中，想要在前台页面调用并展示特定单页的详细内容和图片，其实比您想象的要简单得多。AnQiCMS强大的模板标签体系，特别是针对单页设计的标签，能够让您轻松实现这一点。
理解AnQiCMS的单页功能
首先，我们知道AnQiCMS提供了一个独立的“页面管理”模块，它允许我们创建像“关于我们”、“联系方式”或“服务介绍”这类独立的单页。这些单页的内容、图片、SEO信息等，都可以通过后台进行集中管理。而在前台展示时，我们只需要利用好AnQiCMS提供的模板标签，就能灵活地将这些内容呈现在用户面前。
AnQiCMS的模板系统采用类似Django的语法，使用{{变量}}来输出数据，{% 标签 %}来处理逻辑和调用功能。对于单页内容的调用，核心就是pageDetail标签。
核心：使用pageDetail标签调用单页详情
pageDetail标签是专门用来获取单页详细数据的。无论您想获取当前访问的单页信息，还是指定某个单页的内容，它都能胜任。
通常情况下，当用户直接访问某个单页（例如通过导航菜单点击进入“关于我们”页面）时，AnQiCMS会自动识别当前页面的单页ID。此时，您无需额外指定ID，直接使用pageDetail标签就可以获取当前单页的各项信息。
例如，要在页面上显示当前单页的标题：
<div>单页标题：{% pageDetail with name="Title" %}</div>
而如果您需要在一个非单页详情的页面（比如首页的某个模块）调用某个特定单页（比如ID为10的“关于我们”页面）的内容，您可以这样指定：
{% pageDetail aboutUsPage with id="10" %}
<h2>{{ aboutUsPage.Title }}</h2>
<p>{{ aboutUsPage.Description }}</p>
这里，我们通过id="10"参数指定了要调用的单页ID，并将获取到的数据存储在aboutUsPage这个变量中，然后通过{{ aboutUsPage.Title }}和{{ aboutUsPage.Description }}来显示标题和描述。
除了通过ID，如果您的单页设置了自定义URL别名（在后台“页面管理”中编辑单页时可以设置，例如about-us），您也可以通过token参数来调用：
{% pageDetail contactPage with token="contact-us" %}
<h3>联系我们：{{ contactPage.Title }}</h3>
<div class="content">{{ contactPage.Content|safe }}</div>
展示单页的详细内容和图片
单页的详细内容和图片是其核心组成部分。pageDetail标签提供了丰富的字段，让您能够全面展示。
1. 展示单页内容
单页最主要的部分通常是其正文内容。这个内容在后台是富文本编辑器编辑的，可能包含HTML标签。因此，在前端输出时，为了让这些HTML标签能够被浏览器正确解析并显示样式，我们需要使用|safe过滤器。
{% pageDetail pageContent with name="Content" %}
<div class="page-content">
{{ pageContent|safe }}
</div>
如果您在后台开启了Markdown编辑器，并且希望在前端也渲染Markdown内容，pageDetail标签的Content字段默认会进行转换。如果需要手动控制，也可以添加render=true或render=false参数。
2. 调用单页图片
单页通常会包含主图、缩略图，甚至是一个图片组。AnQiCMS提供了对应的字段来方便调用。
主图片（Logo）： 通常用于单页的封面或主要的视觉元素。
{% pageDetail pageLogo with name="Logo" %} {% if pageLogo %} <img src="{{ pageLogo }}" alt="{% pageDetail with name="Title" %}" class="page-main-image" /> {% endif %}这里我们使用了一个
if判断，确保图片存在时才进行输出，避免页面出现无效的图片链接。缩略图（Thumb）： 如果您在后台为单页上传了缩略图，或者系统自动生成了缩略图，可以通过
Thumb字段调用。{% pageDetail pageThumb with name="Thumb" %} {% if pageThumb %} <img src="{{ pageThumb }}" alt="{% pageDetail with name="Title" %}" class="page-thumbnail" /> {% endif %}幻灯片组图（Images）： 有些单页可能需要展示一组图片，例如轮播图或者画廊。
Images字段会返回一个图片URL的数组，您需要使用for循环来遍历并显示它们。{% pageDetail pageGallery with name="Images" %} {% if pageGallery %} <div class="page-gallery"> {% for imageUrl in pageGallery %} <img src="{{ imageUrl }}" alt="{% pageDetail with name="Title" %} - {{ forloop.Counter }}" /> {% endfor %} </div> {% endif %}这里
forloop.Counter可以在循环中获取当前元素的索引，方便为图片添加不同的alt文本或其他属性。
综合示例：构建一个完整的单页详情页面
假设我们有一个“关于我们”的单页，ID为10，URL别名为about-us。我们希望在一个单独的模板文件template/default/page/detail.html（这是AnQiCMS单页的默认详情模板路径）中展示其所有信息。
{% extends 'base.html' %} {# 继承您的基础布局文件 #}
{% block title %}
<title>{% tdk with name="Title" siteName=true %}</title>
{% endblock %}
{% block content %}
<div class="container page-container">
<h1 class="page-title">{% pageDetail with name="Title" %}</h1>
{# 显示主图片 #}
{% pageDetail mainLogo with name="Logo" %}
{% if mainLogo %}
<div class="page-header-image">
<img src="{{ mainLogo }}" alt="{% pageDetail with name="Title" %}" />
</div>
{% endif %}
{# 显示单页内容 #}
{% pageDetail pageContent with name="Content" %}
{% if pageContent %}
<div class="page-detail-content">
{{ pageContent|safe }}
</div>
{% else %}
<p>抱歉，此单页内容为空。</p>
{% endif %}
{# 显示幻灯片组图 #}
{% pageDetail pageImages with name="Images" %}
{% if pageImages %}
<div class="page-image-gallery">
<h3>相关图片：</h3>
{% for imgUrl in pageImages %}
<img src="{{ imgUrl }}" alt="{% pageDetail with name="Title" %}图集{{ forloop.Counter }}" class="gallery-item" />
{% endfor %}
</div>
{% endif %}
{# 还可以调用其他字段，例如描述或自定义字段 #}
{% pageDetail pageDescription with name="Description" %}
{% if pageDescription %}
<div class="page-description">
<p>简介: {{ pageDescription }}</p>
</div>
{% endif %}
{# 如果有自定义字段，例如“团队成员”，且调用字段名为"team_members" #}
{% pageDetail teamMembers with name="team_members" %}
{% if teamMembers %}
<div class="page-custom-field">
<h4>团队成员: {{ teamMembers }}</h4>
</div>
{% endif %}
</div>
{% endblock %}
这段代码首先会调用当前单页的标题作为页面title，并结合网站名称，优化SEO。然后依次展示主图、正文内容、图集和描述，