如何在AnQiCMS中显示自定义单页面的详情和列表？

在AnQiCMS中，单页面（Page）功能为网站提供了展示独立、固定内容的强大能力，例如“关于我们”、“联系方式”、“公司简介”等页面。这些页面通常不属于某个分类，而是独立存在，承载着重要的企业信息或品牌故事。高效地创建、管理并灵活地在网站上展示这些单页面的详情和列表，是内容运营中不可或缺的一环。

理解单页面及其作用

单页面在AnQiCMS中被设计为一种独立的内容载体，它与常规的文章或产品等文档模型有所区别。它的核心优势在于内容的独立性和管理的便捷性。您可以为每个单页面配置独立的标题、关键词、描述，甚至自定义URL，这对于搜索引擎优化（SEO）而言非常友好。无论是需要展示详细的公司历程，还是简洁明了的联系方式，单页面都能提供恰到好处的解决方案。

后台创建与管理单页面

首先，要让单页面内容呈现在网站上，您需要在AnQiCMS的后台进行创建和管理。

  1. 进入页面管理： 登录AnQiCMS后台，在左侧导航栏中找到“页面资源”菜单，点击下方的“页面管理”。
  2. 添加或编辑单页面： 在页面管理界面，您可以点击“添加单页面”按钮来创建新页面，或者选择现有页面进行编辑。
  3. 填写页面信息：
    • 页面名称： 这是单页面在前台显示的标题。
    • SEO标题、关键词、单页面简介： 这些字段对SEO至关重要，请根据页面内容精心填写。
    • 自定义URL： AnQiCMS允许您为单页面设置一个个性化的URL别名，如about-us、contact-us。这不仅有助于提升URL的可读性，也有利于SEO。
    • 单页面内容： 这是页面的主体内容，AnQiCMS提供丰富的编辑器，您可以插入文本、图片、视频等。
    • 单页面模板： 这是一个非常关键的设置项，它决定了您的单页面在前台将使用哪个模板文件进行渲染。系统默认会使用page/detail.html。但如果您想为某个特定页面（例如“关于我们”）设计独特的布局，可以创建一个名为page/about-us.html的模板文件，然后在这里填写about-us.html。

通过上述步骤，您的单页面内容便已在后台准备就绪。接下来，我们看看如何在网站前端灵活展示它们。

定制单页面详情模板

AnQiCMS采用类似Django模板引擎的语法，模板文件以.html为后缀，并统一存放在template目录下。对于单页面，其模板文件通常位于template/您的模板名称/page/路径下。

AnQiCMS为单页面详情提供了默认的模板命名规则，方便您快速应用：

  • 通用详情模板： page/detail.html。所有未指定自定义模板的单页面都会使用这个文件。
  • 基于ID的自定义模板： page/detail-{单页ID}.html。例如，ID为10的单页面可以使用page/detail-10.html。
  • 更灵活的自定义模板： 您可以创建如page/about-us.html、page/faq.html等具有描述性名称的模板文件，然后在后台创建或编辑单页面时，在“单页面模板”字段中填写about-us.html、faq.html等对应的文件名。

在您的单页面详情模板文件（例如page/detail.html或page/about-us.html）中，您需要使用AnQiCMS提供的pageDetail标签来获取当前单页面的数据。

pageDetail 标签使用示例：

{# 假设这是 template/您的模板名称/page/detail.html 或 page/about-us.html #}

{% extends "base.html" %} {# 继承您的基础布局模板 #}

{% block title %}{% pageDetail with name="Title" siteName=true %}{% endblock %} {# 设置页面标题，并附加网站名称 #}
{% block keywords %}{% pageDetail with name="Keywords" %}{% endblock %} {# 设置页面关键词 #}
{% block description %}{% pageDetail with name="Description" %}{% endblock %} {# 设置页面描述 #}

{% block content %}
<article class="single-page-detail">
    <h1>{% pageDetail with name="Title" %}</h1> {# 显示单页面标题 #}

    <div class="page-meta">
        {# 您可以在这里显示其他元信息，如发布日期（如果单页面有的话） #}
    </div>

    <div class="page-content">
        {# 显示单页面内容，注意使用 |safe 过滤器以解析HTML内容 #}
        {% pageDetail content with name="Content" %}
        {{ content|safe }}
    </div>

    {# 假设您为单页面上传了Banner图，可以在这里展示 #}
    {% pageDetail bannerImages with name="Images" %}
    {% if bannerImages %}
        <div class="page-banner">
            {% for img in bannerImages %}
                <img src="{{ img }}" alt="{% pageDetail with name='Title' %}" />
            {% endfor %}
        </div>
    {% endif %}

    {# 如果您想获取指定ID的单页面数据，例如首页上展示“关于我们”的简介，可以这样使用： #}
    {# {% pageDetail aboutPage with name="Title" id="1" %}
    <p>关于我们页面标题：{{ aboutPage }}</p> #}

</article>
{% endblock %}

在上述代码中：

  • {% pageDetail with name="Title" %}：会获取当前单页面的标题。
  • {% pageDetail content with name="Content" %}{{ content|safe }}：获取单页面的主体内容，|safe过滤器至关重要，它确保编辑器中输入的HTML内容能够被浏览器正常解析显示，而不是作为纯文本输出。
  • {% pageDetail with name="Link" %}：获取单页面的链接。
  • {% pageDetail with name="Logo" %} 或 {% pageDetail pageImages with name="Images" %}：用于获取单页面的缩略图或多张Banner图。

调用单页面列表

除了展示单个页面的详情，您可能还需要在网站