`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>