在网站建设和内容管理中，保持页面结构的一致性和代码的可维护性至关重要。对于像AnQiCMS这样的内容管理系统而言，有效地引用和管理公共代码片段，例如网站的头部（Header）和底部（Footer），是实现这一目标的关键。通过AnQiCMS灵活的模板机制，即使是对技术细节不甚了解的用户，也能轻松地实现这些功能，从而构建出结构清晰、易于维护的网站。

认识AnQiCMS的模板运作方式

AnQiCMS的模板系统设计得非常直观且强大，它采用类似Django模板引擎的语法，文件通常以.html作为后缀，并统一存放在站点的/template目录下。在模板中，需要输出变量时，会使用双花括号{{变量}}；而进行条件判断、循环控制等逻辑操作时，则使用单花括号和百分号{% 标签 %}，并且这些标签通常需要成对出现，例如{% if 条件 %}...{% endif %}。为了确保页面的正常显示，所有模板文件都应采用UTF8编码。

在模板设计中，为了避免重复编写相同的代码，AnQiCMS提供了强大的模板继承和引入机制。这就像搭建房屋，你可以先设计一个通用的骨架（基础模板），然后再根据不同房间（页面）的需求，填充或修改骨架的局部内容。

巧妙利用include标签，引入公共代码片段

想象一下网站的头部、底部、侧边栏或导航菜单，这些内容往往在多个页面中重复出现。如果每次都复制粘贴这些代码，一旦需要修改，就得在所有页面上逐一操作，这无疑是一场噩梦。AnQiCMS通过include标签，完美解决了这个问题。

include标签允许我们将一个模板文件（通常称之为“代码片段”或“局部模板”）嵌入到另一个模板中。例如，你可以在/template目录下创建一个partial文件夹，用于存放这些公共代码片段，如partial/header.html、partial/footer.html和partial/sidebar.html。

要在一个页面中引入头部和底部，你只需要简单地在页面的相应位置添加：

{% include "partial/header.html" %}
<!-- 页面主体内容 -->
{% include "partial/footer.html" %}

这样的好处显而易见：当网站头部需要更新时，你只需修改partial/header.html这一个文件，所有引用了它的页面都会自动同步更新。

include标签还具备更强大的功能。如果你想在引入公共片段时，向其传递一些特定的数据，可以使用with参数。例如，在引入header.html时，你可能希望它显示一个自定义的标题：

{% include "partial/header.html" with pageTitle="我的定制页面标题" %}

然后在partial/header.html内部，你就可以通过{{pageTitle}}来获取并显示这个值。如果需要传递多个参数，只需用空格隔开，如with title="标题" keywords="关键词"。

构建基础骨架：extends标签的奥秘

