在网站运营中，单页面内容（如“关于我们”、“联系方式”、“服务介绍”等）扮演着至关重要的角色。它们通常是展示企业核心信息、品牌故事或特定服务详情的载体。为了高效地管理和显示这些页面，AnQiCMS 提供了 pageList 和 pageDetail 两个核心标签，让内容的组织和呈现变得既灵活又便捷。

单页面内容的后台管理

在 AnQiCMS 后台，单页面内容通过“页面资源”下的“页面管理”进行集中管理。在这里，您可以创建、编辑、删除以及对单页面进行各项配置。

创建或编辑一个单页面时，系统提供了丰富的字段供您填写：

  1. 页面名称：这是页面的主要标题，也是在前台显示给用户的名称。
  2. SEO 标题、关键词、描述：这些是为搜索引擎优化而设，您可以为每个单页面单独设置 TDK（Title, Description, Keywords），以提升页面在搜索引擎中的表现。
  3. 自定义 URL：为页面设置一个简洁、有意义的 URL 别名，这不仅有助于用户记忆，也是 SEO 友好的重要一环。系统会根据页面名称自动生成拼音 URL，您也可以手动修改。
  4. 单页面简介：对页面内容的简要概括，可用于列表展示或 Meta Description。
  5. 单页面内容：这是页面的主体内容，AnQiCMS 提供了功能强大的富文本编辑器，支持图文混排，甚至在启用 Markdown 编辑器后，还支持 Markdown 语法，让内容创作更加高效。
  6. 显示顺序：控制单页面在列表中的排列次序。
  7. 单页面模板：您可以为特定的单页面指定独立的模板文件。例如，为“联系我们”页面设计一个专属布局，只需在后台选择对应的模板文件（如 contact.html），确保该文件存在于您的模板设计包中。AnQiCMS 默认支持 page/detail.html 或 page/detail-{单页ID}.html 这样的模板命名约定。
  8. Banner 图、缩略图：上传与页面主题相关的图片，用于在页面顶部展示醒目的 Banner 或在列表页作为缩略图。

这些后台设置是前端标签能够灵活调用和展示的基础。

pageDetail 标签：精细化展示单个页面内容

当我们希望在网站前端展示一个具体的单页面内容时，pageDetail 标签便是您的得力助手。它允许您根据页面的 ID 或自定义 URL 别名（token）精确地获取并显示该页面的任何字段。

主要用途：

  • 构建“关于我们”页面，展示公司简介。
  • 制作“联系方式”页面，显示联系信息和地图。
  • 展示某项服务的详细介绍页面。

使用方法： pageDetail 标签的核心在于通过 name 参数指定您想要获取的具体字段。

{# 假设这是“关于我们”页面的模板文件 (page/detail.html 或 page/about-us.html) #}
<article>
    <h1 class="page-title">{% pageDetail with name="Title" %}</h1> {# 获取当前页面的标题 #}
    <div class="page-meta">
        <span>更新时间：{% pageDetail with name="UpdatedTime" format="2006-01-02" %}</span>
    </div>
    <div class="page-content">
        {# 获取页面主体内容，使用 |safe 过滤器确保HTML正确渲染 #}
        {%- pageDetail pageContent with name="Content" %}
        {{ pageContent|safe }}
    </div>

    {# 假设页面设置了Banner图，获取第一张作为背景 #}
    {%- pageDetail bannerImages with name="Images" %}
    {%- if bannerImages %}
    <div class="page-banner" style="background-image: url({{ bannerImages[0] }});"></div>
    {%- endif %}

    {# 您也可以指定其他页面的内容，例如，在首页展示ID为1的单页面简介 #}
    <div class="homepage-about-snippet">
        <h2>{% pageDetail with name="Title" id="1" %}</h2>
        <p>{% pageDetail with name="Description" id="1" %}</p>
        <a href="{% pageDetail with name="Link" id="1" %}">了解更多</a>
    </div>

    {# 或者通过自定义URL别名来获取，例如别名为'contact-us'的联系页面 #}
    <div class="contact-info">
        <h3>联系我们</h3>
        <p>地址：{% pageDetail with name="Address" token="contact-us" %}</p>
        <p>电话：{% pageDetail with name="Phone" token="contact-us" %}</p>
    </div>
</article>

关键字段：

  • Id：单页面 ID。
  • Title：页面标题。
  • Link：页面链接。
  • Description：页面描述。
  • Content：页面主体内容，通常需要结合 |safe 过滤器来正确渲染其中的 HTML。
  • Logo：页面的主要图片或缩略图。
  • Images：页面的 Banner 图集，通常是数组，可以通过 [0] 获取第一张。
  • UpdatedTime, CreatedTime：页面的创建和更新时间，可使用 format 参数进行格式化显示。

pageList 标签：灵活展示多个页面链接

如果您需要在一个页面上列出多个单页面，例如在网站底部展示所有服务页面的链接，或者在侧边栏显示一个“快速链接”列表，pageList 标签就派上用场了。它会检索您在后台创建的所有单页面。

主要用途：

  • 在网站底部区域显示“服务”、“关于”等常用页面的导航链接。
  • 在侧边栏创建一个指向关键单页面的列表。
  • 构建一个“所有页面