在 AnQiCMS 中，单页面（例如“关于我们”、“联系方式”或特定的产品落地页）是我们网站内容的重要组成部分。它们通常承载着独特的信息，需要与网站其他内容（如文章列表或产品详情）有不同的布局和视觉风格。幸运的是，AnQiCMS 提供了极高的灵活性，让你可以轻松地为每一个单页面设置专属的独立模板，从而打造独一无二的用户体验。

AnQiCMS 模板基础：理解单页面的呈现机制

AnQiCMS 采用了类似 Django 模板引擎的语法，这使得模板的制作和定制变得直观且易于上手。它通过 .html 格式的模板文件来控制页面的显示。通常，这些模板文件存放在 /template 目录下你当前启用的模板主题文件夹中。

对于单页面，AnQiCMS 默认会查找并使用名为 page/detail.html 的模板文件来显示其内容。这意味着，如果你不进行任何特殊设置，所有单页面都会共享这一个默认模板。然而，当某个单页面需要特别的设计，比如一个视觉冲击力更强的活动落地页，或者一个包含特定表单的联系页面时，为它单独定制一个模板就显得尤为必要。

AnQiCMS 的强大之处在于，它不仅有默认的模板，还允许你为特定的页面指定自定义的模板文件。这种方式能够让你在保持网站整体风格一致的同时，为需要突出展示的单页面赋予独特的视觉和功能。

手把手教你为单页面设置独立模板

接下来，我们将详细介绍如何在 AnQiCMS 中为单页面设置独立的模板，并确保其内容正确显示。

第一步：创建你的专属模板文件

首先，你需要创建新的模板文件。为了保持模板目录的清晰和有组织，我们建议在当前启用的模板主题文件夹（例如 /template/default/）下创建一个 page 子目录，并将所有单页面的自定义模板文件都放在这个 page 目录下。

比如，你想要为“关于我们”页面创建一个独特的布局，你可以在 /template/default/page/ 目录下创建一个名为 about.html 的新文件。这个文件将承载“关于我们”页面的全部布局和设计。同样，如果你有一个“联系我们”页面，可以创建 contact.html。

你可以根据实际页面的功能或名称来为模板文件命名，这样既便于管理，也更具识别性。

第二步：精心编写模板内容

当你创建好自定义的模板文件后，就可以开始编写其中的内容了。在 AnQiCMS 的模板中，你可以使用各种标签和变量来动态地获取和显示数据。

对于单页面，最核心的标签是 pageDetail。这个标签能够帮助你获取当前页面的标题、内容、描述等详细信息。

举个例子，在你的 about.html 模板中，你可以这样编写：