对于一个网站来说，大部分页面可能共享一个基本布局，比如都有固定的头部、底部，内容区域位于中间。AnQiCMS的extends标签正是为此而生。它允许你定义一个“母版”模板（例如base.html），其中包含网站的整体结构，并通过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">
    {% block head_meta %}{% endblock %} {# 用于添加页面特有的元信息 #}
    <title>{% tdk with name="Title" siteName=true %}</title> {# 使用TDK标签动态生成标题 #}
    <link rel="stylesheet" href="{% system with name="TemplateUrl" %}/css/style.css"> {# 引用静态资源 #}
    {% block head_css %}{% endblock %} {# 用于添加页面特有的CSS #}
</head>
<body>
    <header>
        {% include "partial/header.html" %} {# 引入公共头部 #}
    </header>

    <nav>
        {% include "partial/nav.html" %} {# 引入公共导航 #}
    </nav>

    <main>
        {% block main_content %} {# 定义主体内容区域，供子模板重写 #}
            <p>这里是默认的主体内容。</p>
        {% endblock %}
    </main>

    <footer>
        {% include "partial/footer.html" %} {# 引入公共底部 #}
    </footer>

    <script src="{% system with name="TemplateUrl" %}/js/main.js"></script> {# 引用公共JS #}
    {% block footer_js %}{% endblock %} {# 用于添加页面特有的JS #}
</body>
</html>

需要注意的是，extends标签必须是子模板中的第一个标签，否则模板继承将无法正常工作。

当你在创建一个具体的页面（例如index.html或article_detail.html）时，只需在文件顶部声明它继承自base.html，然后重写你需要修改的block内容：

{% extends 'base.html' %}

{% block head_meta %}
    <meta name="keywords" content="安企CMS, 网站运营, 模板定制">
    <meta name="description" content="AnQiCMS模板公共代码引用教程。">
{% endblock %}

{% block main_content %}
    <h1>欢迎来到我们的AnQiCMS网站！</h1>
    <p>这是首页的独有内容。</p>
    {% include "partial/featured_articles.html" %} {# 首页特有的组件 #}
{% endblock %}

{% block footer_js %}
    <script src="{% system with name="TemplateUrl" %}/js/index.js"></script>
{% endblock %}

通过这种方式，index.html自动获得了base.html定义的头部、底部、导航等结构，而只需关注自身独特的主体内容和特定脚本。

动态引用网站信息和导航菜单

公共的头部和底部通常需要显示网站的名称、Logo、版权信息、联系方式和导航菜单等。AnQiCMS提供了丰富的内置标签来轻松获取这些动态数据。

  • 网站名称和Logo: 你可以使用{% system with name="SiteName" %}和{% system with name="SiteLogo" %}来动态显示网站名称和Logo。同时，{% system with name="BaseUrl" %}可以获取网站的根地址，方便构建链接。

  • 导航菜单: 网站的导航菜单可以通过{% navList navs %}标签获取。你可以在partial/nav.html中循环遍历navs变量来构建导航列表，并利用item.IsCurrent判断当前页面是否为活动链接，以添加高亮样式。

    {% navList navs %}
<ul>
    {% for item in navs %}
    <li class="{% if item.IsCurrent %}active{% endif %}">
        <a href="{{ item.Link }}">{{item.Title}}</a>
        {% if item.NavList %} {# 如果有子菜单 #}
        <ul class="sub-menu">
            {% for subItem in item.NavList %}
            <li class="{% if subItem.IsCurrent %}active{% endif %}">
                <a href="{{ subItem.Link }}">{{subItem.Title}}</a>
            </li>
            {% endfor %}
        </ul>
        {% endif %}
    </li>
    {% endfor %}
</ul>
{% endnavList %}

  • 联系方式: 通过{% contact with name="Cellphone" %}、{% contact with name="Email" %}等标签，可以轻松获取并显示后台配置的联系方式信息。

  • 页面TDK: 页面的标题（Title）、关键词（Keywords）和描述（Description）对于SEO至关重要。{% tdk with name="Title" siteName=true %}标签能够动态生成包含网站名称的页面标题，而{% tdk with name="Keywords" %}和{% tdk with name="Description" %}则用于输出对应的元标签内容。

通过这些机制，网站的公共代码片段不仅保持了一致性，而且能够灵活地适应网站内容和配置的动态变化，大大提升了网站的运营效率和维护体验。

结语

在AnQiCMS中，通过合理利用include和extends标签，配合丰富的内置数据调用标签，我们可以轻松构建出模块化、易维护的网站模板结构。这种方法不仅保证了网站各页面风格的一致性，也极大提升了内容更新和迭代的效率，让网站运营变得更加得心应手。

常见问题 (FAQ)

Q1: 我已经创建了 partial/header.html 并通过 {% include "partial/header.html" %} 引入，但是我在 header.html 中修改的内容没有生效，这是为什么？ A1: 出现这种情况，首先需要确认你是否保存了 partial/header.html 文件。如果确认已保存，可能是因为AnQiCMS系统缓存导致。可以尝试登录AnQiCMS后台，找到“更新缓存”功能（通常在侧边栏底部），点击清理所有缓存。清理缓存后，再次访问页面通常就能看到更新后的内容了。

Q2: 在 include 进来的公共片段（比如 header.html）中，我需要访问当前页面的某些数据，比如文章标题，应该怎么做？ A2: 当你通过 include 标签引入一个公共片段时，该片段默认会继承当前模板的所有上下文变量。这意味着，如果在文章详情页中引入 header.html，并且该页面有一个名为 archive 的文章对象，那么在 header.html 内部，你可以直接使用 {{archive.Title}} 来访问文章标题。如果想更明确地传递数据，也可以使用 with 参数，如 {% include "partial/header.html" with currentTitle=archive.Title %}，然后在 header.html 中使用 {{currentTitle}}。

Q3: 我想在不同的页面显示不同的导航菜单，但是 {% navList navs %} 获取的是所有页面都一样的菜单，我该如何实现？ A3: AnQiCMS的导航列表标签navList支持一个typeId参数，用于指定调用后台配置的哪个导航类别。默认情况下，它会调用ID为1的导航。你可以在后台的“网站导航设置”中创建多个导航类别（例如“主导航”、“页脚导航”、“侧边栏导航”），每个类别有不同的ID。然后，在你的模板中，通过{% navList navs with typeId="2" %}来调用ID为2的导航类别，实现不同页面或不同区域显示不同导航菜单的需求。