如何在AnQiCMS模板中引入公共的页头、页脚等代码片段以统一显示风格？
如何在AnQiCMS模板中引入公共的页头、页脚等代码片段以统一显示风格？
构建一个网站时，无论是个人博客、企业官网还是营销站点，保持页面视觉和功能的一致性都至关重要。设想一下，如果每个页面的顶部导航、底部版权信息甚至是侧边栏都各不相同，用户体验将大打折扣，网站的专业性也会大打折扣。安企CMS（AnQiCMS）提供了一套强大而灵活的模板引擎，能够帮助我们轻松实现网站的统一风格管理，其中最核心的实践就是将公共的页头、页脚以及其他常用代码片段进行模块化处理和统一引入。
通过这种方式，我们不仅能确保网站的每个页面都拥有一致的品牌标识和操作体验，还能大幅提升开发效率和后期维护的便捷性。当网站的导航结构、联系方式或版权声明需要更新时，我们只需修改一处代码，即可让所有相关页面同步更新，免去了逐页修改的繁琐。
那么，在AnQiCMS中，我们具体应该如何操作呢？
理解AnQiCMS模板引擎的基础
AnQiCMS的模板引擎采用了类似Django的语法风格，这对于熟悉模板开发的朋友来说会非常亲切。它的模板文件通常以.html为后缀，并统一存放在/template目录下。在模板文件中，我们主要会用到两种标记：
- 双花括号
{{ 变量名 }}：用于输出变量内容，比如网站名称、文章标题等。 - 单花括号加百分号
{% 标签名 参数 %}：用于控制逻辑流程，如条件判断、循环遍历，以及引入其他模板文件等。
要实现页面风格的统一，我们主要会运用到模板引擎的两个核心特性：模板继承（extends和block）和模板包含（include）。
模板继承：构建网站骨架
模板继承是构建统一网站布局的基石。它允许我们创建一个“基础模板”（通常命名为base.html或根据design-director.md中的建议命名为bash.html），其中定义了网站的整体结构，例如HTML文档声明、head区域、页头、主体内容区域、页脚等。基础模板中的可变部分则通过block标签进行定义。
例如，一个基础模板 (base.html) 可能看起来像这样：
<!DOCTYPE html>
<html lang="{% system with name='Language' %}">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
{# 引入页面的TDK信息 #}
<title>{% tdk with name="Title" siteName=true %}</title>
<meta name="keywords" content="{% tdk with name="Keywords" %}">
<meta name="description" content="{% tdk with name="Description" %}">
{%- tdk canonical with name="CanonicalUrl" %}
{%- if canonical %}
<link rel="canonical" href="{{canonical}}" />
{%- endif %}
{# 引入公共样式表 #}
<link rel="stylesheet" href="{% system with name="TemplateUrl" %}/css/main.css">
{% block head_extra %}{% endblock %} {# 预留额外头部内容的区块 #}
</head>
<body>
<header id="header">
{% block header %}
{% include "partial/header.html" %} {# 引入公共页头片段 #}
{% endblock %}
</header>
<main id="main-content">
{% block content %}{% endblock %} {# 页面主体内容的区块，由子模板填充 #}
</main>
<footer id="footer">
{% block footer %}
{% include "partial/footer.html" %} {# 引入公共页脚片段 #}
{% endblock %}
</footer>
{# 引入公共脚本文件 #}
<script src="{% system with name="TemplateUrl" %}/js/main.js"></script>
{% block scripts_extra %}{% endblock %} {# 预留额外脚本的区块 #}
</body>
</html>
在这个base.html中，我们定义了title、keywords、description这些TDK信息通过{% tdk %}标签动态获取，并使用{% system with name="TemplateUrl" %}获取模板静态资源路径，确保样式和脚本能正确加载。关键在于{% block header %}、{% block content %}和{% block footer %}等标签，它们是子模板可以覆盖和填充内容的区域。
任何希望保持统一风格的页面，例如首页 (index.html) 或文章详情页 (archive/detail.html)，都只需在文件顶部使用{% extends "base.html" %}来继承这个基础模板，然后根据需要填充或覆盖block中定义的内容。
例如，一个文章详情页 (archive/detail.html) 可能会这样继承和填充：
{% extends "base.html" %}
{% block head_extra %}
<link rel="stylesheet" href="{% system with name="TemplateUrl" %}/css/detail.css">
{% endblock %}
{% block content %}
<div class="container article-detail">
<h1>{% archiveDetail with name="Title" %}</h1>
<div class="meta-info">
<span>发布日期: {{ stampToDate(archive.CreatedTime, "2006-01-02") }}</span>
<span>分类: <a href="{% categoryDetail with name='Link' %}">{% categoryDetail with name='Title' %}</a></span>
</div>
<article class="content">
{%- archiveDetail archiveContent with name="Content" %}
{{ archiveContent|safe }}
</article>
{# 显示上一篇/下一篇文章 #}
<nav class="pagination-nav">
{% prevArchive prev %}
{% if prev %}
<a href="{{ prev.Link }}">上一篇: {{ prev.Title }}</a>
{% else %}
<span>没有了</span>
{% endif %}
{% endprevArchive %}
{% nextArchive next %}
{% if next %}
<a href="{{ next.Link }}">下一篇: {{ next.Title }}</a>
{% else %}
<span>没有了</span>
{% endif %}
{% endnextArchive %}
</nav>
</div>
{% endblock %}
{% block scripts_extra %}
<script src="{% system with name="TemplateUrl" %}/js/detail.js"></script>
{% endblock %}
可以看到，文章详情页只关注了自身独特的“内容”部分，而页头、页脚等公共元素则由base.html负责引入和管理。
模板包含：模块化代码片段
include标签则用于引入较小的、独立的、可重用的代码片段。它非常适合那些在多个block中都可能出现，或者不属于整体布局但功能独立的模块，如导航菜单、侧边栏、版权信息块、联系方式卡片等。AnQiCMS推荐将这些片段放在partial/目录下。
以上面base.html为例，它就通过{% include "partial/header.html" %}和{% include "partial/footer.html" %}引入了单独的页头和页脚文件。
一个公共页头 (partial/header.html) 示例：
<div class="top-bar">
<div class="container">
欢迎访问{% system with name="SiteName" %}！
电话：{% contact with name="Cellphone" %}
</div>
</div>
<div class="main-header">
<div class="container">
<a href="{% system with name="BaseUrl" %}" class="logo">
<img src="{% system with name="SiteLogo" %}" alt="{% system with name="SiteName" %} Logo">
</a>
<nav class="main-nav">
{% navList navs %}
<ul>
{%- for item in navs %}
<li class="{% if item.IsCurrent %}active{% endif %}">
<a href="{{ item.Link }}">{{item.Title}}</a>
{%- if item.NavList %}
<dl>
{%- for inner in item.NavList %}
<dd class="{% if inner.IsCurrent %}active{% endif %}">
<a href="{{ inner.Link }}">{{inner.Title}}</a>
</dd>
{% endfor %}
</dl>
{% endif %}
</li>
{% endfor %}
</ul>
{% endnavList %}
</nav>
</div>
</div>
而公共页脚 (partial/footer.html) 示例可能包含：
”`html