在安企CMS中管理前端页面代码，特别是页头、页脚等需要在多个页面中重复出现的代码片段，是提升开发效率和网站可维护性的关键。安企CMS提供了强大且灵活的模板引擎，让我们能够通过优雅的方式组织和引用这些通用代码。

理解模板复用的重要性

设想一下，如果您的网站有几十个甚至上百个页面，每个页面都独立地包含了完整的页头、导航、页脚代码。当网站的Logo需要更换，或者页脚的版权信息需要更新时，您将不得不逐一修改所有页面，这无疑是一项繁琐且容易出错的工作。模板复用的核心价值就在于：

  1. 提高维护效率： 只需修改一处，即可在所有引用该代码片段的页面上生效。
  2. 确保网站一致性： 保证所有页面的通用元素（如导航栏样式、页脚信息）保持统一。
  3. 加速开发流程： 无需重复编写相同代码，专注于页面独有的内容。
  4. 优化代码结构： 使模板代码更加简洁、模块化，易于阅读和理解。

安企CMS的模板引擎支持类似Django语法的标签，这为实现高效的代码复用提供了坚实的基础。

安企CMS模板文件组织概览

在安企CMS中，所有的模板文件都存放在 /template 目录下。每个独立的模板主题都会有自己的文件夹，例如 default 主题就会在 /template/default。模板文件通常以 .html 结尾，而模板中使用的样式、JavaScript脚本和图片等静态资源，则会统一存放在 /public/static/ 目录中。

为了更好地组织通用代码，安企CMS推荐了两种主要的结构：

  • 公共代码文件： 比如 bash.html，文档中特别指出这用于存放“页头、页脚等每个页面都继承的部分”。这暗示了它非常适合作为页面的基本骨架文件，通过继承机制被其他页面使用。
  • 代码片段目录： 通常是 partial/ 目录，用于存放侧边栏、面包屑、通用表单组件等小型、可插拔的代码片段。

理解了这些约定，我们就可以开始高效地组织和引用代码了。

核心策略一：利用模板继承简化页面骨架

对于一个网站页面最外层的结构，例如包含 <!DOCTYPE html>、<head>、<body> 以及主要的页头、页脚区域，我们应该使用模板继承（extends）来管理。

首先，创建一个名为 bash.html（或您习惯的 base.html）的基础模板文件，它位于您的主题根目录下（例如 /template/default/bash.html）。这个文件将包含所有页面共有的HTML结构，并通过 {% block ... %} 标签定义可替换的区域。

一个典型的 bash.html 可能包含以下结构：

<!DOCTYPE html>
<html lang="{% system with name='Language' %}">
<head>
    <meta charset="UTF-8">
    {% tdk seoTitle with name="Title" siteName=true %}
    <title>{{ seoTitle }}</title>
    <meta name="keywords" content="{% tdk with name='Keywords' %}">
    <meta name="description" content="{% tdk with name='Description' %}">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="{% system with name='TemplateUrl' %}/css/main.css">
    {% block head_extra %}{% endblock %} {# 额外头部内容，如特定页面的CSS或JS #}
</head>
<body>
    <header>
        {% include "partial/header.html" %} {# 引用通用的页头片段 #}
    </header>

    <nav>
        {% include "partial/nav.html" %} {# 引用通用的导航片段 #}
    </nav>

    <main>
        {% block content %}{% endblock %} {# 页面主体内容 #}
    </main>

    <footer>
        {% include "partial/footer.html" %} {# 引用通用的页脚片段 #}
    </footer>

    <script src="{% system with name='TemplateUrl' %}/js/main.js"></script>
    {% block body_extra %}{% endblock %} {# 额外身体底部内容，如特定页面的JS #}
</body>
</html>

接下来，对于网站的任何一个具体页面，例如 index.html 或 article/detail.html，您只需使用 {% extends 'bash.html' %} 标签来继承这个基础骨架，并使用 {% block ... %} 标签来填充或重写相应区域的内容。

”`html {# /template/default/index/index.html #} {% extends ‘bash.html’ %}

{% block head_extra %}

<link rel="stylesheet" href="{% system with name='TemplateUrl' %}/css/home.css">

{% endblock %}

{% block content %}

<h1>欢迎来到安企CMS网站！</h1>
<p>这是首页的独特内容。</p>
{% include "partial/latest_articles.html" %} {# 首页特有的文章列表片段 #}

{% endblock %}

{% block body_extra %}

<script src="{% system with name='TemplateUrl' %