在网站运营中，保持网站页面的统一性和高效管理是提升用户体验和运营效率的关键。对于安企CMS（AnQiCMS）用户而言，将页头、页脚、导航栏等公共部分进行模块化处理，不仅能确保全站视觉风格的一致性，更能大幅简化后续的维护和更新工作。安企CMS 提供了一套强大而灵活的模板机制，让您轻松实现这一目标。

理解 AnQiCMS 的模板架构

AnQiCMS 的模板文件通常存放在 /template 目录下，并以 .html 为后缀。系统设计注重模块化，鼓励开发者和内容运营者将重复出现的代码片段提取出来，形成独立的模块。其中，最核心的两个概念是“模板继承”（extends）和“模板引用”（include）。

想象一下盖房子，extends 就像是定义了房屋的基本结构图（比如有几层楼，客厅、卧室在哪），而 include 则是用来填充结构图中的细节（比如客厅里的沙发、电视摆件）。通过合理运用它们，我们就能构建出既统一又易于维护的网站。

核心模块化工具：extends 与 include

  1. extends：构建网站的“骨架” extends 标签用于指定一个基础模板，让当前模板继承其内容。这非常适合用来定义网站的整体布局，例如 <head> 区域、主要的 div 结构、以及公共的页头和页脚的引用位置。 通常，我们会创建一个名为 base.html （或 AnQiCMS 文档中建议的 bash.html）的文件作为网站的骨架模板。这个文件包含了所有页面共有的 HTML 结构和占位符（通过 block 标签定义），例如：

    • <html> 和 <head> 标签，包括字符集、视口设置、网站标题（TDK）、全局样式表和 JavaScript 文件的引用。
    • 页面主体 <body> 的大致结构，例如顶部导航区、内容主体区、侧边栏区和底部页脚区。
    • block 标签是 extends 机制的核心，它定义了子模板可以覆盖或扩展的区域。

  2. include：填充可复用的“组件” include 标签允许您将一个模板文件的内容直接插入到另一个模板文件中。这非常适合那些在多个页面中重复出现的、相对独立的组件，例如：

    • 网站头部（Header）：通常包含 Logo、主导航、搜索框等。
    • 网站底部（Footer）：通常包含版权信息、备案号、联系方式、友情链接等。
    • 侧边栏（Sidebar）：可能包含热门文章、广告位、分类列表等。
    • 面包屑导航（Breadcrumbs）：显示当前页面在网站结构中的位置。 这些可复用的代码片段通常会统一存放在一个 partial/ 目录下，方便管理和查找。

实战：模块化您的页头、页脚与导航

下面，我们通过具体的代码示例，展示如何利用 AnQiCMS 的模板标签和结构，模块化网站的公共部分。

第一步：创建基础布局文件 base.html

在您的模板文件夹（例如 /template/default/）中，创建一个名为 base.html 的文件。这个文件将是所有页面的基础。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    {# 通过 tdk 标签获取页面的标题、关键词和描述。siteName=true 会自动在标题后附加网站名称 #}
    <title>{% tdk with name="Title" siteName=true %}</title>
    <meta name="keywords" content="{% tdk with name="Keywords" %}">
    <meta name="description" content="{% tdk with name="Description" %}">
    
    {# 引入全局 CSS 文件，TemplateUrl 标签获取模板静态文件地址 #}
    <link rel="stylesheet" href="{% system with name="TemplateUrl" %}/css/style.css">
    
    {# 预留一个区域供子页面添加特定的 head 内容，例如页面独有的 CSS 或 JS #}
    {% block head_extra %}{% endblock %}
</head>
<body>
    {# 引入公共的页头部分 #}
    {% include "partial/header.html" %}

    <main class="main-content">
        {# 这是主体内容区域，每个子页面将在此填充自己的独特内容 #}
        {% block content %}{% endblock %}
    </main>

    {# 引入公共的页脚部分 #}
    {% include "partial/footer.html" %}

    {# 预留一个区域供子页面添加页面底部的 JS 脚本 #}
    {% block body_extra %}{% endblock %}
</body>
</html>

第二步：创建公共组件文件

在您的模板目录下，创建一个 partial 文件夹（例如 `/template/