{% extends 'base.html' %} {# 继承基础布局，确保网站头部和底部一致 #}

{% block title %}
    <title>{% pageDetail with name="Title" siteName=true %}</title> {# 显示页面标题，并附加网站名称 #}
    <meta name="keywords" content="{% tdk with name="Keywords" %}">
    <meta name="description" content="{% tdk with name="Description" %}">
{% endblock %}

{% block content %}
<div class="container about-us-page">
    <h1 class="page-title">{% pageDetail with name="Title" %}</h1> {# 显示单页面标题 #}
    <div class="page-content">
        {% pageDetail pageContent with name="Content" %} {# 获取并显示单页面内容 #}
        {{ pageContent|safe }} {# 使用 safe 过滤器确保 HTML 内容正确解析 #}
    </div>
    <div class="contact-info">
        {# 假设你需要显示联系方式，可以使用联系方式标签 #}
        <h3>联系我们</h3>
        <p>电话：{% contact with name="Cellphone" %}</p>
        <p>邮箱：{% contact with name="Email" %}</p>
        <p>地址：{% contact with name="Address" %}</p>
    </div>
</div>
{% endblock %}

在这段示例中：

  • 我们首先使用 {% extends 'base.html' %} 继承了一个基础布局，这有助于保持网站的整体结构和样式。
  • 在 title 区块，我们通过 pageDetail with name="Title" 获取了当前单页面的标题，并用 siteName=true 附加了网站名称，同时使用 tdk 标签设置了关键词和描述，有助于 SEO。
  • 在 content 区块，我们用 <h1> 标签显示了单页面标题，并通过 pageDetail pageContent with name="Content" 获取了页面编辑区输入的详细内容。注意，这里使用了 |safe 过滤器，这是因为从后台编辑器输入的内容通常包含 HTML 标签，safe 过滤器可以确保这些 HTML 标签被浏览器正确解析而不是作为纯文本显示。
  • 另外，你还可以根据需求灵活地嵌入其他 AnQiCMS 标签，比如 contact 标签来显示预设的联系方式。

第三步：在后台将模板与单页面关联

完成了自定义模板文件的创建和编写后，最后一步是告诉 AnQiCMS，哪个单页面应该使用这个新的模板。

  1. 登录 AnQiCMS 后台管理界面。
  2. 在左侧导航栏中，找到并点击 “页面资源”，然后选择 “页面管理”。
  3. 在这里，你可以选择编辑一个已有的单页面，或者点击 “添加单页面” 来创建一个新的页面。
  4. 进入单页面的编辑页面后，你会看到一个名为 “单页面模板” 的字段。
  5. 在这个字段中，你需要填入你刚刚创建的自定义模板文件的相对路径和文件名。例如，如果你创建的文件是 /template/default/page/about.html，那么你在这里只需填写 page/about.html。
  6. 填写完毕后，点击 “确定” 保存你的更改。

第四步：发布与验证

保存设置后，请清除网站缓存（后台左侧菜单最下方有“更新缓存”选项），然后访问你的网站前台，检查对应的单页面。此时，你应该能看到页面已经按照你自定义的 about.html 模板样式正确显示内容了。仔细检查布局、内容和功能是否都符合预期。

打造独一无二的用户体验

通过为单页面设置独立的模板，你将获得极大的内容运营灵活性。这不仅能让你为重要的品牌故事、产品介绍或营销活动创建更具吸引力的专属页面，提升用户体验，还能在 SEO 层面受益，通过差异化的页面结构和内容布局，更好地服务于特定的搜索意图。AnQiCMS 致力于提供高度定制化的解决方案，而单页面独立模板正是其强大功能的一个缩影，帮助中小企业和内容运营团队在激烈的市场竞争中脱颖而出。

常见问题解答（FAQ）

Q1: 自定义单页面模板文件应该放在 AnQiCMS 的哪个目录下？

A1: 建议将自定义的单页面模板文件放在当前启用模板主题的 page 子目录下。例如，如果你的模板主题是 default，那么文件路径可以是 /template/default/page/your-custom-page.html。这样做有助于保持模板文件的组织结构清晰，便于管理和维护。

Q2: 如果我设置了自定义模板，但前台页面显示不正确，应该如何排查？

A2: 遇到这种情况，你可以从以下几个方面进行排查：

  1. 检查模板文件路径和名称： 确认你在后台“单页面模板”字段中填写的路径和文件名与实际创建的文件（包括大小写）是否完全一致。
  2. 检查模板文件是否存在： 确保你创建的 .html 文件确实存在于指定的模板目录下。
  3. 清除缓存： 在 AnQiCMS 后台左侧菜单底部，点击“更新缓存”，确保系统加载了最新的模板文件。
  4. 检查模板语法错误： 检查你的自定义模板文件中是否存在 HTML 或 AnQiCMS 模板标签的语法错误。一个小的错误都可能导致页面无法正常解析。
  5. 检查 extends 和 include 路径： 如果你的自定义模板继承了其他模板或包含了代码片段，请确保这些继承和包含的路径是正确的。

Q3: 在自定义单页面模板中，我可以使用哪些 AnQiCMS 标签来获取页面内容和站点信息？

A3: 在自定义的单页面模板中，你可以使用多种 AnQiCMS 标签来获取和显示内容：

  • pageDetail 标签： 这是获取当前单页面核心内容的标签，例如 {% pageDetail with name="Title" %} 获取标题，{% pageDetail pageContent with name="Content" %}{{ pageContent|safe }} 获取页面内容。
  • system 标签： 用于获取网站全局配置信息，如网站名称 {% system with name="SiteName" %}、网站 Logo {% system with name="SiteLogo" %} 等。
  • tdk 标签： 用于设置或获取页面的 SEO 元信息，如标题、关键词和描述。例如 <title>{% tdk with name="Title" %}</title>。
  • contact 标签： 获取网站联系方式，如电话 {% contact with name="Cellphone" %}、邮箱等。
  • **`navList