如何在AnQiCMS模板中复用页头、页脚等公共显示元素？
在网站运营中，效率和一致性是成功的关键。当您管理一个网站时，会发现很多元素在不同页面上反复出现，比如页头、页脚、导航栏、侧边栏等。如果每次都手动复制粘贴这些代码，不仅效率低下，还容易出错，更别提后续修改时需要逐一调整的繁琐。
好在 AnQiCMS 的模板系统设计得非常灵活，它提供了强大的机制来帮助我们高效地复用这些公共显示元素，确保网站风格统一，维护起来也更加轻松。AnQiCMS 采用类似 Django 模板引擎的语法，即使您不是专业的开发人员，也能很快上手。下面，我们就来详细了解如何在 AnQiCMS 模板中有效地复用这些元素。
方法一：利用 extends 标签构建模板骨架
想象一下，您的网站有一个统一的“骨架”或“母版”：头部区域、底部区域、内容区域，以及一些固定的 CSS 和 JavaScript 文件引用。extends 标签就是用来定义这个“母架”的。
通常，我们会创建一个名为 base.html 的文件，作为所有页面的基础布局。在这个文件中，您可以把所有公共的 HTML 结构、CSS 和 JS 引用都放进去。对于那些会在不同页面中变化的部分，比如页面的标题、主要内容区、侧边栏等，我们使用 {% block 块名称 %}{% endblock %} 这样的标签将其定义为可替换的“内容块”。
例如，一个 base.html 可能会是这样：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
{% block title %}<title>我的AnQiCMS网站</title>{% endblock %}
<link rel="stylesheet" href="{% system with name='TemplateUrl' %}/css/style.css">
<!-- 其他公共CSS和JS引用 -->
</head>
<body>
<header>
<!-- 这里是公共的网站头部，例如Logo、主导航等 -->
{% include "partial/header.html" %}
</header>
<nav>
<!-- 公共导航栏 -->
{% include "partial/nav.html" %}
</nav>
<main>
<div class="container">
{% block content %}
<!-- 这里是主要内容区，每个页面都会替换掉这里的内容 -->
<p>默认内容...</p>
{% endblock %}
</div>
</main>
<footer>
<!-- 这里是公共的网站底部，例如版权信息、友情链接等 -->
{% include "partial/footer.html" %}
</footer>
<!-- 底部公共JS -->
<script src="{% system with name='TemplateUrl' %}/js/main.js"></script>
</body>
</html>
当您需要创建一个新页面（比如 index.html 或 article_detail.html）时，只需要在该文件的最顶部使用 {% extends 'base.html' %} 来继承这个骨架。然后，您就可以在对应的 block 标签中填充或替换内容了。
{% extends 'base.html' %}
{% block title %}<title>AnQiCMS - 首页</title>{% endblock %}
{% block content %}
<div class="index-banner">
<!-- 首页独有的轮播图或其他元素 -->
</div>
<section class="latest-articles">
<h2>最新文章</h2>
<!-- 调用文章列表标签 -->
{% archiveList archives with type="list" limit="5" %}
<ul>
{% for item in archives %}
<li><a href="{{ item.Link }}">{{ item.Title }}</a></li>
{% endfor %}
</ul>
{% endarchiveList %}
</section>
{% endblock %}
这样，index.html 就只关注自身内容的呈现，而无需重复编写页头页脚等公共代码。
方法二：使用 include 标签插入代码片段
extends 标签用于定义页面的整体结构，而 include 标签则像是“即插即用”的小零件，适用于那些在页面局部重复出现，或者需要在不同 block 之间共享的代码片段。例如，网站的 Logo 部分、面包屑导航、某个分类下的推荐文章列表等。
为了更好地管理这些代码片段，AnQiCMS 推荐在模板目录下创建一个 partial/ 文件夹来存放它们。
比如，您可以在 partial/header.html 中放置网站头部 Logo 和主导航：
<div class="logo">
<a href="{% system with name='BaseUrl' %}">
<img src="{% system with name='SiteLogo' %}" alt="{% system with name='SiteName' %}">
</a>
</div>
<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><a href="{{ inner.Link }}">{{ inner.Title }}</a></dd>
{% endfor %}
</dl>
{% endif %}
</li>
{% endfor %}
</ul>
{% endnavList %}
</nav>
然后在 base.html 或任何需要的地方，通过 {% include "partial/header.html" %} 简单地引入。
include 标签还可以传递变量。如果您希望某个引入的片段根据不同页面的上下文显示不同的内容，可以通过 with 参数实现：
{% include "partial/sidebar.html" with currentCategory="新闻中心" %}
在 partial/sidebar.html 中，您就可以使用 {{ currentCategory }} 这个变量了。
此外，为了增加模板的健壮性，您可以使用 if_exists 参数，这样即使引入的文件不存在，也不会导致页面报错：
{% include "partial/custom_feature.html" if_exists %}
方法三：借助 macro 标签定义可复用函数
macro 标签是 AnQiCMS 模板系统中的一个高级功能，它允许您定义可重复使用的“函数”。当您发现某个 HTML 结构需要根据不同的数据多次渲染时，macro 就显得非常有用。
例如，您可能在网站的不同位置需要以相同样式展示文章的“卡片”信息（标题、缩略图、简介）。您可以定义一个宏来处理这个结构：
在 macro_helpers.html 文件中定义宏：
{% macro article_card(article) %}
<div class="article-card">
<a href="{{ article.Link }}">
{% if article.Thumb %}<img src="{{ article.Thumb }}" alt="{{ article.Title }}"/>{% endif %}
<h3>{{ article.Title }}</h3>
<p>{{ article.Description|truncatechars:100 }}</p>
<span>发布日期：{{ stampToDate(article.CreatedTime, "2006-01-02") }}</span>
</a>
</div>
{% endmacro %}
然后，在您的页面模板中，通过 import 标签引入这个宏，并在循环中调用它：
{% import "macro_helpers.html" article_card %}
<section class="featured-articles">
<h2>精选文章</h2>
<div class="article-grid">
{% archiveList featuredArchives with flag="c" limit="4" %}
{% for item in featuredArchives %}
{{ article_card(item) }} {# 调用宏，传入文章数据 #}
{% endfor %}
{% endarchiveList %}
</div>
</section>
这样，无论您需要在哪里展示文章卡片，只需调用 article_card 宏，传入相应的文章数据即可，极大地减少了代码重复。
模板文件组织：让管理更轻松
合理组织模板文件能够让您的网站结构清晰、易于维护。AnQiCMS 模板的根目录是 /template。每个模板包都应该在 /template 下有自己的目录，并包含一个 config.json 文件来描述模板信息。
在模板目录内部，您可以按照以下约定来组织文件：
base.html: 作为整个网站的母版布局。index.html: 网站首页模板。{模型table}/: 存放不同内容模型（如article/、product/）的列表页 (list.html) 和详情页 (detail.html) 模板。page/: 存放单页面 (detail.html) 模板。- **`