单页面内容（如“关于我们”）如何自定义模板以实现个性化展示？

在网站运营中，个性化展示对于塑造品牌形象和提升用户体验至关重要。特别是“关于我们”、“联系方式”这类承载着企业核心信息的单页面，通过定制化的设计，可以更好地传达品牌故事，增强用户信任感。安企CMS（AnQiCMS）为我们提供了灵活的方式来实现这一目标，即使是技术背景不深的用户也能轻松上手。

理解安企CMS的单页面内容机制

在安企CMS中，单页面内容（如“关于我们”、“服务介绍”等）在后台通过“页面资源”下的“页面管理”进行统一维护。系统为单页面提供了一个默认的展示模板，通常是位于您当前主题目录下的page/detail.html。这意味着如果您不进行任何特殊设置，所有单页面都会采用这个统一的布局。

然而，当您希望某个特定单页面拥有独特的外观或功能时，例如为“关于我们”页面设计一个更具叙事性的布局，或者为“联系方式”页面集成特定的交互元素，安企CMS的自定义模板功能就能派上用场。

实现单页面个性化展示的核心步骤

安企CMS允许您为单个页面指定一个完全独立的模板文件，从而打破默认的统一布局。这个过程主要分为两个核心步骤：创建自定义模板文件，以及在后台将该文件与具体的单页面内容关联起来。

第一步：创建自定义模板文件

首先，您需要在您当前使用的模板主题目录下创建自定义模板文件。安企CMS对模板文件的组织有明确的约定：

  1. 模板存放路径： 您的自定义单页面模板文件应放置在当前主题目录下的 page/ 文件夹中。例如，如果您的模板主题目录是 template/default/，那么您的自定义文件应放在 template/default/page/ 之下。

  2. 模板命名： 您可以根据页面的ID进行命名，例如 page/detail-10.html（如果“关于我们”页面的ID是10），但更推荐的方式是使用有意义的自定义名称。例如，您可以为“关于我们”页面创建一个名为 about-us.html 的模板文件，那么它的完整路径会是 template/default/page/about-us.html。这种方式更直观，便于管理和识别。

  3. 模板内容： 在这个新建的 .html 文件中，您可以自由编写页面的HTML结构，并结合安企CMS提供的模板标签来动态获取页面内容。安企CMS使用类似Django模板引擎的语法，变量使用双花括号 {{变量}}，逻辑判断和循环使用单花括号和百分号 {% 标签 %}。

第二步：在后台关联自定义模板

创建好模板文件后，接下来就是将其与具体的单页面内容进行关联：

  1. 进入页面管理： 登录安企CMS后台，导航至“页面资源” -> “页面管理”。
  2. 编辑目标页面： 找到您希望自定义的单页面（例如“关于我们”），点击编辑进入页面编辑界面。
  3. 指定自定义模板： 在页面编辑界面的“其他参数”部分，您会找到一个名为“单页面模板”的字段。在这里，填入您刚刚创建的自定义模板文件的相对路径和文件名。以上面的例子来说，如果您创建的文件是 template/default/page/about-us.html，那么在这个字段中，您只需要填写 page/about-us.html 即可。
  4. 保存并预览： 填写完毕后，保存页面，并到网站前台刷新查看效果。

构建个性化单页面内容（代码示例）

自定义模板文件是您发挥创意的地方。在这里，您可以利用安企CMS强大的模板标签来组织页面内容。以下是一个简化的示例，展示如何在 page/about-us.html 模板中获取“关于我们”页面的标题、内容、图片以及站点的联系信息：

”`twig {# 假设存在一个基础布局模板，如 base.html，用于统一页眉、页脚等 #} {% extends ‘base.html’ %}

{# 设置页面标题、关键词和描述，通常会从当前单页面的TDK设置中获取 #} {% block title %}{% pageDetail with name=“Title” %} - {% system with name=“SiteName” %}{% endblock %} {% block keywords %}{% endblock %} {% block description %}{% endblock %}

{% block content %} 

{# 获取当前单页面的标题 #}
<h1 class="text-center mb-4">{% pageDetail with name="Title" %}</h1>

{# 获取单页面设置的Banner图或幻灯片组图，如果有多张图，这里取第一张作为Banner #}
{% pageDetail pageImages with name="Images" %}
{% if pageImages %}
<div class="page-banner text-center mb-5">
    <img src="{{ pageImages[0] }}" alt="{% pageDetail with name="Title" %} Banner" class="img-fluid rounded shadow-sm">
</div>
{% endif %}

<div class="row">
    <div class="col-md-8 mx-auto">
        {# 获取单页面的主要内容，并使用 |safe 过滤器确保