如何在AnQiCMS模板中引用和显示公共代码片段（如header、footer）？
在网站建设和内容管理中，保持页面结构的一致性和代码的可维护性至关重要。对于像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的导航类别，实现不同页面或不同区域显示不同导航菜单的需求。