`pageList`和`pageDetail`标签如何管理和显示独立的单页面内容？

在网站运营中，除了动态更新的文章或商品列表，我们常常需要展示一些相对固定、独立的内容页面，例如“关于我们”、“联系方式”、“隐私政策”或“服务介绍”等。这些页面通常被称为“单页面内容”。AnQiCMS为我们管理和展示这些页面提供了强大而灵活的工具，特别是pageList和pageDetail这两个核心标签。

单页面内容：网站的基石

单页面内容是网站不可或缺的一部分，它们承载着重要的静态信息，是用户了解企业、获取帮助或建立信任的关键。在AnQiCMS中，单页面内容的管理非常直观。你可以通过后台的“页面资源”菜单，进入“页面管理”模块，在这里创建、编辑或删除你的单页面。

在创建或编辑单页面时，你会看到一系列实用的字段：

• 页面名称： 这是用户在前端页面上看到的标题。
• SEO标题、关键词、单页面简介： 这些字段专为搜索引擎优化设计，帮助你的单页面在搜索结果中获得更好的表现。
• 自定义URL： 允许你为页面设置一个简洁、有意义的URL路径，例如将“关于我们”页面的URL设置为/about，这对于用户记忆和SEO都非常有益。
• 单页面内容： 这里是单页面的主体内容，AnQiCMS通常提供丰富的编辑器（如支持Markdown）来帮助你创建图文并茂的页面。
• 单页面模板： 这是AnQiCMS为单页面提供个性化展示的关键。你可以为某个特定页面指定一个完全不同的模板文件，实现独特的视觉和功能布局。

理解了后台的页面管理方式，我们就可以将目光转向如何在网站前端通过标签来展示这些内容了。

pageDetail 标签：精细展现特定单页面内容

当你需要在一个页面中详细展示某个特定单页面的全部内容时，pageDetail标签就是你的得力助手。它允许你根据需要，提取单个页面的任意字段并将其呈现在模板中。

基本用法：

pageDetail标签通常与name参数配合使用，来指定你需要调用的页面字段。例如，要在页面中显示当前单页面的标题，你可以这样写：

<div><h1>{% pageDetail with name="Title" %}</h1></div>

或者，如果你想将获取到的标题赋值给一个变量，再进行后续操作：

{% pageDetail pageTitle with name="Title" %}
<div><h1>{{ pageTitle }}</h1></div>

常用字段展示：

pageDetail标签可以获取单页面的各种详细信息：

• 标题与描述： Title（页面标题）、Description（页面简介）。

  
  <h2>{% pageDetail with name="Title" %}</h2>
  <p>{% pageDetail with name="Description" %}</p>
  

• 页面链接： Link字段能获取单页面的完整URL。

  
  <a href="{% pageDetail with name="Link" %}">访问此页面</a>
  

• 主体内容： Content字段是单页面最核心的部分，它包含你在后台编辑器中编辑的所有文本、图片等。由于Content可能包含HTML代码，因此在输出时通常需要配合|safe过滤器，以确保HTML内容被正确解析而非转义显示。

  
  <div class="page-content">
      {% pageDetail pageContent with name="Content" %}
      {{ pageContent|safe }}
  </div>
  

  值得一提的是，如果你的单页面内容是使用Markdown编辑器编写的，并且希望前端自动将其渲染成HTML，可以在Content字段后添加render=true参数（同时仍然需要|safe）：

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

• 图片资源： Logo（单页面缩略图大图）、Thumb（单页面缩略图）和Images（单页面幻灯片组图）字段，可以让你展示与页面相关的图片。

  
  <img src="{% pageDetail with name="Logo" %}" alt="{% pageDetail with name="Title" %}" />
  {% pageDetail pageImages with name="Images" %}
  <div class="banner-carousel">
      {% for imgUrl in pageImages %}
          <img src="{{ imgUrl }}" alt="图片描述" />
      {% endfor %}
  </div>
  

指定特定单页面：

在单页面详情页，pageDetail会默认获取当前页面的信息。但如果你想在其他页面调用某个指定单页面的内容（例如在首页展示“关于我们”的简介），你可以通过id或token参数来指定：

{# 获取ID为1的单页面标题 #}
<h3>{% pageDetail with name="Title" id="1" %}</h3>
{# 获取自定义URL别名为'contact-us'的单页面内容 #}
<div class="contact-info">
    {% pageDetail contactContent with name="Content" token="contact-us" %}
    {{ contactContent|safe }}
</div>

pageList 标签：灵活组织单页面集合

有时，你可能需要在网站的不同区域（比如页脚导航、侧边栏或服务列表）展示多个单页面的列表，这时pageList标签就派上用场了。它允许你获取一个单页面的集合，并通过循环标签进行遍历和展示。

基本用法：

使用pageList标签时，你需要定义一个变量来存储获取到的单页面列表，然后通过for循环来逐一处理每个单页面。

<ul>
{% pageList pages %}
    {% for item in pages %}
    <li>
        <a href="{{ item.Link }}">{{ item.Title }}</a>
    </li>
    {% endfor %}
{% endpageList %}
</ul>

在这个循环中，item变量代表了列表中的每一个单页面，你可以像使用pageDetail一样，访问其Id、Title、Link、Description、Logo、Thumb等字段。

实用场景示例：

1. 网站页脚导航： 在网站底部展示“关于我们”、“隐私政策”、“服务条款”等页面的链接。

   
   <nav class="footer-nav">
       <ul>
       {% pageList legalPages %}
           {% for item in legalPages %}
           {# 可以根据页面ID或自定义URL排除某些不适合在页脚展示的页面 #}
           {% if item.Id != 99 %}
           <li><a href="{{ item.Link }}">{{ item.Title }}</a></li>
           {% endif %}
           {% endfor %}
       {% endpageList %}
       </ul>
   </nav>
   

2. 首页服务列表： 在首页展示“我们的服务”相关的单页面列表，每个服务有标题、简介和缩略图。

   
   <div class="services-overview">
       {% pageList services %}
           {% for service in services %}
           <div class="service-item">
               <img src="{{ service.Thumb }}" alt="{{ service.Title }}" />
               <h3><a href="{{ service.Link }}">{{ service.Title }}</a></h3>
               <p>{{ service.Description }}</p>
           </div>
           {% endfor %}
       {% endpageList %}
   </div>