如何在前端页面中高效地组织和引用模板中的公共页头、页脚等代码片段？
在安企CMS中管理前端页面代码，特别是页头、页脚等需要在多个页面中重复出现的代码片段，是提升开发效率和网站可维护性的关键。安企CMS提供了强大且灵活的模板引擎，让我们能够通过优雅的方式组织和引用这些通用代码。
理解模板复用的重要性
设想一下，如果您的网站有几十个甚至上百个页面，每个页面都独立地包含了完整的页头、导航、页脚代码。当网站的Logo需要更换，或者页脚的版权信息需要更新时，您将不得不逐一修改所有页面，这无疑是一项繁琐且容易出错的工作。模板复用的核心价值就在于：
- 提高维护效率： 只需修改一处，即可在所有引用该代码片段的页面上生效。
- 确保网站一致性： 保证所有页面的通用元素（如导航栏样式、页脚信息）保持统一。
- 加速开发流程： 无需重复编写相同代码，专注于页面独有的内容。
- 优化代码结构： 使模板代码更加简洁、模块化，易于阅读和理解。
安企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' %