如何在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

<div class="container">
    <div class="contact-info">
        <h3>联系我们</h3>
        <p>地址：{% contact with name="Address" %}</p>
        <p>电话：{% contact with name="Cellphone" %}</p>
        <p>邮箱：{% contact with name="Email" %}</p>
    </div>
    <div class="links">
        <h3>友情链接</h3>
        <ul>
            {% linkList friendLinks %}
            {% for item in friendLinks %}
            <li><a href="{{item.Link}}" {% if item.Nofollow == 1 %} rel="nofollow"{% endif %} target="_blank">{{item.Title}}</a></li>
            {% endfor %}
            {%

如何在AnQiCMS模板中引入公共的页头、页脚等代码片段以统一显示风格？