如何在前台页面调用并显示AnqiCMS特定单页的详细内容和图片？

在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。然后依次展示主图、正文内容、图集和描述，