如何使用AnqiCMS的单页列表标签，在前台灵活展示“关于我们”等独立页面？

在现代网站运营中，像“关于我们”、“联系方式”、“服务条款”这类独立页面，它们承载着网站的基础信息和品牌形象，虽然不常更新，却至关重要。AnqiCMS 提供了一套灵活的“单页面”管理功能，结合其强大的模板标签系统，我们可以轻松地在前台展示这些独立页面，并根据需要进行个性化定制。

AnqiCMS中单页面的概念与作用

在AnqiCMS里，“单页面”特指那些内容独立、不属于任何分类、通常也不会有评论功能的页面。它们与“文章”或“产品”这类需要归类的动态内容不同，更偏向于静态信息展示。常见的独立页面包括：

  • 关于我们：介绍公司历史、愿景、团队等。
  • 联系我们：提供联系方式、地图、在线留言表单等。
  • 服务条款/隐私政策：法律性、规范性文本。
  • 企业文化：展示企业价值观和精神面貌。

合理利用单页面，可以使网站结构更清晰，用户能快速找到所需信息，也有助于搜索引擎更好地理解网站内容。

在AnqiCMS后台管理单页面

首先，我们需要在AnqiCMS的后台创建和管理这些独立的页面。操作路径非常直观：

  1. 进入页面管理： 登录AnqiCMS后台，导航到“页面资源”菜单，然后选择“页面管理”。
  2. 添加或编辑单页面： 在这里，您可以新增页面或编辑现有页面。在编辑页面时，有几个关键字段需要关注：
    • 页面名称： 这是页面在前台显示的标题。
    • 自定义URL： 建议为每个独立页面设置一个简洁、有意义的自定义URL，这对于搜索引擎优化（SEO）和用户友好性都非常有帮助，例如“about-us”或“contact”。
    • 单页面内容： 这是页面的主体内容区域，您可以利用富文本编辑器编辑图文并茂的内容。
    • 单页面模板： 这是一个非常灵活的设置。AnqiCMS默认会使用 page/detail.html 作为所有单页面的通用模板。但如果您希望某个特定页面（例如“关于我们”）拥有独一无二的布局和样式，您可以在这里指定一个自定义模板文件，比如 page/about-us.html。AnqiCMS会优先使用您指定的模板来渲染该页面。

通过这些设置，每个独立页面都能拥有自己的URL、内容和专属展示样式。

使用pageList标签在前台展示单页列表

在网站的前端，我们经常需要在导航菜单、页脚或侧边栏中列出这些独立页面的链接。AnqiCMS的 pageList 标签就是为此设计的。它允许您获取所有或特定的单页面数据，并在模板中循环展示。

假设您想在网站页脚列出“关于我们”、“联系我们”和“服务条款”的链接，您可以这样使用 pageList 标签：

{# 假设您在页脚或侧边栏模板中 #}
<ul>
{% pageList pages %}
    {% for item in pages %}
    {# 可以在这里根据 item.Id 或 item.Title 进行筛选，例如排除某个不希望在页脚显示的页面 #}
    {% if item.Title != "内部通知" %}
    <li>
        <a href="{{ item.Link }}">{{ item.Title }}</a>
    </li>
    {% endif %}
    {% endfor %}
{% endpageList %}
</ul>

在这段代码中：

  • {% pageList pages %} 会从后台获取所有的单页面数据，并将其赋值给名为 pages 的变量。
  • {% for item in pages %} 遍历每个单页面。
  • item.Link 会输出该页面的访问链接。
  • item.Title 会输出页面的标题。
  • 我们还可以在 for 循环内部添加条件判断，根据 item.Id 或 item.Title 来选择性地展示或隐藏某些页面，这提供了极大的灵活性。

个性化定制单页详情页面的显示

当用户点击一个单页面的链接，访问其详情页时，AnqiCMS会根据后台设置的“单页面模板”来渲染页面。

如前所述，默认情况下，所有单页面都会使用 page/detail.html 模板。如果您为“关于我们”页面在后台指定了 page/about-us.html 作为模板，那么AnqiCMS就会寻找并使用 template/您的主题目录/page/about-us.html 这个文件来渲染内容。

在这些自定义的单页面模板中，您可以直接访问当前页面的所有详细信息，无需额外调用 pageDetail 标签（AnqiCMS在单页面详情页上下文中会自动提供当前页面的数据）。您可以像这样展示页面内容：

{# 假设这是 template/您的主题目录/page/about-us.html #}
<div class="page-header">
    <h1>{{ page.Title }}</h1>
    {# 如果页面有上传Banner图，可以这样显示 #}
    {% if page.Images %}
        {% set pageBanner = page.Images[0] %}
        <img src="{{ pageBanner }}" alt="{{ page.Title }}" class="page-banner-img">
    {% endif %}
</div>
<div class="page-content">
    {# 注意：如果内容是富文本或Markdown，需要使用 |safe 过滤器以防HTML被转义 #}
    {{ page.Content|safe }}
</div>
<div class="page-description">
    <p>{{ page.Description }}</p>
</div>

在这个自定义模板中：

  • {{ page.Title }} 直接显示当前单页面的标题。
  • page.Images 是一个图片列表，page.Images[0] 可以获取第一张图片作为Banner。
  • {{ page.Content|safe }} 显示页面的主体内容，|safe 过滤器确保内容中的HTML标签能正常解析，而不是作为纯文本显示。
  • page.Description 显示页面简介。

通过这种方式，您可以根据每个独立页面的具体需求，设计出完全不同的视觉效果和功能布局，无论是简约的文字展示，还是复杂的图文互动，都能轻松实现。

总结

AnqiCMS的单页面管理和 pageList、pageDetail 标签的结合，为网站的独立页面展示提供了极大的灵活性和便利。从后台的页面创建与模板指定，到前台的列表展示与个性化渲染，整个流程顺畅高效。善用这些功能，不仅能让您的网站